Data grid

The data grid control displays data in a table format. Depending on the configuration, selecting, editing, adding, and removing rows is possible.

  • Prompt The label to be displayed above the data grid.

  • Source Choose a data source or leave it empty.

  • Columns Click "Edit" to add or modify columns in the grid. Read more about the configuration of columns here.

  • Allow Add Check this box if it should be possible to add new rows to the data grid.

  • Allow Delete Check this box if it should be possible to delete rows from the data grid.

  • Use Change Tracking When this checkbox is checked, a variable called RowState will appear. This variable can have four different states:

    • Unchanged - when the row in the data grid is unchanged

    • Changed - when the user has changed something on the row in the data grid

    • Added - When the user has added a new row (when the row is new)

    • Removed - When the user has removed the row

    Use the variable RowState to handle new, modify and delete in scripts.

    Example:

    If @RowState = 'Changed'
    Begin
    Update OrderLines
    Set Qty = @Qty
    Where OrderNo = @OrderNo and OrderRowId = @OrderRowId
    End;
    If @RowState = 'Removed'
    Begin
    Delete from OrderLines
    Where OrderNo = @OrderNo and OrderRowId = @OrderRowId
    End;
  • Row Selection Mode Enables the possibility to select one or multiple rows:

    • No selection - it is not possible to select any row.

    • Single selection - only one row can be selected.

    • Multi selection - one or more rows can be selected.

    • Single auto accept selection - automatically proceeds to the next user step upon single selection. Auto-forwarding is only possible if there are no input controls after the grid in the user step.

    The grid is by default set to "No selection". Selected rows are retrieved in a Script Step (or Assignment Step) after the grid User Step using the variable "IsSelected". The target variable from the script step is then utilized as the source when the selected data is needed.

  • Target Variable The name of the new variable in which the data is stored as a table.

  • Row Height:

    Use this setting to specify the row heights for the rows in the grid: small, medium, and large. The default setting is medium.

  • Item Style Utilize a case statement to determine the color that the columns should have. Example:

    {case
        when Id = '1' then '#15A9E1'
        when Id = '2' then RGB(146,147,149)
        when Id = ‘3' then 'YELLOW'
        else '' 
    end}

    Colors: Set the color using the FlowScript RGB function followed by the RGB code or use a HEX code for the color. Additionally, you can use predefined colors from the fixed color palette: GREEN, RED, YELLOW, BLUE, and PURPLE.

  • Condition To Hide

    Specify the condition that must be fulfilled for the control to be hidden. If left unspecified, the control will remain visible in the user step. Note that when controls are hidden, empty variables will be generated unless default values or pre-defined data exist.

  • Reloading behavior

    The control behavior at reloading, see User step reloading.

Columns

Click "EDIT" to configure the columns in the grid.

The "Add All Columns" button will add all columns from the source in one click, while "Remove All Columns" will remove them all. You can use the "+" or "-" buttons respectively to add or remove a single column.

In a calendar grid, a mandatory date column is always added by default. This column is not affected by the "Add/Remove All" functionality and cannot be removed.

Columns settings:

  • All Columns The following settings are available for all column types:

    • Title: Enter a title for the column.

    • Size Mode: Size mode can be set to Break, Clip or Fit:

      • Break - Break works like word wrap, where the column width is defined by the Size setting, and the text continues on multiple rows to a maximum height of 85% of the maximum grid height. It uses an ellipsis function to indicate the omission of text.

      • Clip - Clip means that the text is clipped according to the size setting with no word wrap. It uses an ellipsis function to indicate the omission of text.

      • Fit - Fit means that the column width is adjusted to fit the largest value displayed in the column, up to approximately 85% of the grid width. Fit overrides the Size setting and uses an ellipsis function to indicate the omission of text

    • Size: Choose the width of the column. Sizes available: Small, Medium, Large.

    • Cell Color: Use a case statement to set cell color based on a condition, see Item Style above.

    • Reloading

      The column behavior at reloading, see User step reloading.

  • Text Columns

    • Hidden: Check the box if the column should be hidden and not shown to the user.

    • Editable: Check the box if the column should be editable for the user.

    • Default Value: Enter a default value.

    • Editable For New Rows: Check the box if the column only should be editable when adding new rows.

  • Numeric Column

    • Format String: Numeric format strings are used to format common numeric types. Using the C modifier in the format string area converts the numeric input into local currency. Also, the hashtag symbol (#) represents one number in the total numeric value, so one can format the 6-digit value 123456 with inputs in the following way: First two numbers: ## Second two numbers ## Last three Numbers ## Result: First two numbers 12 Second two numbers 34 Last three numbers 56 Read more about formatting here

    • Hidden: Check the box if the column should be hidden and not shown to the user.

    • Editable: Check the box if the column should be editable for the user.

    • Default Value: Enter a default value.

    • Editable For New Rows: Check the box if the column only should be editable when adding new rows.

  • Value List Column

    • Table Expression: Connect a table to the value list, the result of the below example will be based on what the user has selected in the catalogue value list.

    • Row Text: Enter the variable that represents the value that should be shown in the value list.

    • Key Expression: Enter a variable here (for example an id) and use Output Key Only to just get the one variable instead of a record.

    • Output Key Only: Check this to get a variable with the Key Expression.

    • Editable For New Rows: Check the box if the column only should be editable when adding new rows.

  • Computed Column The computed column can for example be used as a summary column. If the grid has one column with a price and one with a discount, then the columns can be summarized in the computed column. Do the calculation ({price - discount}) of the variables price and discount in the template field and choose what value type the column should have.

    • Value Template:

    • Hidden: Check the box if the column should be hidden and not shown to the user.

  • Checkbox Column Editable: Check the box if the column should be editable for the user.

    • Default Value: Enter a default value.

    • Editable For New Rows: Check the box if the column only should be editable when adding new rows.

Last updated