Layouts

06 Aug 2024
12 Minutes to read

Layouts

Updated on 06 Aug 2024
12 Minutes to read

Article summary

Did you find this summary helpful?

Thank you for your feedback

The layout plays a vital role in focused and refined visual journey of your form interface. Design your forms with various types of layouts to provide a clear and interactive user interface.

Layout Types

We have the following three types of layouts.

A sample screenshot is shown below:

Figure: Layouts

Let's dive into the above-mentioned layouts.

Splitter

The splitter allows you to effectively organize the visual components on your form. You can simply drag and drop the splitter on the form builder page.

Let's explore the following use-case.

Use Case User Persona: Application Designer	Solution
The Application Designer Sam wants to create an interface where the form controls named incident details such as Incident ID and Caller Name should be in the left section and other fields Symptom, Priority, Urgency and Workgroup should be in the right section	To achieve this functionality, he can drag and drop the required controls for the fields Incident ID and Caller Name in the left layout (20), and place the other fields such as Symptom, Priority, Urgency and Workgroup in the right layout (80).

Producer View:

Consumer View:

Figure: Splitter - Consumer View

Configure Splitter

To configure Splitter, perform the following steps:

Navigate to Design Studio > Form Designer > Design Form > Controls > Layout > Splitter.
Drag and drop the required splitter as per your layout design requirement. Click Settings icon
to configure the properties of the splitter. A sample screenshot is shown below:

Figure: Splitter Properties

To know more about the fields that are available under the Properties section, see Field Description given below.

Field Name

Description

General

Label

Specify the name for the Splitter control. This name identifies the Splitter control.

Hide Header

If this toggle button is enabled, then the configured label will not be displayed on the form.

Appearance

To know more about the fields that are available under the Appearance section, see Field Description given below. Sample screenshots are shown below:
Figure: Appearance - Header
Figure: Appearance - Container

To know more about the fields that are available under the Appearance section, see Field Description of given below.

Field Name	Description
Header
Border
Style	Specify the style of the border. Available options are as follows: None - Select it to keep the image without any border. Dashed - Select it to keep the image border as dashed line. Solid - Select it to keep the image border as solid line. Dotted - Select it to keep the image dotted line. If the border Style is selected as Dashed, Solid or Dotted, it displays the additional border specifications options such as Side, Width, Color and Corner. A sample screenshot is shown below: Figure: Border Style
Side	Select the topmost check box to apply the border on all four sides. A sample screenshot is shown below:Figure: Side
Width	Specify the width of the border to be applied in px. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 px 1/4 px 3 px 4 1/2 px 6 px A sample screenshot is shown below: Figure: Width
Color	Specify the color of the border from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Corner	This option appears only if image border style is selected as Dashed, Solid or Dotted. Available options are as follows: Round - Select it to provide the rounded corner border for the applied border. Sharp - Select it to provide the sharp corner border for the applied border.
Radius	This option appears only if image border style is selected as Dashed, Solid or Dotted and Corner is selected as Round. A sample screenshot is shown below: Available options are as follows: Figure: Radius
Background
Background Type	Select the background type of the header. Available options are as follows: None Image Solid
Image Upload	This field is visible only if Container Background Type is selected as Image. Select the required image using the upload button. A sample screenshot is shown below: Figure: Background - Image Upload
Color	This field is visible only if Container Background Type is selected as Color. Select the required image using the color pallet. A sample screenshot is shown below: Figure: Background - Color
Label
Font Type	Select the type of the font from the drop-down list of available options of font type.
Font Color	Select the type of the font color from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Font Size	Select the size of the font from the drop-down list of available options of font type using upwards or downwards arrows. A sample screenshot is shown below:Figure: Font Size Drop-down You can also use a horizontal slider to increase or decrease the font size. A sample screenshot is shown below: Figure: Font Size Slider
Font Style	Select the required font style. Available options are as follows: B - Select it to make the image bold. I - Select it to make the image italics. U - Select it to make the image underlined.
Container
Border
Side	Select the topmost check box to apply the border on all four sides. A sample screenshot is shown below:Figure: Side
Width	Specify the width of the border to be applied in px. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 px 1/4 px 3 px 4 1/2 px 6 px A sample screenshot is shown below: Figure: Width
Color	Specify the color of the border from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Corner	This option appears only if image border style is selected as Dashed, Solid or Dotted. Available options are as follows: Round - Select it to provide the rounded corner border for the applied border. Sharp - Select it to provide the sharp corner border for the applied border.
Radius	This option appears only if image border style is selected as Dashed, Solid or Dotted and Corner is selected as Round. A sample screenshot is shown below: Available options are as follows: Figure: Radius
Width
Width	Select the width of the container from the drop-down list of available options of width using upwards or downwards arrows. You can also use a horizontal slider to increase or decrease the container width.
Height
Minimum Height	Select the minimum height of the container from the drop-down list of available options of height using upwards or downwards arrows. You can also use a horizontal slider to increase or decrease the height.
Background
Background Type	Select the background type of the container. Available options are as follows: None Image Solid
Image Upload	This field is visible only if Container Background Type is selected as Image. Select the required image using the upload button. A sample screenshot is shown below: Figure: Background - Image Upload
Color	This field is visible only if Container Background Type is selected as Color. Select the required image using the color pallet. A sample screenshot is shown below: Figure: Background - Color

