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.

This trigger editor script file example specifies a breakout editor with ID com.sfcc.magicalBreakout. The script creates a breakoutEditorConfig configuration object that contains the localization information defined for the trigger editor. It also includes the options defined in the attribute_definitions section of the component meta definition file for the trigger editor, obtained from editor.configuration.options.config.

The localization information and options in the breakoutEditorConfig object are passed from the trigger editor to the breakout editor using the PageMgr.getCustomEditor method, which instantiates the breakout editor with the given ID. The script then adds the breakout editor as a dependency using editor.dependencies.put. The ID included in editor.dependencies, in this case magical_breakout, is used in the client-side code for the trigger and breakout editors to access the breakout editor.

         magical.js
'use strict';
 
var HashMap = require('dw/util/HashMap');
var Resource = require('dw/web/Resource');
var PageMgr = require('dw/experience/PageMgr');
 
module.exports.init = function(editor) {
  // Default values for L10N properties
  var l10nDefaults = {
    buttonBreakout: 'Select',
    titleBreakout: 'Breakout Content Title',
    placeholder: 'Select your favorite unicorn',
    description: 'Unicorns are magical creatures you want for every component. Select the one of your choice now!',
    group1: 'Unicorns from JSON Config',
    group2: 'Unicorns from init()'
  };
 
  // Add some localizations
  var localization = Object.keys(l10nDefaults).reduce(function (acc, key) {
    acc.put(key, Resource.msg(key, 'experience.editors.com.sfcc.magical', l10nDefaults[key]));
    return acc;
  }, new HashMap());
  editor.configuration.put('localization', localization);
 
  // Pass through property `options.config` from the `attribute_definition` to be used in a breakout editor
  var options = new HashMap();
  options.put('config', editor.configuration.options.config);
 
  // Create a configuration for a custom editor to be displayed in a modal breakout dialog (breakout editor)
  var breakoutEditorConfig = new HashMap();
  breakoutEditorConfig.put('localization', localization);
  breakoutEditorConfig.put('options', options);
 
  // Add a dependency to the configured breakout editor
  var breakoutEditor = PageMgr.getCustomEditor('com.sfcc.magicalBreakout', breakoutEditorConfig);
  editor.dependencies.put('magical_breakout', breakoutEditor);
};