List Page

List pages are a data structure consisting of an ordered list of one or more pages, where data can quickly be sorted or searched using keywords.

Create a List Page automatically.

Right-click on the “Pages” folder of the Project Explorer panel, select “add list page,” and complete the fields. To navigate to the newly created list page, double-click on it from the list of pages in the panel. The default list page will already have a title and an “execute command” behaviour to allow users to create new entries. In this example, since the “type” account was selected while making the list page, users will add new accounts to the list page by creating a new entry.

Create a List Page Manually

Deepen your skills by exploring behind the scenes. Instead of relying on pages automatically generated by the platform, explore how to build them from scratch. Through this process, develop expertise, allowing anyone to create pages with unique design and functionality, going beyond established conventions.

Start by creating a custom page. To do so, right-click on the “pages” folder and select “add custom page.” Then, complete the fields and click on “create”. To open the page, double-click on it from the list of pages in the Project Explorer panel.

Option 1: drag and drop an aggregate to create a list.

Open “page designer” to apply changes to the page content. A placeholder will be there, which can be deleted by selecting it and using a keyboard's “delete” key. Next, drag and drop an aggregate and select the “list” component.

Then, add a box with a text field to create the page header and drag and drop the “account creation command” as a toolbar button in the header. To only get the icon, remove the “label” under the attribute tab of the button. All that would be left to do is add some padding, Borders, background colour and so on to get a replica of the default list page.

Option 2: generate a list from the Toolbox Components

Open “page designer” to apply changes to the page content and the Toolbox panel for easy access to components.

Drag a “list” component from the toolbox to the page content. Then, from the behaviour tab, add a “set component data” behaviour and select “account” as the type. For example, a criterion could be added to limit the data to VIP accounts only.

Note that the list cannot display data until columns are set. Until then, when a cursor moves over the page, a shadow indicates the presence of a list but without any data displayed. To select columns to display, click on the gear icon.

Then, apply a small border of the colour gray300 to the list component, with a small radius.

From that point on, add a box with a text field to create the page header. Set the box's background colour to “themeLighterAtl,” change the text value to “Accounts List,” and add 12px padding on all sides of the header’s main box. Next, change the Min Height of that box to 44px and center align its content.

To add the + button to the page header, drag and drop the account creation command as a toolbar button in the header. Align it to the right. Remove the “label” from the attribute tab of the button to only display an icon. And finally, select the header’s text field and change the alignment to centered.

To see the full-sized result, press F2 on a keyboard.

How to customize lists for the end-user’s needs.

Change the displayed columns for a specific user VS for all users.

To add or remove columns, go under the gear icon of the list page. Note that changes made while live will only be applied to the user currently logged in. To apply a change across all users, leave Live Mode turned off. In the demonstration below, the field “industry was added while Live Mode was turned on, so the column is no longer visible when Live Mode is turned back off.

Change which fields are searchable.

To apply changes to searchable fields, go under the gear icon of the list page. Fields of type “simple text” and “number” fields are the only ones with the option to be searchable. A toggle switch to their right lets you turn the option on or off.

In some cases, a field might need to be searchable, but the column of that field might not necessarily need to be displayed in the list. In the example below, the field “city” is used to demonstrate this scenario. As shown, search results will provide accounts with the city of the inquiry even with the field not displayed.

Note that users can see which field is searchable in the search bar when nothing has been typed.

Any changes made to searchable fields while Live only apply to the user logged in, not all users.

Make changes to the order of the columns displayed and set a column to classifies the list’s data.

By default, the order of the columns will be the same as the order in which they were added. To reorganize them, drag and drop the column’s title to the corresponding area.

Note that by clicking on a column’s title, the list automatically sorts the data alphabetically. For example, by clicking on the “isVIP” column title, accounts will sort themselves according to whether they are VIPs or not.