Salesforce B2C Commerce 24.7 > Developing Your Site > Page Designer

Develop a Custom Attribute Editor

You can create a custom attribute editor for configuring component attributes. Merchants use the custom attribute editor when setting a value for the component attribute in the Business Manager visual editor.

Why Implement a Custom Attribute Editor?
When you create a component type for Page Designer, you specify attributes that the merchant can set. For example, you could create a headline banner component type with an attribute named Image. When merchants use the headline banner component type on a page, they must configure the Image attribute to select the image to display. The type value that you assign to the attribute in the component’s meta definition file determines the UI control (for example, a check box or file picker) that the merchant uses to configure the attribute.
How Does a Custom Attribute Editor Work?
A custom attribute editor uses a meta definition file, script, and JavaScript and CSS resources to implement an editor that operates within a self-contained environment on the client side. The merchant uses the custom attribute editor in the Page Designer visual editor to configure a value for the attribute.
Custom Attribute in the Component Meta Definition File
In the meta definition file for any standard component type, set the type of the attribute for which you want to use a custom attribute editor to custom and include an editor_definition element for the attribute. The editor_definition includes the custom attribute editor ID and optionally any configuration information that you want to pass to the custom attribute editor.
Custom Attribute Editor Meta Definition File
The meta definition file for a custom attribute editor references the JavaScript and CSS resources that the custom attribute editor requires.
Custom Attribute Editor Script File
Each custom attribute editor requires a script file. The script file has the same name as the corresponding meta definition file but with a .js extension. For example, if the meta definition file for the control is magical.json, name the script magical.js.
Client-Side JavaScript and CSS for a Custom Attribute Editor
Put the client-side JavaScript files and CSS resources required to run the custom attribute editor in the static/default directory of the custom cartridge at a location that corresponds to the location of the meta definition file and script file for the editor.
Custom Attribute Editor Events
Each custom attribute editor is wrapped in a host component that contains an HTML iframe element. The iframe encapsulates the code and styling of the editor and represents a self-contained sandbox environment in which the editor runs so that different custom attribute editors on the same page don't interfere with each other. The host and the custom attribute editor in the iframe communicate by passing events back and forth on a special messaging channel.
Create a Breakout Custom Attribute Editor that Displays in a Modal Window
Create a custom attribute editor sized to fit your content with the breakout custom attribute feature.
Use a Prebuilt Editor in a Custom Attribute Editor
Create custom attribute editors faster and more efficiently with prebuilt attribute editors. You can use the prebuilt editors as building blocks when you create custom attribute editors.