Skip to main content

Schema Component Types

INPUT

Description

INPUT types display an input field.

Screenshot

INPUT

Properties

Property nameDescription
titleThe label text for the input field.
placeholderThe placeholder text for the input field.
defaultValueThe default value text for the input field.
typeThe schema component type: INPUT.
requiredSpecify whether the input field value is required. true or false.
validation.patternThe regex expression to validate the input field value.
validation.messageThe error validation message text.

Form Schema Example

sliderTitle: {
title: 'Slider Title',
placeholder: 'Slider title',
defaultValue: 'Slider title',
type: INPUT,
required: true,
validation: {
pattern: /^[a-zA-Z0-9 ]+$/gm,
message: 'This field is invalid'
}
},

TEXTAREA

Description

TEXTAREA types display a multi-line plain-text editing control.

Screenshot

TEXTAREA

Properties

Property nameDescription
titleThe label text for the multi-line plain-text field.
placeholderThe placeholder text for multi-line plain-text field.
defaultValueThe default value text for multi-line plain-text field.
typeThe schema component type: TEXTAREA.
requiredSpecify whether the multi-line plain-text field value is required. true or false.
validation.patternThe regex expression to validate the multi-line plain-text field value.
validation.messageThe error validation message text.

Form Schema Example

description: {
title: 'Description',
placeholder: 'Description',
defaultValue: 'Description',
type: TEXTAREA,
required: true,
validation: {
pattern: /^[a-zA-Z0-9 ]+$/gm,
message: 'This field is invalid'
}
}

Description

DROPDOWN types display a control that provides a menu of options through a dropdown list. One option can be selected.

Screenshot

DROPDOWN

Properties

Property nameDescription
titleThe label text for the dropdown list field.
defaultValueThe default option value for the dropdown list field.
typeThe schema component type: DROPDOWN.
requiredSpecify whether the dropdown list field value is required. true or false.
optionsThe menu of options for the dropdown list.
validation.defaultThe default option text to display when no options were selected

Form Schema Example

const HEIGHT_OPTIONS = [
{ value: 400, label: 'Small 400px' },
{ value: 555, label: 'Medium 555px' },
{ value: 660, label: 'Large 660px' }
];

height: {
title: 'Height',
type: DROPDOWN,
required: false,
defaultValue: HEIGHT_OPTIONS[1].value,
options: HEIGHT_OPTIONS,
validation: {
default: 'Select'
}
}

TOGGLE

Description

TOGGLE types display a control that provides a switch between two different options.

Screenshot

TOGGLE

Properties

Property nameDescription
labelOnThe label text to display when the switch is on.
labelOddThe label text to display when the switch is off.
defaultValueThe default switch option. true or false.
typeThe schema component type: TOGGLE.

Form Schema Example

showRatings: {
labelOn: 'uieditor.sfbComponent.productBanner.showRatings.labelOn',
labelOff: 'uieditor.sfbComponent.productBanner.showRatings.labelOff',
defaultValue: true,
type: TOGGLE
}

TOGGLE_CHECK

Description

TOGGLE_CHECK types display a control that provides a checkbox to switch between two different options.

Screenshot

TOGGLE_CHECK

Properties

Property nameDescription
labelThe label text for the checkbox field.
defaultValueThe default option value for the checkbox field. true or false.
typeThe schema component type: TOGGLE_CHECK.
marginSizeThe margin between the checkbox field in pixel (px).
indentSizeThe left padding for the checkbox field. The value is multiplied by 25 pixels (px).

Form Schema Example

isDisplayCarets: {
label: 'Display carets',
defaultValue: true,
type: TOGGLE_CHECK,
marginSize: 10,
indentSize: 0
},

COLORPICKER

Description

COLORPICKER types display a control that provides a color palette to select a specific color.

Screenshot

COLORPICKER

Properties

Property nameDescription
titleThe label text for the color picker field.
defaultValueThe default color value in hex code for the color picker field.
typeThe schema component type: COLORPICKER.

Form Schema Example

backgroundColor: {
title: 'Backround color',
defaultValue: '#474747',
type: COLORPICKER
},

RADIO

Description

RADIO types display a control that provides a menu of options (also known as radio buttons). One option can be selected.

