Collections

Overview

Collections define how multiple records from the same entity appear.

A collection can appear in three different shapes, called View Types:

  • List uses the display card avatar, primary, secondary and supporting text values. It is suitable for simple lists and/or small devices

  • Grid uses the display card primary image, primary and secondary texts. It is suitable for records for which the image is the primary way of identifying a record.

  • Table corresponds to a regular table, into which the first column can also show the display card.

Collection View Types

The following list view item uses the avatar image and two lines containing the primary and secondary text.

List view
View type: List

The following grid tile uses the primary image and two lines containing the primary and secondary text.

Grid view
View type: Grid

The following two-lines table row uses a set of columns including Product ID, Family, etc, plus a display card as the first column.

Table view
View type: Table with a display card column

A collection is typically composed of:

  • a Display Card used when displaying the collection as a list, a grid or for the first column of the table.

  • a list of Table Columns used when displaying the collection as a table.

Create a collection

To create a collection:

  1. Right-click the Collection node under an entity and select Add Collection…. The Create New Collection wizard opens.

  2. In the Create New Collection wizard, enter the following values:

    • Name: Internal name of the object.

    • Default Collection: Select this option if the collection should be used as the default collection for this entity.

    • Display Card: Select one of the display cards of the entity. See Display cards for more information.

  3. Click Finish to close the wizard. The Collection editor opens.

In the collection editor:

  • The Overview tab contains the collection properties.

  • The Collection tab contains:

    • A table showing the table columns of the list. You can edit the name, label and value for each column from this table.

    • A list of Attributes available. Drag these attributes into the table to create columns.

    • The toolbar shows buttons to create, organize or delete table columns.

Configure the collection

To configure the collection:

  1. In the Collection editor, select the Overview tab.

  2. Configure the properties for each view type:

    • Table

      • Allow Table: Select this option for this collection to support the table view type.

      • Line Nb.: Number of lines of each table row.

      • Display Card Column: Select this option to use the first table column to show the display card.
        Note that unlike the other column, this first column is locked at run-time and cannot be rearranged by users.

      • Display Card Column Label: Label used for the header of the display card column.

      • Display Card Column Default Width: Width of the display card column by default.

    • List

      • Allow List: Select this option for this collection to support the list view type.

      • Line Nb.: Number of lines of each list item.

      • Show Avatar: Select this option to display the avatar in the list.

      • Show Dividers: Select this option to display dividers between list items.

    • Grid

      • Allow Grid: Select this option for this collection to support the grid view type.

      • Line Nb.: Number of lines used for the text in the tiles.

      • Tile Height: Height of each tile in pixels, or the aspect ratio instead (e.g., 16:9, 4:3, 1:1).

      • Number of Columns: Number of horizontal tiles in the grid.

      • Text Position: Position of the text in the tiles.

Add columns to the collection

If the Allow Table option is selected for the collection, then it can be displayed as a table, and you can add additional columns for this view type.

A table column has a given Value, typically a SemQL expression.

To create a table column:

  1. In the Collection tab of the Collection editor, drag an attribute from the available Attributes list into the table. The new column is added to the table, with a Name and a Value equal to attribute name.
    You can also drag the Add Table Column Add Table Column button to the tree table to create a new table column with no value.

  2. In the tree table, double-click the Name cell to edit the table column name.

  3. Repeat the operation for the Label.

  4. Click the Value cell, and then click the …​ (SemQL Editor) button to edit the table column value.

You can select (by pressing Control or Command on macOS) and then drag and drop multiple attributes from the attribute list.

Configure table columns

A table column has a set of properties to configure its behavior and appearance.

The main property is the column’s Component Type. The component type is the UI component used to display the value in the table. Component types include Text, Image, Checkbox, Date Picker, etc.

You configure the column using properties common to all types (for example, the Header Color), and others are specific to the selected component type (for example, the Image Alignment).

  1. In the Collection tab of the Collection editor, select the table column to configure.

  2. In the Properties view, set the following properties:

    • Under the General section:

      • Name, Label, Description: Define the name this field and the label used on the form.

      • Visible by Default: This boolean property indicates whether this column should be displayed initially in the table, or should only be in the list of available columns.

      • Component Type: Select a component type suitable for your column datatype.
        Component types are listed and described in UI components.

      • Data Type: If your value is a SemQL expression, you can explicitly configure its datatype using this property.

    • Under the Column section:

      • Default Width: Default width of the column in pixels. Users can manually resize columns and reset them to this width.

      • Display Card: If the table column is a reference to a record, provide here the display card used to display that reference.

  3. In the Properties tab, configure the other properties.
    All properties are listed in UI components.

Common table column properties

The following properties are commonly used when designing collections:

  • Header Color, Column Alignment to style the header and align the entire column.

  • Text Color, Background Color to style the text is each cell.

  • Display Format to provide specific formatting for text values.

  • Max Width to size components.

  • Display Type to choose the appearance of the component when it supports several.

  • Source Type to tell the component the nature of the value (for example, whether it is an image binary or a link to the image).

All available properties are listed in UI components.