Dynamic Grid Component

A Property ID is the unique field ID used by Unqork to track and link components in your module.

The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls.

Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation.

Assign components one-word labels to help organize, identify, and group the components in your application.

Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panel components. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag.

Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component.

For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag.

Save your Field Tags by pressing Enter (Return) or adding a comma after each entry.

Select this tab to display the component's Display, Data, Actions, and Validation settings panels, as applicable.

Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. settings of the component.

You must enable module-level RBAC to access component-level RBAC. In the Module Settings tab, set the Customize RBAC for this Module toggle to ON.

Some permissions affect only the data in the Express View grid, not the entire component. For example, applying the Obfuscate permission obfuscates the grid's data, not the entire grid. Some permissions also can't override component-level settings. For example, enabling Write permissions can't override column-level Editable settings.

Select this tab to display the component's Notes area. You can use notes to keep your teammates informed.

The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component.

Click this button to undo any unsaved configuration changes and return to the Module Builder canvas.

The heading of the grid. The end-user sees this title at the top of the grid in Express View.

It's best practice to always include a title. To hide the title in Express View, set the Hide Title toggle to  (ON).

A short hint that displays when an end-user positions their cursor over the (Tooltip) icon. Tooltips can display across more than one line.

The tooltip displays next to the title.

A quick tip describing the expected inputs or how to use the grid. The Helper Text displays below the Dynamic Grid component's title in Express View.

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Select how to set the maximum height of the grid. The options are:

• Define Fixed Height by Unit: Define the grid height in pixels.

• Define Height by Number of Records: Specify the number of records to show before enabling scrolling.

• Auto Height: The grid height scales to show all records.

Set the height of your grid. The unit depends on your Grid Height setting selection.

• Define Fixed Height by Unit: Enter the grid height in pixels. Grid height must be between 93 and 20,211 pixels. By default, the grid height is set to 600 pixels.

• Define Height by Number of Records: Enter the number of records to show before enabling scrolling. Grid height must be between 1 and 480 records. By default, the grid height is set to 15 records.

Shows or hides the component from view. Setting the Hide Field toggle to  (ON) hides the component in Express View. Setting the toggle to (OFF) shows the component. The component is always visible in the Module Builder.

By default, the Hide Field toggle is set to (OFF).

Setting the Hide Title toggle to ON stops the title from displaying in Express View. The title still displays in the Module Builder.

By default, the Hide Title toggle is set to OFF.

When set to ON, you can customize the appearance of the default Add Row button shown in Express View.

By default, the Customize 'Add Row' Button toggle is set to OFF.

The Button's Label Text tells your end-user what the button does before they click it. This text shows in the button itself.

By default, the Button Label Text is Add Row.

Sets the visual appearance of the Button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button's look and feel; there's no effect on the Button's function.

Enter a Custom CSS Class to apply to the Add Row button. When you update the CSS styling, it applies to all elements that reference this custom class name.

Enter a label for the column's header in Express View. For the Button column type, the Header Label also acts as the button label.

Enter a Property ID to associate with the column's data. This Property ID is functionally similar to a component's Property ID. For example, you can reference a column's Property ID to target that column in logic-based configurations. When inline editing is enabled, values entered in the column in Express View store under this Property ID (key) in the submission data.

Property IDs use camel case (stylized as camelCase) without spaces or punctuation. You can use the same column Property IDs between different Dynamic Grid components. For instance, you can have columnA and columnB in 2 different Dynamic Grid components without affecting functionality.

The Property ID field is required.

When importing data from another source, the Property ID must match the key under which the column's data is stored in the data source.

Select a column type. This selection restricts the type of data your end-user can input, or the type of interaction they can have. The column type options are:

• Text Field

• Number

• Checkbox

• Single-select Dropdown

• Multi-select Dropdown

• Button

• Date

A column type is required and you can only select one type option per column.

When importing data from another source, the column type must match the type of data stored under that column in the data source. For example, using a Number column type for numeric data.

Each column type has its own unique column type configuration window. See the Column Type Configuration Windows section for details on each column type's configuration window.

When selected, end-users can edit cells in this column in Express View. Use this setting to enable inline editing and data entry.

Select the Editable checkbox in the column header to set all columns of the grid as editable. Or, use the Editable checkbox in each row to selectively set that column of the grid as editable.

Row group cells are only editable if the original row group column is made editable. The grouped parent row, however, is not editable.

When selected, values entered in this column in Express View store to the database.

Select the Store Data checkbox in the column header to set all columns of the grid to store to the database. Or, use the Store Data checkbox in each row to selectively store data from that column of the grid.

You must store all data to the database to use server-side execution.

When selected, the column is hidden from view in Express View.

Select the Hidden checkbox in the column header to set all columns of the grid as hidden. Or, select the Hidden checkbox in each row to selectively set that column of the grid as hidden.

Shows in the actions column in each row of the Column Setup table.

When clicked, the selected row's column type-specific configuration window opens.

Manually set the width for individual columns. When set to OFF, a column's minimum-width autosizes to 20 units. An autosized column's width then grows in proportion to the contents of the column. For example, a column titled Age is 20 units (minimum-width) + 3 units (1 unit per letter character) = 23 units. Default is OFF.

Opens the Set column widths configuration panel.

When set to ON, displays the Define width by units table with the following columns:

• Header Label: The name of the column defined in Header Label under Column Setup.

• Units: The width of the column in units. A unit is the size of a single character (letter, number, or symbol). Unit value range is between 0 and 1000, default is 10. Set a column's width to 0 units to autosize only that column.

If there are no columns, the Define width by units table does not display.

