Columns

Introduction

The Columns element in Joget is a flexible layout tool that lets you create responsive form designs. You can customize column widths for different devices, including Laptop/PC, Tablet, and Mobile.

The previous Form Column component is still available and can be used as before.

How does it work?

To see how the Columns component works, follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as an admin and open the App Composer for your desired app.
3. Open a form in the Form Builder.
4. Drag and drop the Columns component from the component palette onto the form. Adjust the number of columns as needed.
5. Drag and drop form elements into the columns.
   
6. Customize each column’s properties, such as width, style, and content alignment. You can set different widths for different devices to create a responsive layout.
7. Click Apply Changes and save the form.
8. Click Preview to see how the columns appear on different devices, and adjust them if needed.
   

Using the Columns component helps you create flexible, responsive layouts that improve readability and user experience across devices.

Configure Columns

To configure the Columns component, drag and drop the Columns element into a Section in the Form Builder. Click the Columns element to open and edit its properties.

When the component is selected, the following properties are available:

• ID: A custom ID assigned to the Columns component for unique identification.
• Column Width: Defines the column width for Laptop/PC view.
• Column Width (Tablet): Defines the column width for Tablet view.
• Column Width (Mobile): Defines the column width for Mobile view.
• Add: Adds more columns to the layout.
• Stacks Columns In Mobile View: When enabled, columns will stack vertically in Mobile view.
• Gutter: Defines the spacing between columns to provide a cleaner and more structured layout.

Advanced options

Advanced options for the Columns element provide additional settings to customize its functionality and behavior further. These settings include data management, UI customization, workflow integration, and number formatting to ensure the Text Field meets specific requirements and enhances the user experience.

UI

UI settings for the Columns element help configure read-only display options.

Configure the following fields:

• Write Permission: Blank by default.
  • Readonly: A new field mode that makes fields non-interactable by the user, but their value can be saved into the database.
  • Disabled: Makes the field non-interactable by the user, and its value cannot be saved in the database.

Section

Advanced options

The advanced options provide settings for visibility, permissions, display, and development.

Display

Display settings control how a section appears to the user. You can choose whether a section is always expanded, collapsed by default, or expanded by default. Each section can have its own display configuration.
If a section contains mandatory fields, a mandatory indicator (*) is shown next to the section title to let users know that the section must be completed.

• Section collapsible behavior: This setting controls the default display state of the section. Available options are:
• Always visible (cannot be collapsed): The section is always expanded when the app opens. Users cannot collapse or expand this section.
• Collapsible (expanded by default): The section is expanded when the app opens. Users can collapse or expand the section as needed.
• Collapsible (collapsed by default):The section is collapsed when the app opens. Users can expand or collapse the section as needed.

If there are no labels for the section user cannot expand or collapse the section. The user can only see the option Always visible (cannot be collapsed).