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
custom String enclosed in curly brackets {} that represents a JSON object Text area (support for custom editors is planned for future implementations)
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