Horizontal Divider

The Horizontal Divider is the horizontal separator between the sections to make it more readable.

Figure: Horizontal Divider

Let's explore the following use-case.

Use Case User Persona: Application Designer	Solution
The Application Designer Sam wants to create an interface where User menu has options such as My Incidents and New Incident, and Analyst menu has options such as New Incident for User and Incident List. The requirement is to differentiate the two sections to make it more readable.	To achieve this functionality, he can use the horizontal divider between the menu options User and Analyst to make to two segments. The User segment will have the options My Incidents and New Incidents. Similarly, Analyst segment will have options such as New Incident for User and Incident List.

Configure Horizontal Divider

The Horizontal Divider is configured at the application level settings.

Navigate to Design Studio > Form Designer > Design Form > Controls > Layout > Horizontal Divider. Drag and drop the horizontal divider as per your layout design requirement. You can simply drag and drop the Horizontal Divider on the form builder page. Click on gear icon icon to configure the properties for Appearance tab. A sample screenshot is shown below:

Figure: Horizontal Divider Appearance Tab

To know more about the fields that are available under the Appearance section, see Field Description given below.

Field Name	Description
General
Style	Select the border style for the horizontal divider. Available options are as follows: None Dashed Doted Solid
Width	Select the border width for horizontal divider. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 1/4 px 3 px 4 1/2 px 6 px
Color	Specify the color of the border from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Padding	Specify the number in the respective checkboxes to provide the margin for horizontal divider for top, right, bottom and left directions. Only numeric values are allowed. Click on icon to link all the numeric values for all padding directions together. The numeric value entered in one box will be copied to all of the other boxes and any modification in one box will automatically update the other boxes. For Example: When the padding values are linked. Figure: Padding - Linked For Example: When the padding values are not linked. Figure: Padding - Not Linked

Vertical Divider

The Vertical Divider is the vertical separator between the sections to make to more interactive and highlighted.

Figure: Vertical Divider

Let's explore the following use-case.

Use Case User Persona: Application Designer	Solution
The Application Designer Sam wants to create an interface where all of the modules such as Incident Management, Change Management, Service Request, Problem Management and Call Management are introduced with a small description and should be represented an individual block.	To achieve this functionality, he can place all modules with brief description separated by vertical dividers, which displays the Incident Management, Change Management, Service Request, Problem Management and Call Management as individual sections.

Configure Vertical Divider

Navigate to Design Studio > Form Designer > Design Form > Controls > Layout > Vertical Divider. Drag and drop the vertical divider as per your layout design requirement. You can simply drag and drop the vertical divider on the form builder page. Click on gear icon icon to configure the properties for Properties and Appearance tabs. A sample screenshot is shown below:

Figure: Vertical Divider Appearance Tab

To know more about the fields that are available under the Appearance section, see Field Description given below.

Field Name	Description
General
Style	Select the border style for the vertical divider. Available options are as follows: None Dashed Doted Solid
Width	Select the border width for vertical divider. Available options are as follows: 1/4 px 1/2 px 3/4 px 1 px 1 1/2 px 2 1/4 px 3 px 4 1/2 px 6 px
Color	Specify the color of the border from the color widget from the provided set of color options. Click option to select the required color from the displayed color widget. A sample screenshot is shown below: Figure: Color Widget
Padding	Specify the number in the respective checkboxes to provide the margin for vertical divider for top, right, bottom and left directions. Only numeric values are allowed. Click on icon to link all the numeric values for all padding directions together. The numeric value entered in one box will be copied to all of the other boxes and any modification in one box will automatically update the other boxes. For Example: When the padding values are linked. Figure: Padding - Linked For Example: When the padding values are not linked. Figure: Padding - Not Linked