Screenshot

RADIO

Properties

Property nameDescription
titleThe label text for the radio button group field.
requiredSpecify whether the radio button group field value is required. true or false.
defaultValueThe default value the radio button group field.
typeThe schema component type: RADIO.

Form Schema Example

const SLIDE_SIZES = [
{ value: 'xsmall', label: 'X-Small' },
{ value: 'small', label: 'Small' },
{ value: 'medium', label: 'Medium' },
{ value: 'large', label: 'Large' },
];

size: {
title: 'Size',
required: true,
defaultValue: SLIDE_SIZES[0].value,
options: SLIDE_SIZES,
type: RADIO
}

CHECKBOX

Description

CHECKBOX types display a control that provides a menu of options through checkboxes group. Multiple options can be selected.

Screenshot

CHECKBOX

Properties

Property nameDescription
requiredSpecify whether the checkbox group field value is required. true or false.
defaultValueThe default value the checkbox group field.
optionsThe menu of options for the checkbox group field.
typeThe schema component type: CHECKBOX.
marginSizeThe margin between the checkbox group field in pixel (px).
indentSizeThe left padding for the checkbox group field. The value is multiplied by 25 pixels (px).

Form Schema Example

SLIDER

Description

SLIDER types display a control that provides a slider to specify a numeric value between a specified minimum and maximum value.

Screenshot

SLIDER

Properties

Property nameDescription
titleThe label text for the slider field.
defaultValueThe default value of the slider field.
typeThe schema component type: CHECKBOX.
options.minThe minimum numeric value
options.maxThe maximum numeric value
options.stepThe step numeric value

Form Schema Example

borderRadius: {
title: 'uieditor.sfbComponent.sliderComponent.borderRadius.title',
type: SLIDER,
defaultValue: 8,
options: {
min: 0,
max: 35,
step: 1
}
}

GROUP_HEADER

Description

GROUP_HEADER types display a group header text.

Screenshot

GROUP_HEADER

Properties

Property nameDescription
titleThe label text for the group header.
typeThe schema component type: GROUP_HEADER.

Form Schema Example

sliderSettings: {
title: 'Settings',
type: GROUP_HEADER
},

SPACER

Description

SPACER types display a vertical space of 24px.

Screenshot

N/A

Properties

Property nameDescription
typeThe schema component type: SPACER.

Form Schema Example

SLIDES

Description

SLIDES types display a control that manages slides for the Carousel component.

Screenshot

SLIDES

Properties

Property nameDescription
requiredSpecify whether the checkbox group field value is required. true or false.
defaultValueThe default value the checkbox group field.
optionsThe menu of options for the checkbox group field.
typeThe schema component type: CHECKBOX.
marginSizeThe margin between the checkbox group field in pixels (px).
indentSizeThe left padding for the checkbox group field. The value is multiplied by 25 pixels (px).

Form Schema Example

PRODUCTS_LIST

Description

PRODUCTS_LIST types display a control that manages the product list of the Slider component for product curation.

Screenshot

PRODUCTS_LIST

Properties

Property nameDescription
titleThe product list title.
defaultValue.itemsThe array of product list.
defaultValue.contentTypeThe product list curated type. manual or dynamic.
typeThe schema component type: PRODUCT_LIST.
requiredSpecify whether the product list is required. true or false.

Form Schema Example

productsList: {
title: 'Products',
defaultValue: {
items: [],
contentType: DYNAMICALLY_CURATED_CONTENT_TYPE
},
type: PRODUCTS_LIST,
required: true
}

IMAGE_UPLOADER

Description

IMAGE_UPLOADER types displays a control that allows image uploading.

Screenshot

IMAGE_UPLOADER

Properties

Property nameDescription
titleThe label text for the image upload field.
captionThe caption text to display below the image upload field.
placeholderThe placeholder text to display inside the image upload field.
defaultValue

The default value of the image upload field. An object with filename, type, url.

typeThe schema component type: IMAGE_UPLOADER.
requiredSpecify whether the image upload field is required. true or false.

Form Schema Example

backgroundImg: {
title: 'Background Image',
caption: 'Supports JPG and PNG formats up to 2MB.',
placeholder: 'Choose File',
defaultValue: {},
type: IMAGE_UPLOADER,
required: false,
}

