Skip to content

Column View#

columnViewIcon

Overview#

The Column View widget allows you to easily represent a column view with editable leaves. In this widget settings, you can configure the columns to be displayed and the leaf fields that can be linked. To configure the widget that will appear in the leaves, simply drag and drop a new widget into the leaf area. Below is an example of a Column View widget with three columns.

columnViewExample

General Steps#

To use the Column View widget in a UI Page, follow the steps below:

  1. In any UI Page in Build mode, select the Column View from the widgets list located on the left side of the page; drag and drop to the desired place in the UI Page.
  2. Enter the Settings section of the widget through the three vertical dots.
  3. In the General tab, provide a name and a description for the widget. Use the toggle buttons to specify whether the widget should be visible, display the header, or allow full screen mode. Additionally, determine if the widget can be opened as an image in a new tab or exported as an image.

columnGeneral

Widget Customization#

  1. Optionally, in the Style tab, you can define a Border Width and Color.

    columnSetup

  2. In the Setup tab, you can specify the following properties:

    • Allow Multi-Selection - When set to true, this option allows you to select multiple rows.
    • Keep Path When Data Changes - Retains the selected path even when the data changes.
    • Add and Delete Leafs - Enables the option to add and delete leaves.
    • Show Footer - Displays the footer section.
    • Auto Select Mode - You can choose between No Selection, Focus, or Select mode. When adding a new leaf, it sets the selection mode to the chosen input. Focus will move the cursor to the input, while Select will move the cursor and select all the content in the input. This is only available if Auto Select Mode is not set to No Selection.

    columnSetup

  3. In the Columns tab, configure the details and entries you desire.

    column columns tab

  4. In the Leaf Fields tab, define the details you require.

    column leaf fields

  5. Optionally, define the Links between this widget and other elements of the UI Page.

    column links

  6. Select Save and Close to complete the widget configuration.