Grid

Article • 02.08.2022 • 8 minute(s) to read

Grid

Girds are special Form Controls implementing a container for other Form Controls. Grids are commonly used to show multiple Attribute of potentially also multiple Entities in columns and rows:

  • The columns represent the Attributes as Form Controls. Each column can have one or multiple Form Controls.
  • The rows represent different Entities.

Control properties

  • Grid title - Caption rendered above the Grid thus identifying it to the Users.

  • Help text - Explanation of the Grid shown below the Grid title.

  • Require at least one record? - Specifies if the Grid can be empty (No) or must have at least one record (Yes). The Actions Save and Sign and Save enforce this condition, while Dismiss and Sign Actions do not enforce it. If set to Yes, it does not matter if the record is entered by the User in the current session or did already exist in the Variable backing this Grid. An asterisk next to the title indicates to the Users, that this property is set to Yes and at least one record is required.

  • Disable grid? - Makes the Grid and all Form Controls in it editable (No) or read-only (Yes). Be aware that the content of disabled Form Controls in the Grid is not stored by Save and Sign and Save Actions.

  • Disable delete? - When set to No, all entries in the Grid can be deleted. If set to Yes, only new entries entered by the User in the current session can be deleted but already existing entries cannot not be deleted.

  • Disable add? - When set to Yes, Add is hidden and no new entries can be created. Hence, the interactions are only possible with existing entries. When set to No, Add is shown and new entries can be created.

  • Disable paging? - When set to No, the Grid is automatically paginated with a page size of ten. When set to Yes, no pagination is done.

  • Hide control? - Hides (Yes) or shows (No) the Grid with all its Form Control. Be aware that the content of hidden Form Controls in the Grid is stored by Save and Sign and Save Actions.

  • Condition type - Allows you to hide or disable the Grid with all its Form Control based on a Form Control Expression evaluating to true or false:

    • Display - Hides the Grid and all its Form Controls when the Form Control Expression evaluates to false and shows them when the Form Control Expression evaluates to true. Be aware that the content of hidden Form Controls in the Grid is stored by Save and Sign and Save Actions.
    • Disable - Makes the Grid and all its Form Controls editable when the Form Control Expression evaluates to false and makes them read-only when the Form Control Expression evaluates to true. Be aware that the content of the Grid is not stored by Save and Sign and Save Actions when it is disabled.
    • Display condition or Disable condition - The Form Control Expression behind the condition
  • Load child entities? - Grids are often used to represent data that follows a one-to-many relationship. In such a case, the Variables backing the From on which the Grid is on, is set to the Entity representing the parent (i.e., the “one” in the one-to-many relationship) and the Grid represents the children (i.e., the “many” in the one-to-many relationship). When Load child entities? is set to Yes, the Grid offers additional settings to correctly handle the one-to-many relationship:

    • Unique identifier - Unique name of the Grid used to identify it in Form Control Expressions.
    • Child entity type - The Entity Type of the children, i.e., the Entity Type of the “many” in the one-to-many relationship. The Entity Type of the parent does not require to be set here, since it is already set in the From Activity’s Variable type setting.
    • Parent attribute referenced by child - The Attribute of the parent Entity, i.e., the Attribute of the “one” in the one-to-may relationship, that is referenced by the children.
    • Child attribute referencing parent - Attribute of the child Entities holding the reference to the parent.
  • Filters - If no filters are specified, all rows in the Grid are shown in the From. If one or more filters are configured, only rows with a column matching a filter are shown. A new filter is added by pressing Add filter and specifying the two settings:

    • Column - Name of the column this filter is applied on.
    • Value - Form Control Expression with the filter condition. When the Form Control Expression evaluates to true, the row is shown; when the Form Control Expression evaluates to false, the row is not shown.

    allows you to delete any configured filters again.

  • Columns - Here you define the Grid’s columns and what Attributes are backing these columns:

    • Add column - Adds a single column so that you can manually configure it further.
    • - This button opens the Add from data option. By clicking on Add from data a dialog opens to create multiple columns based on an Entity Type:
    • All columns, no matter if created manually or based on an Entity Type, can be adapted further:
      • - Deletes the column
      • The Dropdown lets you select the type of the column.
      • - Opens the settings of the column. The columns have all settings of the corresponding Form Control. E.g., a text column has all settings of a Text Form Control. Furthermore, columns have additional layout parameters not available for Form Controls outside a Grid:
        • Column name - Caption of the column in the Grid. This caption is not used to identify the column in Form Control Expression. Instead, the column is identified by its Id / Name in Form Control Expression, similar to any other Form Control.
        • Column width (in %) - Sets the width of the column in percent. If set to zero, the width is automatically calculated.
        • Column min width (in px) - Sets the minimum with of the column in pixels. If set to zero, no minimal with is enforced.
      • - Change the order of the columns.
  • Conditional formatting - The conditional formatting allows you to define rules changing the appearance of cells and rows in the Grid. The formatting is applied to the cell and not the Form Control placed in the cell. This is important as input Form Controls overwrite the formatting of the cell and therefore the following logic applies:

    • The Background color is visible in regions of the cell where it is not hidden by the input Form Control. Hence, the Background color is typically seen as a frame around the input Form Control in the center of the cell. Foreground color, Font size, Font weight or Font style will not affect the appearance of input Form Controls. Input Form Controls are Text, Dropdown, Text Area, Number, Password, Checkbox, Switch, Button, Lookup, Explorer Select, Date time and File.
    • Non-input Form Controls are formatted by all options Background color, Foreground color, Font size, Font weight and Font style. Non-Input Form Controls are Expressions, Read Onlys and the Data Viewer.
    • Hyperlinks are working like Non-input Form Controls with the exception that the Foreground color is used to indicate the click status.
    • Images are also Non-input Form Controls but only have a Background color. Hence, they behave like input Form Controls.

    By pressing Add cond. formatting, a new conditional formatting is created. You can modify the conditional formatting with the following controls:

    • - Delete the conditional formatting
    • Preview - Shows how the conditional formatting will look like
    • - Configures the conditional formatting with the following properties:
      • Preview - Shows how the conditional formatting will look like
      • What should be formatted? - Configures if the conditional formatting is applied only one cell or to the whole row.
      • Column name - Selects the column this conditional formatting is based on.
      • Condition - When this Form Control Expression evaluates to true, the conditional formatting is applied. The conditions are formulated with column names and not with cell names. Hence, examples for valid conditions are $[AColumn]=='MyProduct', $[OtherColumn] < 5 or $[FirstColumn] < $[SecondColumn].
      • Format - By pressing Add format a new formatting instruction can be added to the conditional formatting:
        • Option - Select what should be formatted
        • Value - The actual format that should be applied. Depending on the selected Option, different values are valid:
          • Option set to Background color - The color can be entered by its JavaScript name, e.g., Yellow, or by and hex RBG value like #ffff00.
          • Option set to Foreground color - The color can be entered by its JavaScript name, e.g., Yellow, or by and hex RBG value like #ffff00.
          • Option set to Font size - The size of the font can be specified in pixels (e.g., 15px), in percent of the parent elements size (e.g., 80%) or with the JavaScript em unit (e.g., 0.4em).
          • Option set to Font weight - The font weight can be set numerically (100, 200, 300, 400, 500, 600 or 700) or by its JavaScript names (normal, bold, bolder, lighter, initial, inherit).
          • Option set to Font style - The style of the font can be set to normal, italic, oblique, initial or inherit.
        • - Deletes the formatting instruction
In this article