Component Attribute Types and UI Controls

Each attribute in the meta definition file for a component type has a type assigned to it. The attribute's type determines how the merchant sets its value in the Page Designer visual editor. For example, an attribute of type file displays a file selection modal window that the merchant can use to browse the library files. An attribute of type enum displays a single select box where the merchant chooses one of the allowed values.

This table describes the type options for component attributes and how those options are displayed in the Page Designer visual editor.

Table 1. Component Attribute Types and UI Controls
Component Attribute Type Attribute Semantics Visual Editor UI Control
boolean Boolean Check box
category String representing a catalog category ID Category picker
cms_record Record from the Salesforce CMS (Content Management System) User is presented with a modal window to select the CMS record. After the user selects the CMS record, the edit panel displays the UI controls necessary to configure the attributes of the slected CMS record.
custom String enclosed in curly brackets {} that represents a JSON object Text area or custom UI control
enum Enumeration of either string or integer values. Select box (single select)
file String representing a file path within a library File picker
image String representing a configurable image JSON Image picker that lets users select an image and specify a focal point on that image. The image dimensions are also stored and can be accessed, along with the image name and focal point, using the Image API
integer Integer Input field
markup String representing HTML markup A rich text editor that allows semantic formatting options to produce HTML markup
page String representing a page ID Page picker
product String representing a product SKU Product picker
string String Input field
text String Text area
url String representing a URL URL picker
X Privacy Update: We use cookies to make interactions with our websites and services easy and meaningful, to better understand how they are used. By continuing to use this site you are giving us your consent to do this. Privacy Policy.