Responsive List UI Component

The responsive List UI component is a built-in component in Aquro used to list data on both mobile devices and browser based apps.

When the responsive list is shown on a mobile phone, the component has the same look as a regular scrollable mobile list but when shown in a desktop browser (or any screen wider then 500px) the list will be shown as a grid view with multiple columns.

Configuring the Responsive List

Configuring the Responsive List is done by setting the following parameters for the component:

MobileRightIcon – The icon that will be shown to the far right on every list item when viewed mobile devices (leave empty for no icon)  

MobileLeftIcon – The icon that will be shown to the far left on every list item when viewed on mobile devices (leave empty for no icon)

Items – The collection whose data should be shown in the list  

Columns – A collection of list columns configured by using the AquroUIResponsiveListColumn data model

Setting up columns

Setting up columns used in the list is done by creating a collection using the AquroUIResponsiveListColumn data model. Add one row to this collection for each column of data you wish to display in the list. 

The AquroUIResponsiveListColumn data model is added to all newly created apps, if your app is missing this data model you can add this model by yourself. See more about that under the section “Creating the AquroUIResponsiveListColumn data model” below.  Each item in this collection describes how a column will work and can be configured with the following:  

Field – The name of the field on the Items collection where the data will be loaded from

Subject – Headline for this column (not visible on mobile devices)

Type – Any of the following: 

• Text: The value loaded from the collection will be presented as text
• Icon: The value loaded from the collection is suppost to be a valid icon name and will be shown as an icon
• Image: The value loaded from the collection will be handled as the URL to an image
• Link: A button will be created, the text of the button will be taken from the value loaded from the collection

Mobile – Yes or No, defines if the column is shown in the mobile list 

Key – A identifier for the column, can be used in Visual Coding to identify witch column or button that have been clicked

Configuring events

This component has the following events that can be configured with Visual Coding:

ItemClicked – When a list item is clicked

LeftIconClicked- When the left icon is clicked (only on mobile)

RightIconClicked – When the right icon is clicked (only on mobile)

ColumnClicked – When any column is clicked, the key from the clicked column is available in your Visual Coding script as EventSourceValue

LinkClicked – When a button is clicked in the list, the key from the column of the button is available in your Visual Coding Script as EventSourceValue

Customizing look and feel

This component has several different CSS classes that can be used to create the look and feel you desire for the component. To show all CSS rules for this component, please examine the source code by cloning this component. 

Creating the AquroUIResponsiveListColumn data model If your app

If the AquroUIResponsiveListColumn data model is missing from your app, you can create it manually by yourself by following these steps:

• Open the Aquro App Studio
• Click on the ADD button and choose Data model
• Enter AquroUIResponsiveListColumn as name
• Add the following columns to your new data model: Field, Subject, Type, Mobile, Key
• Save the data model