Sections
This section covers section controls provided by the platform as graphical components that enhances the esthetics of an application layout or page.
Overview
Section controls provides predesigned components that can be added to your layout for specific purposes. Each section control can be customized by selecting the control in the main designer canvas and clicking on the gear icon to access its properties.
The platform offers several section elements.
Horizontal Line
The horizontal line section introduces a gray horizontal line that spans across the full width of its parent element to your layout.
This control does not have further configurations.
Info Box
The info box section provides a layout element that spans across the full width of its parent element by default. Configuring the info box allows you to display a message in that element.
General
General properties allow you to define the basic design of the info box.
Text
Defines the text that appears inside the info box.
Supports multiple languages
Kind
Defines the theme and color scheme of the box. Options: Info (default), Success, Warning, Danger, Info-Left, Success-Left, Warning-Left, Danger-Left
Theme
Color Scheme
Info
Blue
Success
Green
Warning
Yellow
Danger
Red
By using the normal themes (Info, Success, Warning, Danger), the entire info box makes use of the theme background color. Setting the Kind to a theme with the -Left suffix enables you to override this behavior and only show the theme color on the left side of the box.
Appearance
Appearance properties enable you to further style the design of your element.
Visible
Enabling this option ensures that your info box is displayed on the layout. It is enabled by default.
Margin
Defines the margin around your panel, offsetting it from the edges of its parent element.
The margin value is set using CSS notation.
Help
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Help Html
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
Position
Allows you to define where the help text should be displayed relative to your application window.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Step Order Index (Number)
Allows you to define the order within the intro tour.
The tab-index refers to the order in which elements are focused on using the Tab key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user.
Label
The Label section allows you to display an independent line of text on your layout.
General
General properties define the basic design of your element.
Text
Defines the label text content.
Supports multiple languages
Icon
Defines an optional icon that will appear alongside the label.
Icon Display Options (Available only when an icon has been set) Allows you to manipulate the selected icon. Options: Rotate 45°, Rotate 90°, Rotate 135°, Rotate 180°, Rotate 225°, Rotate 270°, Rotate 315°, Flip Horizontal, Flip Vertical, Spin, Pulse-Spin
Display As Link
Enabling this option converts the label into a hyperlink
Link URL (Available only when Display As Link is active) Defines the web address that the hyperlink should open when selected. Supports multiple languages
Style
Style properties allow you to further customize the design of your section using CSS rules.
CSS Color
Defines the font color of your element.
CSS Size
Defines the font size of your element.
CSS Text Align
Defines the text alignment of your label. Options: Left, Right, Center, Justify
CSS Font Weight
Defines the font weight (e.g. bold) of your element.
Help
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Help Html
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
Position
Allows you to define where the help text should be displayed relative to your application window.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Step Order Index (Number)
Allows you to define the order within the intro tour.
The tab-index refers to the order in which elements are focused on using the Tab key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user.
Page Header
The Page Header section allows you to create a customized title bar in your application.
It is highly recommended to place your page header onto a page. This provides for the basic page interactions such as closing or pinning a page.
General
General properties allow you to define the basic design of your page header.
Text
Defines the page header title.
Supports multiple languages
Show Down Menu
Enabling this option allows additional actions to be accessed as a dropdown menu by clicking on the page name in the page header. This can be particularly useful to switch contexts quickly within the same layout.
This option can only be used when the page header is placed in a List Result page.
Advanced
Advanced properties provide further control over the design and functionality of the header.
Show Close Button
Enabling this option adds a close button to your page header.
Show Pin Button
Enabling this option adds a button to your page header, allowing the current page to be pinned.
Show Page Name
Enabling this option ensures that the page title is displayed in the header.
Color Covers Entire Background
Enabling this option transforms your header so that it is colored completely.
By default, only a small icon box is colored next to the page title in the header
Height
Defines a custom height in pixels for your page header.
Setting the value to empty causes the default header height to be used.
Icon Size
Defines a custom size in pixels for your page header icon displayed next to your page title.
Setting the value to empty causes the default header height to be used.
Custom Background Color
Defines a background color for your page header.
Setting the value to empty causes the default header height to be used.
Help
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Help Html
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
Position
Allows you to define where the help text should be displayed relative to your application window.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Step Order Index (Number)
Allows you to define the order within the intro tour.
The tab-index refers to the order in which elements are focused on using the Tab key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user.
Picture Box
The picture box section enables you to add an image component to your layout.
General
General properties defines the basic content of your picture box.
URL
Defines the hyperlink to your image file.
Data Source
Allows you to use an image from your application in your picture box.
Appearance
Appearance properties allow you to further customize the design of your picture box.
Text
Defines a text that is displayed on top of your image.
Supports multiple languages
Responsive (Yes/No)
Activating this option ensures that your image is scaled responsively based on the screen size.
Align Center (Yes/No)
Activating this option aligns your picture box to be centralized horizontally.
Max Height
Defines the maximum height of your picture box.
Setting this to 0 or Empty allows the maximum height to be unlimited.
Help
Help properties allows you to customize the information displayed in the intro tour of your page. The intro tour typically goes through each item that contains help information.
Help Html
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
Position
Allows you to define where the help text should be displayed relative to your application window.
Supported positions: Auto, Top, Left, Right, Bottom, Bottom-Left, Bottom-Middle, Bottom-Right
Step Order Index (Number)
Allows you to define the order within the intro tour.
The tab-index refers to the order in which elements are focused on using the Tab key on your keyboard. This is an essential feature to enhance the accessibility and usability of your application by any user.
Last updated