List View

Last update: Edit

1 Introduction

A list view shows a list of objects. For example, you can display a list of all profiles:

Each object is shown using a template. This template is defined by placing widgets inside the list view’s drop-zone. The list of objects shown is determined by a data source.

2 Properties

An example of list view properties is represented in the image below:

List view properties consist of the following sections:

2.1 Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

2.2. Data Source Section

The data source determines which objects will be shown in a list view. For general information on data sources, see Data Sources.

2.2.1 Type

The list view supports the following types of data sources:

The database and XPath sources retrieve objects from the database and supports searching and sorting.

2.3 Design Properties Section

The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.

2.4 General Section

2.4.1 Editable

If this property is set to Yes, items in the list view can be edited. The changes made to list view items can be saved with a Save button and reverted with a Cancel button. On click and Page size properties are not displayed to avoid confusion about what changes are saved or reverted.

2.4.2 On Click

An on-click event defines what action is performed when a user clicks a list view row. For more information on on-click events, see On Click Event.

2.4.3 Page Size

the number of rows displayed on the page; after the indicated limit is reached, the Load more… button is displayed on the page.

2.4.4 Scroll Direction

This property determines whether the list view lays out its items vertically (default) or horizontally.

2.4.5 Number of Columns

With this property you can change the number of items that will be shown next to each other in one row. If you set the scroll direction property to horizontal, this property determines the number of items per column.

2.4.6 Pull Down Action

The pull down action defines what action is performed when you drag downwards on a list view. Its common behavior is to update the contents of the list view by synchronizing data.

2.5 Templates Section

If the entity that is connected to the list view has specializations, you can optionally specify templates for each specialization. For each row in the list view the most specific template is shown. The different templates can be selected by clicking the extra header that appears when a specialization template is added.

2.6 Visibility Section

Visibility determines whether a widget is displayed to the end-user as part of the page.

For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.

3 Performing Specific Actions

To perform actions on a list view, select it on a page and right-click it. The list of possible actions opens. While some actions from this list, such as Select data source, Edit condition for visible, are a quick way to set the properties, the following actions are specific actions that you can perform:

  • Go to entity – opens a domain model and highlights an an entity that is used as the data source
  • Go to data source **microflow **– this action is only displayed when a microflow is set as the data source and opens this microflow
  • Go to data source nanoflow – this action is only displayed when a nanoflow is set as the data source and opens this nanoflow

4 Read More