Metadata Definition

This topic describes the metadata structure and the available wizard components that can be used to build wizards.

Wizard Configuration 

Wizards are generated from a metadata JSON structure defining the list of components that are part of a wizard along with some additional properties to define the available actions and the general layout.

PropertyTypeRequired?Default ValueDescription
footerLeftButtonsArray<String | WizardButtonMetadata>false[]List of button actions that appears on the footer. The actions cancel and submit have default button styles and can be specified as strings. For custom actions, use the WizardButtonMetadata structure to define proper styling for the buttons.
footerRightButtonsArray<String | WizardButtonMetadata>false[]List of button actions that appears on the footer. The actions cancel and submit have default button styles and can be specified as strings. For custom actions, use the WizardButtonMetadata structure to define proper styling for the buttons.
componentsArray<WizardComponentMetadata>true List of metadata definitions for the components in the wizard.
columnsNumberfalse2Number of columns the WizardComponent displays.
titleStringtrue Title for the wizard that is displayed on the header of the modal.
sizeStringtrue Wizard modal size.
Possible values:
  • small
  • large

WizardComponentMetadata 

This metadata type describes the components that are inside the wizard. Components render in same order they’re placed in the list.

Each component has its own specific attributes, however, all components share a common set of attributes that must be specified:

1{
2    "id": "mySlogan"
3    "type": "Text",
4    "outputProperty": "Slogan",
5    "required": true,
6    "label": "Slogan",
7    "maxLength": 80,
8    "minLength": 1,
9    "defaultValue": ""
10}
PropertyTypeRequiredDescription
idStringtrueCase-sensitive unique identifier of the component instance. This identifier must be unique between all components in the wizard metadata configuration  
typeStringtrueType of the component to render. this attribute indicates the component that is rendered on UI. Also, this attribute defines the additional attributes required for the component.  

WizardButtonMetadata 

This metadata structure defines the buttons that appear at the bottom of the wizard.

PropertyTypeRequiredDescription
typeStringtrueThe action that will be performed after clicking the button. Button type is a free text, which is returned along with the output object when the user clicks a button.
brandStringtrueUI Type of the button. Possible values are:
  • base
  • neutral
  • brand
  • brand-outline
  • destructive
  • destructive-text
  • inverse
  • success
labelStringtrueLabel for the button.