Salesforce B2C Commerce 24.7 > Developing Your Site > Page Designer > Develop a Custom Attribute Editor

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.

What Is a Breakout Editor?
The right pane of the Page Designer visual editor provides only limited space for merchants to configure component attributes. To provide more space, you can create a trigger editor to display a breakout editor inside a separate modal window.
Trigger Editor Meta Definition and Script Files
To create a trigger custom attribute editor, define the attribute as type custom in the component meta definition file. Then create a meta definition JSON file and a script file for the trigger editor. In the script file, instantiate the breakout editor using the PageMgr.getCustomEditor method. This method takes the ID of the breakout editor and an optional configuration object. Then add the breakout editor as a dependency.
Salesforce Commerce Cloud D2C: Quick Start Guide
Learn how to build, customize, and launch a fully functional D2C store using Salesforce Commerce Cloud. From initial setup to branding, product configuration, and checkout optimization, this course will equip you with the skills to go live fast and scale.
Breakout Editor Meta Definition and Script Files
The breakout custom attribute editor requires its own JSON meta definition file and script file.
Open and Close a Breakout Editor
To open the modal window for the breakout editor, we recommend using a callback on event emission approach, which manages the asynchronous breakout editor process. If you have multiple breakout editors, the callback on event emission approach makes it easier to keep track of open breakout editors because a callback is related to only one breakout process.
Enable and Disable the Breakout Editor Apply Button
You can emit an sfcc:valid event from the breakout editor to indicate whether the value that the user selected in the breakout editor is valid. If the value is valid, Page Designer enables the Apply button in the breakout modal window footer. If the value is invalid, Page Designer disables the Apply button and optionally displays an error message.
Trigger and Breakout Editor Client-Side UI Code
The trigger editor and the breakout editor require client-side script files. You can incorporate any of the custom attribute editor events in the script files. The trigger editor file opens and closes the breakout editor and emits the sfcc:value event to Page Designer. The breakout editor file includes the code to implement the editor, and emits sfcc:valid and sfcc:value events to the trigger editor.
Salesforce Javascript Developer I - Certification Tests
Not just another prep course—this is your shortcut to passing. Tackle 80+ handpicked questions, plus a final timed test that mirrors the real exam. Master JavaScript for Salesforce and go from 'hoping to pass' to knowing you will. Ready to start?