Customization fields

Edit online

You can customize the UI by customizing the blocks on a page.

This section lists the fields that are used to customize the blocks on a page.

Layout configuration options available 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 available 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 available 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 available 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 available for tags

Field Description
Value Provide the text, as comma separated values, that must appear on tags.

Layout configuration options available 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 available for text editor and HTML enabled

Field Description
Configure the value Provide the custom text or HTML code.

Layout configuration options available for web components

Field Description
Name Select the name of the web component.
Element name Select the required element name.