Overview

The Layout is a versatile tool designed to efficiently organize and distinguish content on the screen while maximizing space utilization. It includes features like a section divider for visually separating segments, enhancing clarity and flow. Additionally, it supports two-column and three-column layouts, allowing users to arrange content side by side or in three distinct sections. This functionality is ideal for comparisons, feature highlights, or grouping related information.

You can easily add content by clicking the addition icon (+) within any cell and populating it with text, images, or other elements. This ensures a clean, structured, and visually appealing presentation, improving both usability and aesthetics.

Component Groups can also be used within Layouts to group multiple components together under a single visibility condition. This simplifies configuration and ensures consistency, especially when multiple related components need to appear or hide based on the same rule.

There are three options in the Layout Component:

1. Component Group

   • Bulk apply visibility condition to multiple components.

2. Divider

   • Creates a clear visual separation between sections of content.

   • Enhances readability and organization by segmenting the page.

3. ​Two Columns

   • Splits the layout into two equal parts for side-by-side content placement.

   • Perfect for displaying comparisons, pairing images with descriptions, or presenting related elements.

4. ​Three Columns

   • Divide the layout into three equal sections for multi-element displays.

   • Useful for showcasing lists, features, or grouping related details in a single row.

This component enables a structured and user-friendly interface while maintaining a professional and visually appealing design.

​

Component Group

The Component Group is a layout option available within screen nodes in Guided Workflows. It allows you to group multiple components and apply a single visibility condition to the entire group. When a visibility condition is applied to the group, it is applied to all components within the group, reducing the need to set conditions individually. If visibility conditions are defined at the group level and at the individual component level, then the final visibility of an individual component is determined using “AND” logic. Component Groups help streamline configuration and ensure consistency across related components.

​

​

​

• Visibility Conditions: It is a rule or set of rules that determines whether a specific element, field, or component is visible to users in an application or interface. These conditions are typically based on factors such as field values or contextual data. Visibility conditions ensure that users only see relevant information, improving usability and security. 

  • Example  

    • Condition: Display a "Priority Escalation" section if the "Ticket Priority" is set to "High."

    • Implementation: Visibility Condition: Ticket_Priority == 'High' 

    • Result: The "Priority Escalation" section appears only for high-priority tickets. 

​

Divider

The Divider is a UI component used in forms or interfaces to visually separate sections or elements. It provides a horizontal or vertical line that creates a clear distinction between content areas, enhancing readability and organization.

​​

​

Example of Visibility Condition for a Divider 

1. Based on User Role: 

   • A divider is visible only if the user is an "Admin." 

   • Example: In a dashboard, a divider separates "Admin Tools" from other sections, but it only appears for users with the "Admin" role. 

2. Based on Data Value: 

   • A divider is shown only if the "Order Status" is set to "Pending." 

   • Example: On an order summary page, a divider separates the "Pending Actions" section from completed tasks, but it only shows when there are pending orders. 

​

Two-Columns

The Two-columns layout is a design configuration that divides the form or UI into two vertical sections, often used for balancing content while maintaining simplicity. It helps to efficiently present fields or components in a side-by-side layout, improving form readability and flow. 

​​

​

• Gap: This refers to the distance or spacing between two or more columns, rows, or elements. It is a way to control the visual separation between components for better organization, readability, and aesthetics. 

• Example of Visibility Condition for Two Column:

  • Based on User Type:

    • The two-column layout is visible only if the user type is "Premium."

    • Example: In a subscription settings screen, a two-column layout displays "Advanced Preferences" and "Billing Info" side by side, but only for users with a "Premium" subscription.

​

Three Columns 

The Three Columns layout is a design configuration in forms or interfaces that splits the available space into three equal or proportionate vertical sections. It helps to present the multiple input fields or content items side-by-side, maximizing screen space and reducing vertical scrolling.

​

​

• Example of Visibility Condition for a Three-Column Layout

  • Based on Product Category:

    • The three-column layout is shown only if the selected product category is "Electronics."

    • Example: On a product configuration page, a three-column layout separates "Technical Specs," "Warranty Information," and "Available Accessories," but it appears only when the chosen category is "Electronics."

​

Customization Options For Two Columns and Three Columns

• Width Adjustment: Columns can have equal or custom widths based on the content. 

• Content Alignment: Align fields or components within columns (left, center, right).