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.

Table 1. Metadata Properties
Property	Type	Required?	Default Value	Description
footerLeftButtons	Array<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.
footerRightButtons	Array<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.
components	Array<WizardComponentMetadata>	true		List of metadata definitions for the components in the wizard.
columns	Number	false	2	Number of columns the WizardComponent displays.
title	String	true		Title for the wizard that is displayed on the header of the modal.
size	String	true		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}

Table 2. Shared Component Properties
Property	Type	Required	Description
id	String	true	Case-sensitive unique identifier of the component instance. This identifier must be unique between all components in the wizard metadata configuration
type	String	true	Type 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.

Table 3. Button Properties
Property	Type	Required	Description
type	String	true	The 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.
brand	String	true	UI Type of the button. Possible values are: `base` `neutral` `brand` `brand-outline` `destructive` `destructive-text` `inverse` `success`
label	String	true	Label for the button.

Consumer Goods Cloud Developer Guide

Metadata Definition

Wizard Configuration

WizardComponentMetadata

WizardButtonMetadata