Custom Attribute in Component Meta Definition File

In the meta definition file for the component type, set the type of an attribute for which you want to use a custom control to custom. You can optionally include an editor_definition element for the attribute to pass information to the control.

The editor_definition includes the ID of the custom control you want to use for this attribute, and any configuration information that you want to pass to the control. This example meta definition file for a banner includes an attribute named Magic Unicorns, which is assigned to the custom control with ID com.sfcc.magical. The options for unicorns, for example, Auris and Chant, are listed in the configuration element within the editor_definition and passed to the custom UI control.

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": "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"
        },
        {
          "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"
                ]
              }
            }
          }
        }
      ],
      "region_definitions": []
    }
  ]
}