Sections
This section covers section controls provided by the platform as graphical components that enhances the esthetics of an application layout or page.
Last updated
This section covers section controls provided by the platform as graphical components that enhances the esthetics of an application layout or page.
Last updated
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.
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.
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 properties allow you to define the basic design of the info box.
Defines the text that appears inside the info box.
Supports multiple languages
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 properties enable you to further style the design of your element.
Enabling this option ensures that your info box is displayed on the layout. It is enabled by default.
Defines the margin around your panel, offsetting it from the edges of its parent element.
The margin value is set using CSS notation.
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.
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
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
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.
The Label section allows you to display an independent line of text on your layout.
General properties define the basic design of your element.
Defines the label text content.
Supports multiple languages
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
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 properties allow you to further customize the design of your section using CSS rules.
Defines the font color of your element.
Defines the font size of your element.
Defines the text alignment of your label. Options: Left, Right, Center, Justify
Defines the font weight (e.g. bold) of your element.
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.
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
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
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.
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 properties allow you to define the basic design of your page header.
Defines the page header title.
Supports multiple languages
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 properties provide further control over the design and functionality of the header.
Enabling this option adds a close button to your page header.
Enabling this option adds a button to your page header, allowing the current page to be pinned.
Enabling this option ensures that the page title is displayed in the header.
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
Defines a custom height in pixels for your page header.
Setting the value to empty causes the default header height to be used.
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.
Defines a background color for your page header.
Setting the value to empty causes the default header height to be used.
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.
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
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
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.
The picture box section enables you to add an image component to your layout.
General properties defines the basic content of your picture box.
Defines the hyperlink to your image file.
Allows you to use an image from your application in your picture box.
Appearance properties allow you to further customize the design of your picture box.
Defines a text that is displayed on top of your image.
Supports multiple languages
Activating this option ensures that your image is scaled responsively based on the screen size.
Activating this option aligns your picture box to be centralized horizontally.
Defines the maximum height of your picture box.
Setting this to 0 or Empty allows the maximum height to be unlimited.
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.
Allows you to write Html code that is rendered as help text for your section.
Supports multiple languages.
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
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.
