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.

This example meta definition file for a banner includes three standard attributes: image of type file, alt of type string, and size of type enum. It also includes a custom attribute named Magic Unicorns, which is assigned to the custom attribute editor with ID com.sfcc.magical. The options for unicorns, for example, Auris and Chant, are listed in the configuration element in the editor_definition and passed to the custom attribute editor.

To view schema files that describe the JSON formatting for the meta definition file, see Page Designer JSON Schemas.

         banner.json{
  "name": "Banner",
  "description": "A banner.",
  "group": "content",
  "attribute_definition_groups": [
    {
      "id": "image",
      "name": "Banner Image Configuration",
      "description": "You can define the image file, size and alt text for the banner image.",
      "attribute_definitions": [
        {
          "id": "magic",
          "name": "Magic Unicorns",
          "type": "custom",
          "required": true,
          "editor_definition": {
            "type": "com.sfcc.magical",
            "configuration": {
              "options": {
                "config": [
                  "Auris",
                  "Chant",
                  "Elmas",
                  "Majesty",
                  "Moriba",
                  "Mystery",
                  "Mystic",
                  "Snowflake",
                  "Solstice",
                  "Sunshine"
                ]
              }
            }
          }
        },
{
          "id": "image",
          "name": "Banner Image",
          "description": "The image shown by the banner.",
          "type": "file",
          "required": true
        },
        {
          "id": "alt",
          "name": "Banner Image Alt Text",
          "description": "The image alt text shown by the banner.",
          "type": "string",
          "required": false
        },
        {
          "id": "size",
          "name": "Size",
          "description": "The banner size.",
          "type": "enum",
          "values": [
            "small",
            "medium",
            "large"
          ],
          "required": true,
          "default_value": "medium"
        }
      ],
      "region_definitions": []
    }
  ]
}