Sections

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

• Info Box

• Label

• Page Header

• Picture Box

Horizontal Line

The horizontal line section introduces a gray horizontal line that spans across the full width of its parent element to your layout.

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.

Kind

Defines the theme and color scheme of the box. Options: Info (default), Success, Warning, Danger, Info-Left, Success-Left, Warning-Left, Danger-Left

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.

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.

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.

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.

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.

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.

Page Header

The Page Header section allows you to create a customized title bar in your application.

General

General properties allow you to define the basic design of your page header.

Text

Defines the page header title.

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.

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.

Height

Defines a custom height in pixels for your page header.

Icon Size

Defines a custom size in pixels for your page header icon displayed next to your page title.

Custom Background Color

Defines a background color for your page header.

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.

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.

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.

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.

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.

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.