Customization fields
This section lists the fields that are used to customize the blocks on a page.
Layout configuration options for page alignment
Field | Description |
Direction | Specifies the direction of text in a block. Available options are:  Row. Aligns components in a horizontal fashion like a row. Column. Aligns components in a vertical fashion like a column. |
Main axis | Specifies the option to determine how the components in page must be distributed between and around the main axis of the page. Available options are: Start. Aligns components from the start of the block. Center. Aligns components towards the center of the block. End. Aligns components towards the bottom portion of the block. Space around. Distributes components evenly. Components have a half-size space on either end. Aligns the paragraphs in a block allowing space around each paragraph. Space between. Distribute components evenly The first item is flush with the start, the last is flush with the end Tip:
You can try the options, check results, and select |
Cross axis | Specifies the option to determine how the components in page must be distributed between and around the cross axis of the page. Available options are: Stretch. Stretches and aligns components to fill the block. Center. Aligns components towards the center of the block. Start. Aligns components from the start of the block. End. Aligns components towards the bottom portion of the block. |
Minimum height | Specifies the minimum height of a component. It prevents the used value of the height property from becoming smaller than the value specified value. |
Width | Specifies the width of the page. |
Flex basis | Specifies the initial minimum width of the page. |
Layout configuration options for headings
Field | Description |
Is display string a property key or plain text? | Specifies the type of text displayed as heading. Select one of these options: Text. To display plain text and provide the text to be displayed. Key. To display localization text and provide the required key. |
Type | Specifies the heading level. The value ranges from H1 to H6. |
Layout configuration options for images
Field | Description |
Has context? | Specifies if you insert an image using context. If you enable this, provide the JSON representation of the image that has to be inserted in the Source field. For example {
'icon' : '...'
}
${icon} The value of icon is retreived from the JSON provided in the field. |
Browse | Allows you to select an image from your device. |
Alt text | Provide the alt text for the image. |
Height (in pixels) | Provide the height of the image in pixels. |
Width (in pixels) | Provide the width of the image in pixels. |
Layout configuration options for buttons and icons
Field | Description |
Icon button | Specifies whether the button is an icon. |
Icons customization options |
Size | Specifies the size of the icon. Available options are small, medium, large, and extra small. Note:
You can try these options, check the preview, and select the required type. |
Icon | Allows you to select an icon from the list of default icons such as Save, Close and so on. |
Tooltip | Provide the tooltip that must appear for the icon. |
Button customization options |
Button type | Specifies the style of button. Available options are Primary, Secondary, Tertiary, and Emphasis. Note:
You can try these options, check the preview, and select the required type. |
Size | Specifies the size of the icon. Available options are small, medium, and large. Note:
You can try these options, check the preview, and select the required type. |
Is display string a property key or plain text? | Specifies the type of text displayed on the button. Select one of these options: Text. To display plain text and provide the text to be displayed. Key. To display a localization text and provide the required key. |
Layout configuration options for tags
Field | Description |
Value | Provide the text, as comma separated values, that must appear on tags. |
Layout configuration options for links
Field | Description |
Type | Specifies the type of link. Available options are Internal and External. |
Target link | Provide the required link. |
Is display string a property key or plain text? | Specifies the type of text displayed as link. Select one of these options: Text. To display plain text and provide the text to be displayed. Key. To display a UI label and provide the required key. |
Layout configuration options for text editor and HTML enabled
Field | Description |
Configure the value | Provide the custom text or HTML code. |
Layout configuration options for web components
Field | Description |
Name | Select the name of the web component. |
Element name | Select the required element name. |