Item List Widget Template

The 'Item List' widget template allows you to design a user interface to display a list of items efficiently. It supports handling a large number of items by incrementally loading them as you scroll. Each item can include a title, subtitle, status.

This article explains designing a user interface with the Item List widget template.

Note: Before you go ahead, ensure you have a basic understanding of creating folders and databases in Lucy.

Here are step-by-step instructions for designing a user interface using the Item List widget Template.

On the Lucy app homepage, go to the My Work tab on the left.
A list of existing folders will appear. To open a folder, choose the one you need and click on it.
Click on the User Interfaces tab and click the Plus icon.
Select the Start from Scratch option.
A list of pre-built widget templates will display.
Click on the Item List template and click Edit this Template to start customising the template.
This will open the selected template on the widget designer page.
Enter a name and a description.
1. Click the General tab on the right.
2. In the Name field, type in a unique descriptive name.
3. In the Description field, enter a brief description.
Select and bind a data source to the widget.
1. Click on the 'Data source is required' notification panel appearing at the bottom.
2. Click the Bind a source button on the right.
3. You can either select an existing Lucy action or a database as the data source.
4. To select a database.
  1. Go to the Databases tab. Search and click on the desired database.
  2. Click Select this Source and you will see a preview of your data.
  3. Filter Data: To filter data based on the conditions set.
  4. Aggregate Data: Used to summarise data to reveal meaningful patterns and trends, such as calculating the sum, count, average, minimum, and maximum.
  5. Use the Filter data and Aggregate data options as necessary to prepare your data.
  6. Once you are satisfied with the final outcome, click Looks Good.
Set parameters to the widget.
1. Click the 'Fields are required' notification panel that displays. Then, you'll be redirected to the Item List section on the properties panel on the right.
2. Map fields to the corresponding columns/values in the selected database.
  1. Profile Image: If you have a profile image in the database, click the Profile Image field and select the required value from the pop-up list.
  2. Profile Name: If you don't have a profile image in the database, the default value will be used.
  3. Title: Click the Title field and choose the required value from the pop-up list.
  4. Subtitle: Click the Subtitle field and choose the required value from the pop-up list.
  5. Date: Click the Date field and choose the required value from the pop-up list.
  6. Status Field: Click the Status field and choose the required value from the pop-up list.
Represent different Statuses using colours in the widget.
1. Go to Status section on the properties panel.
2. Add a new status and map a colour.
  1. Click the plus icon. Then, a new status will appear in the status list.
  2. Rename the status (e.g., New) and select a colour.
3. Rename and customise the rest of the statuses as necessary.
Add a Title to the widget.
1. Click the title section of the widget and the properties panel will open on the right.
2. Go to the Title section.
3. In the text field, type in a appropriate title.
Customise the widget as necessary, e.g., changing colours, font size, adding buttons etc.
Click the Preview button at the top to view your design.
Once you are satisfied with the customisation, click Save Widget.

PreviousSelecting a Widget Template NextViewing Your User Interfaces

Last updated 2 months ago

Designing a User Interface with the Item List Widget Template

Here are step-by-step instructions for designing a user interface using the Item List widget Template.

On the Lucy app homepage, go to the My Work tab on the left.

A list of existing folders will appear. To open a folder, choose the one you need and click on it.

Click on the User Interfaces tab and click the Plus icon.

Select the Start from Scratch option.

A list of pre-built widget templates will display.

Click on the Item List template and click Edit this Template to start customising the template.

This will open the selected template on the widget designer page.

Enter a name and a description.

Click the General tab on the right.
In the Name field, type in a unique descriptive name.
In the Description field, enter a brief description.

Select and bind a data source to the widget.

Click on the 'Data source is required' notification panel appearing at the bottom.
Click the Bind a source button on the right.
You can either select an existing Lucy action or a database as the data source.
To select a database.
1. Go to the Databases tab. Search and click on the desired database.
2. Click Select this Source and you will see a preview of your data.
3. Filter Data: To filter data based on the conditions set.
4. Aggregate Data: Used to summarise data to reveal meaningful patterns and trends, such as calculating the sum, count, average, minimum, and maximum.
5. Use the Filter data and Aggregate data options as necessary to prepare your data.
6. Once you are satisfied with the final outcome, click Looks Good.

Set parameters to the widget.

Click the 'Fields are required' notification panel that displays. Then, you'll be redirected to the Item List section on the properties panel on the right.
Map fields to the corresponding columns/values in the selected database.
1. Profile Image: If you have a profile image in the database, click the Profile Image field and select the required value from the pop-up list.
2. Profile Name: If you don't have a profile image in the database, the default value will be used.
3. Title: Click the Title field and choose the required value from the pop-up list.
4. Subtitle: Click the Subtitle field and choose the required value from the pop-up list.
5. Date: Click the Date field and choose the required value from the pop-up list.
6. Status Field: Click the Status field and choose the required value from the pop-up list.

Represent different Statuses using colours in the widget.

Go to Status section on the properties panel.
Add a new status and map a colour.
1. Click the plus icon. Then, a new status will appear in the status list.
2. Rename the status (e.g., New) and select a colour.
Rename and customise the rest of the statuses as necessary.

Add a Title to the widget.

Click the title section of the widget and the properties panel will open on the right.
Go to the Title section.
In the text field, type in a appropriate title.

Customise the widget as necessary, e.g., changing colours, font size, adding buttons etc.

Click the Preview button at the top to view your design.

Once you are satisfied with the customisation, click Save Widget.