Skip to main content

Layout components

Layout components are used to define the structure and visual organization of the form. Unlike data components, layout components do not store any data within the application. However, they can still access form data and context through scripting, such as hiding a section based on a field’s value. These components play a vital role in determining how the form is displayed to the user and how the various elements are arranged on the screen.

Containers​

Containers define sections of the user interface and are used to group other components. Examples include the 12-column layout, in-place editing components, and panels. The In-Place layout component is a special type used for inline form editing.

Layout​

The 12-column layout is a flexible grid system that allows developers to create responsive designs by dividing the form into columns. This layout is commonly used to organize form elements and ensure proper alignment across different screen sizes.

Node​

The Node section controls high-level behavior that impacts the overall form layout.

  • Enable Sticky Header: When enabled, the header of the form remains fixed at the top of the screen while the user scrolls through the content. This is useful for lengthy forms where access to the header is important throughout the user's interaction.

Wrapper​

The Wrapper section applies global styling and behavior to a group of components within the layout. It helps create sections or containers within the form for better visual organization.

  • Border: When checked, a visible border will be drawn around the wrapper. This is helpful for visually separating sections of a form.
  • Background: Enables the use of background colors or images for the wrapper. The background helps in visually differentiating sections or improving the overall appearance of the form.
  • Page Layout: Activates global page-level layout configurations, typically for controlling the margins, padding, or alignment of the content within the wrapper.
  • Enable Internal Paddings: Adds internal padding (spacing) inside the wrapper. This ensures that there is space between the contents of the wrapper and its boundaries, which is crucial for preventing elements from appearing cramped.
  • Grid CSS Class: A custom field to apply a specific CSS class that defines grid-related behavior. This allows developers to control the wrapper’s layout based on a predefined grid structure (for example, Bootstrap or custom grid systems).

Columns​

The Columns section controls how the layout handles its internal grid system. A typical layout component can include multiple columns, and each column can be customized individually.

Each column in the grid system can have the following attributes:

  1. Width: Defines how many columns the element spans within a 12-column grid system. This property is important for responsive layouts and helps control how much horizontal space a component will occupy on the screen. For example, setting the width to 6 means the element will take half the width of the container (6/12).
  2. Offset: This property shifts the position of the column by the specified number of columns. For example, an offset of 2 will add 2 empty columns before the column begins, effectively moving it to the right.
  3. Fixed Width: When enabled, this locks the column’s width regardless of the screen size or responsive behavior. This is useful when you want to maintain exact dimensions for certain components.
  4. Flexible: When checked, the column will dynamically adjust its width based on the screen size. This allows the column to resize as the viewport changes, providing a fluid, responsive experience.
  5. Separator: Adds a visible separator (often a line or border) between adjacent columns. This can be useful for visually distinguishing sections or components that are placed next to each other in the same row.
  6. Right Align: Aligns the contents of the column to the right edge of the column. This can be useful for positioning buttons or text fields in a right-aligned layout.
  7. Hidden: Hides the column from the layout. This can be controlled dynamically (e.g., based on conditions or screen size) to create more interactive or responsive layouts.
  8. Optional CSS Class: A field to enter a custom CSS class for the column. This allows developers to apply additional styling or behavior via custom CSS. For example, adding a class that applies specific styles when the form is displayed on a mobile device.

Use the "+" button to add more columns to the layout. Each new column can be customized with the properties mentioned above to control its appearance and behavior within the grid.

Properties:​

  • Width: Defines how many columns the element spans (between 1 and 12).
  • Offset: Adds empty columns before the component, shifting it to the right.
  • Fixed Width: Locks the column to a fixed width regardless of the screen size.
  • Flexible: The column dynamically adjusts its width based on the screen size.
  • Separator: Displays a visual line between columns.
  • Right Align: Aligns content within the column to the right.
  • Hidden: Allows the component to be hidden based on conditions.
  • CSS Class: Apply custom CSS classes for further styling.

In-place​

The In-Place component allows for streamlined and minimalistic inline editing of form fields or sections. It is particularly useful when you want to display details with minimal inputs and provide a way for users to edit specific fields directly within the same screen, without redirecting to a separate edit page. The component also supports granular controls such as saving on focus loss and managing autofocus behavior.

Key Use Cases:

  1. Display Detail Screen (Without Inputs)

    • The In-Place component is often used to present a clean view of details, such as customer information or ticket details, without the clutter of input fields. Users can focus on the information at hand, while still being able to edit specific sections when necessary.

  2. Edit Specific Portions

    • Only a small portion of the form or screen is editable at any given time. For example, when users need to update one or two fields, they can do so in place without disrupting the rest of the view. This improves usability, especially in complex forms or interfaces.

  3. Edit Single Component Inline

    • The In-Place component can be used to edit individual components such as text fields or dropdowns one by one. For example, when working with a combo box (dropdown), the form is automatically saved as soon as the user selects an item, simplifying the interaction.

Properties​

  • Disable Autofocus: By default, after an inline edit mode is entered, the first form element gets focus for better user flow. Disabling this option prevents the automatic focus on the first item, allowing for more control over user interaction.
  • Save on Click Outside: If enabled, any changes made in the inline edit mode are saved even if the user clicks outside of the component (losing focus). This is useful for quick, intuitive edits where explicit "Ok" clicks are not needed to commit changes.
  • Clone Key: This allows for duplicating the current state of the form or component. It’s useful when managing complex form states where a backup or a copy is needed before changes are applied.

Splitter​

The Splitter component is used to divide form fields or sections into resizable panels, providing a clear visual separation between different areas of the form. It enhances usability by allowing users to adjust the space allocated to each section dynamically, improving form readability and overall user experience.

  1. Resizing: Users can drag the splitter handle to resize sections and allocate more or less space to different areas of the form.
  2. Horizontal or Vertical Layout: The splitter can be oriented either horizontally (dividing sections side by side) or vertically (dividing sections one above the other).

--

Cards​

Cards present information in a compact and organized manner, typically used to display details such as product information or user profiles.

These components help users navigate within the form. Examples include accordions, which allow content to be expanded or collapsed, and tabs for switching between different sections of the form.

These components are used to execute actions or navigate to different screens. They are essential for form submission, navigation, and interaction.

Content​

These components are used to add additional static content for the user, such as help text, static information, or even complex HTML-based UI elements.