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
Was this helpful?
This section covers section controls provided by the platform as graphical components that enhances the esthetics of an application layout or page.
Last updated
Was this helpful?
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.
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.
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
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.
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.
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 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.
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.
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 Page Header section allows you to create a customized title bar in your application.
General properties allow you to define the basic design of your page header.
Defines the page header title.
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.
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.
Defines a custom height in pixels for your page header.
Defines a custom size in pixels for your page header icon displayed next to your page title.
Defines a background color for your page header.
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.
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 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.
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.
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.
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.
