Add relations to the UI

The relation element allows you to list records from Data Entities that are linked to a parent entity through a one-or-more cardinality. Tables defined in the Main Flow are automatically converted into relations when the screen is opened in the Workflow UI Designer.

For instance, your Data Domain may include a Loan Applicant entity which is referenced by a Co-Debtors entity via a one-or-more cardinality (i.e., a loan applicant can have multiple co-debtors). By using a relation element, you can display all co-debtors associated with a specific loan applicant.

IMPORTANT!  
Any attributes you want to display in a relation must be exposed in the screen’s context data (see Screen Exposed Data).

To add a relation element to the user interface:

  1. In the Workflow UI Designer's left panel, from the Data Templates section, select the Relation template and drag it in the desired position in the working area. For more details, see Adding UI elements to the user interface.
  2. While the relation field is selected, fill in its properties in the right panel.
    PropertyDescription
    Select the RelationChoose the relation you want to display.
    Table NameDefine an internal identifier for the relation.
    Table TitleSet the display label for the relation. You can add translations for each platform language, by clicking the Translations button.
    Edit ModeMakes the relation editable either inline or via subflow.
    • Cell - allows users to edit relation's records within the table's cells.
    • Sub Flow - allows users to edit relation's records via a dedicated subflow (see Subflows).
    No Title

    Hides the relation title.

    No HeaderHides the relation header.
    No FilterHides filtering/search functionality.
    No InsertDisables the Insert button.
    No DeleteDisables the Delete button.
    Additional CSS classes

    Add the names of the classes you wish to attach to the relation's HTML element (e.g.: a styling class defined in one of the Style Sheets applied to the workflow).

    NOTE  
    Press Space or Enter after typing a class name to confirm it.
    Configured Columns

    Click Edit to define which attributes appear in the relation table:

    • Attribute - The name of the attribute.
    • Header Text - The column label.
    • Width - The column width.
    • Alignment - Text alignment within the cell (left, right, center).
    • Allow Edit - Enables inline editing for the column.
  3. Click Apply changes to save the relation's properties.
  4. Click Save and reload to save the screen.

To modify a relation field, select it in the main area and edit its properties from the right panel.

To move or delete a relation, see Moving and deleting UI elements.