Header

The Header is the top section of the form contains the essential elements of the form to make it more interactive.

Figure: Header

Let's explore the following use-case.

Use Case User Persona: Application Designer	Solution
The Application DesignerSam wants to create an interface where the status of the incident and Incident ID should get displayed on the top of main form Incident Details. Also, the header should be floating and keep moving along with the scroll move.	To achieve this functionality, he can place the Status field and Incident ID field in the Header pane after dragging the Header control on the Form Designer canvas. He can select the Properties > HeaderStyle as Floater to keep the header dynamic.

Configure Header

Navigate to Design Studio > Form Designer > Design Form > Controls > Layout > Header. Drag and drop the header as per your layout design requirement. You can simply drag and drop the header on the form builder page. Click on gear icon to configure the properties for Properties and Appearance tabs. A sample screenshot is shown below:

Figure: Header Properties Tab

Figure: Header Appearance Tab

To know more about the fields that are available under the Appearance section, see Field Description given below.

Field Name	Description
General
Header Style	Select the header style for the header. Available options are as follows: Floater - Select it if the header has to be moved along as the page scrolls down. It is useful for the long scrolling pages with more content. Static - Select it if the header has to be remained fixed at the top of the page. It is useful for the pages with less content.
Container Background	Select Background Type, Image Upload and Color the background in this section. For more information on field details Field Description table for Appearance section of Configure Splitter.
Transparency	This option appears only if Container Background Type is selected as Image Upload. Select the transparency value from the drop-down list of available options using upwards or downwards arrows. You can also use a horizontal slider to increase or decrease the transparency value. A sample screenshot is shown below: Figure: Transparency
Container Border	Select Style, Side, Width, Color, Corner and Radius for the container in this section. For more information on field details Field Description table for Appearance section of Configure Splitter.
Container Height
Maximum Height	Select the maximum height of the container from the drop-down list of available options of height using upwards or downwards arrows. You can also use a horizontal slider to increase or decrease the height.

Footer

The Footer is the displayed at the bottom section of the form appearing just below the main content of the form page.

Figure: Footer

Let's explore the following use-case.

Use Case User Persona: Application Designer	Solution
The Application Designer Sam wants to create an interface where the action buttons such as to save a form, close a form. move to next or previous screen should get displayed just below the main content of the form. Also, the footer should remain static and not move along with the scroll move.	To achieve this functionality, he can drag and drop the Footer control and place the action buttons such as Save, Cancel, Next and Previous in the footer section. He can select the Properties > Footer Style as Static to keep the footer static.

Configure Footer

Navigate to Design Studio > Form Designer > Design Form > Controls > Layout > Footer. Drag and drop the footer as per your layout design requirement. You can simply drag and drop the footer on the form builder page. Click on gear icon to configure the properties for Properties and Appearance tabs. A sample screenshot is shown below:

Figure: Footer Properties Tab

Figure: Footer Appearance Tab

To know more about the fields that are available under the Appearance section, see Field Description given below.

Field Name	Description
General
Footer Style	Select the footer style for the footer. Available options are as follows: Floater - Select it if the header has to be moved along as the page scrolls down. It is useful for the long scrolling pages with more content. Static - Select it if the header has to be remained fixed at the top of the page. It is useful for the pages with less content.
Container Background	Select Background Type, Image Upload and Color the background in this section. For more information on field details Field Description table for Appearance section of Configure Splitter.
Transparency	This option appears only if Container Background Type is selected as Image Upload. Select the transparency value from the drop-down list of available options using upwards or downwards arrows. You can also use a horizontal slider to increase or decrease the transparency value. A sample screenshot is shown below: Figure: Transparency
Container Border	Select Style, Side, Width, Color, Corner and Radius for the container in this section. For more information on field details Field Description table for Appearance section of Configure Splitter.
Container Height
Maximum Height	Select the maximum height of the container from the drop-down list of available options of height using upwards or downwards arrows. You can also use a horizontal slider to increase or decrease the height.

Was this article helpful?

What's Next

Panels

Table of contents

Layout Types