Lists

Lists are read-only elements that display tables of content. A list can read data from an API or an AQL variable. To connect a list to a data source, go to the Content view of the Right Panel and select an API or AQL variable source.

You have two lists available:

• column list and
• stacked list.

Column List

The column list is available in the Containers & Other section. You can drag it to the canvas.

The column list has a header row and a row for data. You will populate this row with data, and the result will have multiple rows with data. First, you need to set the list's data source and bind data to each column.

You can add or remove columns by clicking the + / - buttons on the right side of the panel.

Adding a Data Source to the List

Adding an API as a List Data Source

You can set the data source of a list in the Right panel in the Content view. The data source can be an API or an AQL variable. The above example connects to an Placeholder API with a list of users.

NOTE: You need to set the source data in order to populate a list with data.

Bind Data to Columns

Each column has a Rich text area by default. The Rich textarea uses the Mustache templating engine. The default variable to bind data to is {{datasource}}.

You can bind data in the Right panel in the Content view. You need to set a label for the {{datasource}}. When you bind data, Better EHR Studio already previews a sample data.

When you bind an array of data to one data source, you can access each item with a dot notation, for example {{datasource.name}}.

The example above will show the ID and the name of the user.

Adding an AQL Variable as a List Data Source

A list can also read data from an AQL variable. Please, visit the Variable documentation to find out more about AQL variables.

List table settings

In the property panel you can also manipulate some additional settings of the table. These include

• Hide header - hides the header of the list
• Wrap text in body cells - some text can be very long and this forces text to wrap in a new line if it doesn't fit in a cell
• Show all borders - shows all borders of the list
• Set custom height - opens up a input field where you can set a custom height expressed in pixels
• Sticky header - sets the header to sticky when scrolling through the list (only available if you set a custom height)
• Sticky columns - you can set one or more columns to remain sticky when scrolling horizontally
• Sortable columns - define which columns (values are column indexes) should be sortable

Sort

A sort in a list refers to arranging the data in a specific order, either in ascending (ASC) or descending (DESC) order in a column. Once a list column is sortable, it will have additional arrow icons/symbols to signal to the user that the column can be sorted. When the user clicks on the icon, it will switch between the orders of which it is sorted according to the values specified and show the corresponding icon to that order.

To enable sort, select a column list element on the canvas and expand a Table section in property panel. At the bottom of the Table section it is a Sortable columns property where you can define which column is sortable. Values are numeric and indicates the column sequence in the list.

For each sort order group there are two groups (ASC and DESC) where key-value pairs for each sort order could be defined. These key-value pairs will be appended to the URL that is expected to return sorted results. URL of the datasource defined on the list is used as a base URL.

In addition to the features described above, there is also a switch next to each key-value pair that allows the user to set it as the default sort order. When the user opens the form for the first time, the default sort order will be applied to the list. This makes it easier for the user to quickly find the data they are looking for without having to manually select the sort order every time they use the table.

Sort persistence

In addition, last selected sort order can be persisted to the server and applied everytime user opens the form with a specified list. Once the user has selected a new sort order, it will become the new default sort order for future use despite whichever column is marked as default in Form builder.

To enable Sort persistence scroll to the end of Table section in property panel where you will find two dropdowns: "Persist last selected sort to:" and "Retrieve last selected sort from:". Each of them defines a datasource from/to the data is sent/received.

Define sort persistence datasource

There are a few rules to follow when defining a datasource that can be successfully used for sort persistence

• Saving: Form renderer automatically binds/replaces the value in a body of datasource with actual sort values which are then sent to the endpoint the user specified. In order to do that, form renderer needs two predefined values in the API Call body:
  • "order"
  • "column"

Keys (sortOrder and columnIndex on screenshot below) are not important and should reflect the body your backend/API accepts. An important part are the values order and columnwhich are replaced with an actual values from form renderer. The payload sent to the server for the case on image below would be: {"sortOrder": "DESC", "columnIndex": 1}

• Retrieving: There is no special rules for defining a retrieval API for sort settings. Any API Call with a method type GET will be available to choose from dropdown in property panel. There is only one additional step when choosing a datasource and that is to bind the return properties you defined in API Call to the order and column properties that form renderer can then use to apply the sort to the form.

Stacked List

Stacked list is available in the Containers & Other section. You can drag it to the canvas.

Stacked list is similar to Column list. The differences are that Stacked list has no headers and only one column.

The example shows a stacked list connected to a weight_aql variable and displays the result in one column.

Manipulating Data Inside a List

Column list and Stack list allow you to add any other type of fields to the columns. Every column also contains a Rich text area with a Mustache template engine, which allows you to create different solutions.

The following examples shows how to create a list that displays different images based on the value of the data.

TODO List with a Complete Image

The first example will show a list of TODO tasks. Each task has a 'name' and a 'completed' properties. Completed property is of type boolean; it can be either true or false.

A red icon will be displayed when a task is incomplete, and a green icon when the task is complete.

You need to connect a column list to an API with the list of tasks.

To a complete row, you will drag an HTML component. Since the HTML component interprets Mustache templating language, you can check if the data source variable has a value true or false. You can display the appropriate icon based on the data source value.

Measurements with a Status Image

The following example shows how to display different images based on the patient mood measurements. The example will show a mood icon based on the patient's mood.

Since you cannot check variable values with the Mustache engine (only true/false), you can use the Better EHR Studio's interaction dependencies. You can add an input field and bind the mood data to it, and turn off the visibility of the input.

You can now set the interactions based on the input mood value.

Based on the mood value, the form will show or hide mood images.

Many other interface solutions are possible using lists, generic inputs, and the Mustache templating engine.