Click to create a new row group. Click + Group By Another Column to create additional row groupings.

To delete a row group, click the X button found at the right of the Sort Order drop-down.

The top-to-bottom order of row groups determines nesting. To rearrange row groups, click and drag a row group's (Grip) icon.

Select a column to group rows by. The column must exist in the Column Setup table to show in the drop-down list.

The column list reflects the Header Labels assigned in the Column Setup table.

Select a sort order for your row grouping. The drop-down options are:

• Unsorted: Rows under each group remain unsorted.
• Ascending: Rows under each group sort in ascending (A-Z) order.
• Descending: Rows under each group sort in descending (Z-A) order.

The options include:

• Single Column: Row groups show under a single column. By default, the column's header is Group. The Group header replaces the header of the column that the rows are grouped by.

• Consolidated: Row groups show under the next column header. Each group displays directly above that column's data.

• Multi-Column: Each row group shows in individual columns with unique headers. The header matches the header of the original column.

Visible when Organize Row Groups Into is set to Single Column or Multi-Column.

When selected, the row-grouped value shows in each row of the row grouping. So, when expanding a row grouping, each row in the grouping still shows the value shared between each row.

When not selected, the cell is blank. The shared value only displays in the top-level grouping.

Click + Add Trigger to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs.

Select an action to watch for in order to fire the triggers. All 3 trigger types fire only when an end-user action happens on the grid. So, if a logic component adds a row, the triggers don't fire. Instead, if an end-user clicks the Add Row button, the triggers fire.

The drop-down's options are:

• Row is Added: Fires the trigger when a new row is added to the table.

• Row is Deleted: Fires the trigger when any row in the table is deleted.

• Table/Row is Edited: Fires the trigger when any row in the table is edited.

When set to ON, your end-user can group all data-based column types. This excludes the Button column type. Row grouping automatically groups data based on shared values and can be nested many times.

In the case of a Checkbox column type, the end-user sees checkbox values as text. For instance, end-users might see Checked (true) and Unchecked (false). This feature makes it easier when grouping and sifting through large amounts of data.

By default, this toggle is set to OFF.

When set to ON, your end-user can perform aggregation and pivoting functions. When enabled, the Pivot Mode toggle shows in the Side Panel.

Aggregation lets your end-user apply pre-defined functions to values. In order to see aggregated values, a row group must be applied or the Pivot Mode toggle must be set to ON.

The available aggregation actions vary by column type. For example:

• Text Field: Count, First, Last.

• Number: Avg, Sum, Min, Max, Count, First, Last.

• Date: Count, First, Last, Min, Max.

• Checkbox: Count, First, Last.

• Single-select Dropdown: Count, First, Last.

• Multi-select Dropdown: Count, First, Last.

• Button: Not supported.

Pivoting allows data to be extrapolated across another axis (Y-axis). Your end-user can pivot all data-based column types. This excludes the Button column type. To use Pivot Mode, the Pivot Mode toggle in the grid's Side Panel must be set to ON. Enabling Pivot Mode temporarily hides tabular data, similar to creating a new Pivot Table instance in Excel.

For best results, also enable the Allow User to Group Rows setting when enabling the Allow User to Aggregate & Pivot Across All Columns setting. By default, Allow User to Group Rows is set to OFF.

When set to ON, end-users can sort column values. Clicking a column's header in the grid sorts the column's values in ascending order. Clicking the column's header again sorts the column's values in descending order. Clicking the column's header again removes the sort order.

When sorted in ascending order, an  (Upwards Arrow) icon shows in the column's header. When sorted in descending order, a  (Downwards Arrow) icon shows in the column's header.

By default, this toggle is set to OFF.

When set to ON, end-users can sort by multiple columns at the same time. Press and hold the Shift key when selecting additional column headers. Press and hold the Shift key when clicking a header to change the sort order.

By default, this toggle is set to OFF.

When set to ON, end-users can filter column values. Each column header in the grid shows a (Hamburger) icon. When clicked, a column-specific Filter menu opens.

The available filtering actions vary by column type. For example:

• Text Field: Supports filtering by the available values in that column.
• Number: Equals, Not equal, Less than, Less than or equals, Greater than, Greater than or equals, and In range. Also supports joining filters using the AND and OR radio buttons.
• Date: Equals, Greater than, Less than, Not equal, In range. Also supports joining filters using the AND and OR radio buttons.
• Checkbox: Unchecked (false), Checked (true), or Empty (undefined or null).
• Single-select Dropdown: Supports filtering by the available values in that column.
• Multi-select Dropdown: Supports filtering by the available values in that column.

• Button: Not supported.

By default, this toggle is set to OFF.

When selected, a Filter panel shows in the Side Panel. From the Side Panel, your end-user can apply column-specific filters.

The available filtering actions vary by column type.

By default, the Show Filter Panel checkbox is not selected.

When set to ON, end-users can rearrange rows in the grid.

If you enable row filtering, grouping, sorting, or aggregation and pivoting, the end-user cannot rearrange grid rows. Reordering rows in Express View affects the order in which rows store in the submission data, as well.

By default, this toggle is set to OFF.

When set to ON, the end-user must enter at least one valid row in the grid before navigating ahead or saving the module. Set the toggle to OFF when an entry is optional.

This setting respects column-level validation. If the end-user enters one row in the grid, but the row doesn't meet all column-level validations, the component-level validation criteria isn't met.

By default, the Require Minimum Valid Rows toggle is set to OFF.

Sets the minimum number of allowed rows in the grid.

An error message that displays when the grid doesn't meet the minimum number of rows set.

Sets the maximum number of allowed rows in the grid.