Custom display types in overviews
By default, data sets in overviews are always displayed in a data grid. However, the Listeneinstellungen ((1) in the image below) can also be used to configure other layouts for display.
The user is offered already configured display types for selection (2), provided that the list settings have been zugewiesen accordingly.
Any number of displays can be configured via the Custom display types tab. With the help of the '+ Add new custom list display type' button (A in image below), new layouts can be created.
Explanation of the fields and functions:
(A) + Add new custom list display type: Adds a new display type.
(B) Active: Indicates whether the display type is active or inactive. Inactive layouts are not available to the user for selection.
(C) Default: Marks a display type as the default. In this case it will be displayed directly to the user when opening the overview.
(D) Name: The name of the layout type. This is used to identify the layout and is not displayed to the user
(E) Type: The layout type specifies how the basic layout of the display type should be designed. The following types are distinguished:
List – Returns a list of records and thus provides only list templates (I).
Groups – Returns the records categorized into groups. An additional field for selecting the grouping field is displayed
(F) Icon: This is displayed visibly for the user to select (a preview is also displayed on the left of the line).
(G) Label/Hint: A hint or caption which is displayed to the user as a tooltip for the layout selection.
(H) Opens the designer of the layout (Form designer). This button is activated only after the list settings have already been saved with the created layout.
(I) Provides layout templates (e.g. tiles), depending on the selected layout type (E). After selecting a template, the editing mode is started immediately.
(J) Deletes the display type.
Tip: By drag & dropping the symbol at the beginning of the line, the display types can be reordered accordingly. The order of this list also corresponds to the order of the selection options for the user.
Designing the layout
With the help of the editor (button H in the image above) the layout and the fields of the records can be configured.
Depending on which layout type (E) has been selected, the basic layout of the form with certain data fields is already displayed. These data fields naturally correspond to the data record structure of the overview. For example, the 'items' field contains all the entry tuples of the overview. A logic for displaying a message 'No items' is also already present.
►NOTE◄ The overview may be freely designed in all respects, but it should be noted that often many elements are displayed and the layout of the entries should be kept accordingly performant.
By loading a template (I), correspondingly detailed basic layouts are preloaded. In the image below, the 'List' layout type was loaded with the 'Tile' template.
In the 'Tile' template, a tile area (1) is already available in which the display of a data set can be configured.
All configured columns are available as predefined elements in the 'Projections' section (2). The data fields of these elements consequently correspond to the data fields of the corresponding columns.
To make the desired changes visible to the user, the form must be published (Ribbon: Publish)
Example: A tile layout for a shipment overview
For the example, only the four fields 'ID', 'Shipment type', 'Modification date' and 'Working state' were dragged into the tile.
An additional calculation function 'Changed: $input' has been added to the change date, which ensures that the actual date is preceded by 'Changed:'.
The font of the ID label was additionally set to 'bold' and the colors of all other labels to 'secondaryColor'.
After publication, the display type is available in the overview.
Tip: Via the 'Filter and sorting' the user can filter and sort the entries as usual. All configured columns are available.
Tile groups
If the display type 'Tile groups' is selected, an additional column can be defined for the grouping.
In addition, the sorting of the resulting groups can be defined via the sorting symbol.
Tile group sorting
By default, categories are sorted alphabetically in ascending order.
Two calculation expressions are displayed. The first expression (A) determines the sort criterion (the value to sort by), the second (B) determines how the sorting should be done.
Sort value expression (A):
This is executed for each group and gets an object as input value ($input), which contains the following fields:
group – The value of the group (value of the field according to which it was grouped, e.g. a working state).
groupName – The localized name of the group.
items – The individual records as a list
count – The number of records
The return value of the sort value expression (A) is written to a dedicated data field for comparison for the sort expression (B) (see below).
Sort expression (B):
Called to compare two groups, which are available as data fields a and b respectively, and returns a numeric value.
The following applies to the return value r :
r < 0 – a is sorted behind b
r = 0 – a and b are equivalent and are not reordered
r > 0 – a is sorted before b
The sort expression is then called for the groups until no group had to switch places (until all calls return 0).
Within the sort expression, the information of group a is accessed via data field a and the information of group b is accessed via data field b.
Both data fields contain objects that include the following fields:
group – The value of the group (value of the field according to which it was grouped, e.g. a working state).
groupName – The localized name of the group
count – The number of records
value – The value of the group calculated by sort value expression (A).
Example 1: Sort by number of entries
|
Sort value expression |
empty |
|
Sort expression |
$calc( {a.count} - {b.count} ) |
|
Meaning |
Groups with a higher number of entries are sorted to the front and groups with a lower number are sorted to the back |
Example 2: Static sequence (using the example of work status)
|
Sort value expression |
$trim( |
|
Sort expression |
$calc( {a.value} - {b.value} ) |
|
Meaning |
In the sort value expression, working states are first translated into constant numbers (the desired order). Subsequently, the sort expression is used to sort according to this value. Tip: In this way, unlisted statuses are automatically sorted to the end of the list. |
Example of a tile group layout for shipments with 'working state' group field
For the example, only the 'ID', 'Shipment type', 'Shipment date' and 'Working state' fields were dragged into the tile.
The font color for all label elements was set to 'secondaryColor' and additionally the ID element was set to 'bold'.
Special feature: The user who last edited the program should be displayed as an image in the upper right corner of the tile.
For this purpose, the 'avatarURL' user field has been added to the 'Last modifier' column via a subselect projection in the 'Additional projections' tab.
This field is then not available via a separate column, but can be accessed in the record tuple of the shipment.
Thus the data field of the avatar element (image/icon) equals 'avatarURL'.
After publishing, the display type is available in the overview.
Layout types data structure
Abhängig vom eingestellten Layout Typ werden die Maskendaten entsprechend vorbereitet.
Input data 'List' layout type
A client object with the following data fields:
items – The record tuples of the overview as a list
count – The number of record tuples
Input data 'Groups' layout type
A list containing one client object per group.
The data fields of a group object are:
group – The value of the group field
groupName – The value of the group field as a string (possibly localized value e.g. for dynamic enumerations).
items – Contains the record tuples of the group
count – Contains the total number of record tuples in the group (regardless of paging).
Free layout
In contrast to the tile layouts, the configurator can freely design the layout. So no predefined tile is used, but a completely empty form is available.
An object is passed as form data, which contains the following data fields:
items – The record tuples of the overview as a list
count – The number of record tuples
Tip: A 'repeating element' with the data field 'items' can therefore directly represent all overview records.
Make entries selectable for the overview
Within an overview layout editor, for element containers that are repeatable (direct child of a repeating element container), a new option is shown in the Common property section:
The 'Is list item' option specifies that this container represents a record from the overview.
This enables the selection of an item for this container. The item data of the container are interpreted as data context data and should therefore be compatible with the tuples from the overview.
This makes the full scope of the ribbon accessible and controllable even for free layouts.
Additionally, the CSS class 'selected' is set to the elements of all selected entries, which can be used to stylistically fine-tune the free overview.
►CAUTION◄ The configurator is responsible for the accuracy of this setting. No plausibility checks are undertaken, nor is the configurator prevented from configuring multiple or incorrect selectable list items.
Useful CSS classes for designing overviews
|
Class name |
Effect |
|
pro-customlist-tile |
Represents an element container as a tile |
|
pro-customlist-tile-layout |
Element container, which contains ungrouped tiles |
|
pro-customlist-tilegroups-container |
Element container, which contains groups |
|
pro-customlist-tilegroup |
Class for the container of a group |
|
pro-customlist-tilegroup-head |
Describes the head of a group. No effect in the default |
|
pro-customlist-tilegroup-items |
Class for the container containing group entries (scroll area) |