TABS_LIST

Description

TABS_LIST types display a control that manages the tab list of the ProductTabMenu component.

Screenshot

TABS_LIST

Properties

Property nameDescription
typeThe schema component type: TABS_LIST.
defaultValueSpecify an array of tab items.

Form Schema Example

const PROFILE_TABS = {
overview: {
label: '',
defaultLabel: 'uieditor.tabs.overview',
href: '/en-US/apps/163915/talech/overview',
value: 'overview',
selected: true,
isEditMode: false,
isVisible: true
},
features: {
label: '',
defaultLabel: 'uieditor.tabs.features',
href: '/en-US/apps/163915/talech/features',
value: 'features',
selected: false,
isEditMode: false,
isVisible: true
},
reviews: {
label: '',
defaultLabel: 'uieditor.tabs.review',
href: '/en-US/apps/163915/talech/reviews',
value: 'reviews',
selected: false,
isEditMode: false,
isVisible: true
}
};

pageTabs: {
type: TABS_LIST,
defaultValue: [
PROFILE_TABS.overview, PROFILE_TABS.features, PROFILE_TABS.reviews
]
}

DRAWER_LIST

Description

DRAWER_LIST types display a control that manages a expandable list with custom forms.

Screenshot

DRAWER_LIST

Properties

Property nameDescription
typeThe schema component type: DRAWER_LIST.
defaultValueSpecify an array of drawer items, the expandable form object and allowed context menu options.

Form Schema Example

const DRAWER_LIST_ITEMS = {
items: [
{
label: 'Facebook',
icon: 'facebook',
values: {
accountLink: {
value: 'https://www.facebook.com'
}
}
},
{
label: 'Twitter',
icon: 'twitter',
values: {
accountLink: {
value: 'https://www.twitter.com'
}
}
}
],
form: {
accountLink: {
title: 'account link',
placeholder: 'placeholder',
defaultValue: '',
type: INPUT,
required: false,
validation: {
pattern: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g,
message: 'Invalid field'
}
},
uploadIcon: {
title: 'upload icon',
caption: 'caption',
placeholder: 'placeholder',
buttonText: 'buttonText',
defaultValue: '',
type: IMAGE_UPLOADER,
required: false
}
},
contextMenuOptions: ['SHOW_HIDE']
};

drawerList: {
type: DRAWER_LIST,
defaultValue: DRAWER_LIST_ITEMS
}

Description

LOGO types display a control that manages which logo (light, dark, no logo) is displayed. Logo image urls are saved in the css properties as --logoImage (lightLogo) and --darkLogo.

Screenshot

LOGO

Properties

Property nameDescription
typeThe schema component type: LOGO.
defaultValueSpecify the default selected logo type ('lightLogo', 'darkLogo', 'noLogo').

Form Schema Example

footerLogo: {
type: LOGO,
defaultValue: 'darkLogo'
}

Conditional rendering of schema form settings

If you want to disable/hide one schema form setting based on the value of another schema form setting, you can use the conditionalAttributes property.

Properties

Right now, the conditional type is isDisabled or isVisible:

Conditional typesDescription
conditionalAttributes.isDisabledDisable this schema form setting based on the child condition.
conditionalAttributes.isVisibleMake this schema form setting visible based on the child condition.

The child condition:

Condition propertiesDescription
whenThe name of the schema form setting that the condition depends on
connector

The connector condition can have one of these values: equals, notEquals, include or notInclude
Use equals or notEquals when the field providing the value to be checked returns a single value (Ex a RADIO input field). You can compare against a single value or an array of values
Use include or notInclude when the field providing the value to be checked returns an array of values (Ex a CHECKBOX input field).

valueThe value to apply

Form Schema Example

isDisplayCarets: {
label: 'Display Carets',
defaultValue: true,
type: TOGGLE_CHECK,
marginSize: 10
},
isDisplayCaretsOnHover: {
label: 'Display Carets On Hover',
defaultValue: false,
type: TOGGLE_CHECK,
conditionalAttributes: {
isVisible: {
when: 'isDisplayCarets',
connector: 'equals',
value: true
}
},
indentSize: 1,
marginSize: 10
}

Was this page helpful?