Data grid

A table that is possible to edit directly in the ongoing workflow.

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

• Source Choose a source or leave it empty.

• Columns Click on edit to add or modify columns in the grid. Read more about the configuration of columns below.

• 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 A variable RowState will appear when this checkbox is checked, 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 - not possible to select any row

  • Single selection - only possible to select one row

  • Multi selection - one or more rows can be selected

  • Single auto accept selection - automatically move forward (to the next user step) on single select. Auto forward is only possible if there, in the user step, are no input controls after the grid. Only available in new generation of clients.

  The grid is by default set to No selection. The calendar grid and grid in CE client are out of scope.

  Selected rows are fetched in a Scrip Step (or Assignment Step) after the grid User Step using the variable IsSelected. The target variable from the script step is then used as the source when the selected data is to be used.

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

• Row Height:

  Use to set the row heights for the rows in the grid; small, medium and, large. The default setting is medium. Only available for new generation clients.

• Condition To Hide

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

• Item Style

  Use a case statement to decide what color 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 plus RGB code or use the color HEX code. There is also a fixed color pallet available: GREEN, RED, YELLOW, BLUE and PURPLE.

• 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 in the Source in one click, Remove All Columns will remove them all. Use + or - 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 is not possible to remove.

Edit 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 (for CE client Clip and Fit are available):

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

    • Clip - Clip means that the text is clipped according to size setting. No word wrap. Uses an ellipsis function to indicate the omission of text.

    • Fit - Fit means that the column width is fitted to the largest value displayed in the column - up to approx. 85% of grid width. Fit overrides the Size setting. Uses an ellipsis function to indicate the omission of text.

  • Size: Decide what width of the column. Sizes: Small, medium, large.

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

• Text Column Enter a title of the column and a variable name, for example, First name as the title and firstName as the variable name. Choose a value type, which represents the type of data that the column should hold. Decide the appearance of the column if the data should be editable, hidden and/or mandatory.

  • 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 Enter a title of the column and a variable name, for example, First name as the title and firstName as the variable name. Choose a value type, which represents the type of data that the column should hold. Decide the appearance of the column if the data should be editable, hidden and/or mandatory.

  • 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 Enter a title of the column and a variable name, as in the below example Food as the title and food as the variable name, check Include in Output to include the variable in the target variable of the grid.

  • 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 Enter a title of the column and a variable name, for example, sum as the title and sumValue as the variable name. 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 Enter a title of the column and a variable name, for example, Invoice as the title and invoice as the variable name. Decide if the checkbox should be check by default or not.

  • 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.