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.

Use only alphanumeric or underscore characters for the file name. Put the script file in the same location as its corresponding meta definition file. For example, for a cusotm attribute editor named magical, you could include the meta definition file and the script file in the following location:

my_bm_cartridge/cartridge/experience/editors/com/sfcc/magical.json

my_bm_cartridge/cartridge/experience/editors/com/sfcc/magical.js

In the script file, you can optionally implement the init function to initialize the custom attribute editor with server-side logic or resources.

This example script file adds options for the custom attribute editor not included in the editor_definition of the component's meta definition file. It also includes localization information and a reference to CSS resources that are required if the list of unicorns includes more than 10 items. The editor object passed to the init function is of type dw.experience.CustomEditor. It provides access to:

• configuration—Map that contains entries passed to the client-side scripts, populated with the values provided by the editor_definition of the attribute in the component's meta definition file. To extend the map, use only serializable entries, primitive types (number string, boolean), dw.util.HashMap, or JavaScript arrays. Native JavaScript objects (in curly braces) are not supported nor are other complex B2C Commerce script objects, such as dw.catalog.Product.
• dw.experience.CustomEditorResources—Collection of JavaScript and CSS URLs that the client-side iframe uses to display the custom attribute editor.

         magical.js
'use strict';
 
var Resource = require('dw/web/Resource');
var HashMap = require('dw/util/HashMap');
 
module.exports.init = function (editor) {
  // add some more options programmatically
  editor.configuration.options.put('init', [
    'Wynstar',
    'Jasper',
    'Joshi',
    'Rainbow',
    'Blythe',
    'Mika',
    'Nightwind',
    'Cadillac',
    'Julius',
    'Calimerio'
  ]);
 
  // add some localizations
  var localization = {
    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()',
    group3: 'Unicorns from OCAPI request'
  };
  editor.configuration.put('localization', Object.keys(localization).reduce(function (acc, key) {
    acc.put(key, Resource.msg(key, 'experience.editors.com.sfcc.magical', localization[key]));
    return acc;
  }, new HashMap()));
 
  // add some resources only required for a lot of unicorns
  if ((editor.configuration.options.config.length + editor.configuration.options.init.length) > 10) {
     editor.resources.styles.push("/experience/editors/com/sfcc/magical-extreme.css");
  }
}