What is a List from Data Source (LFD)?

A List from Data Source (we will be referring to this as an LFD through the rest of the article) is a list of items that are generated from the rows in a data source, which is similar to a spreadsheet. The list displays items in a specific template, depending on the selected layout.

This article will focus on the LFD component – we’ll discuss data sources in more detail in another article.

How to Use an LFD Component

Why use LFDs

List from Data Sources is a powerful component with many use cases. Here are a few common examples: 

  1. Directory – see this article on how to make a directory

  2. News Feed – see this article on how to make a news feed

  3. Agenda – see this article on how to make an agenda

Options of LFDs

Available options will vary based on your choice of LFD layout.

Your list data

Allows selection of data source; applies to all LFD layouts.

Create list data

Click this button to use the default data source for the selected layout which comes with some preloaded data. It gives you the option to edit the name of the data source. Once the data source is selected, the button name changes to  Edit list data (see below for more information).

Edit list data

Click this button to open the data source. You can edit or view your data here.

Use existing data

Click this button to select a pre-existing data source. Once a data source is selected, the button name changes to Change data source. This may require mapping the fields you want to be displayed or hidden in the Data view settings if the column titles are different from the sample data source. See Data View Settings below for more information.

Change data source

Click this button to select another data source from a list of data sources available to your app.

Data View Settings

These are the options common to all LFD layouts. They may vary slightly depending on the layout selected.

Summary View Fields

This is the data shown in the list view on the screen.

Text Fields

These are the fields that will display in the list. Each layout will have different options. For example in the Directory, Primary text appears on the top line in the largest font size, down to tertiary at the bottom in the smallest font size. 

Session Start/End Times (Agenda only)

These fields will display the start and end times for the event.

Field Name

Select the field from the data source that will populate text.

Image (applies to all layouts, except  Agenda)

This will display an image that will either need to link to a folder in your file manager or an external website URL.

Field Type

The type of data displayed on the screen. Choose a field type to determine how the data is displayed.
Options include: Plain text, HTML, number, date, and time.
Date and time fields are localised and will display the correct format dependent on the users’ location.

 

Summary Click Action

This is what happens when a list item is clicked.

Show the detail view

This will open a new app screen showing more data from the data source about the list item that was clicked.

Open a link

This will open an external link or new screen based on data from the data source.

Detail View Fields

This checkbox will automatically fill all the fields from the data source into the detail view.

Phone, Email, LinkedIn Icon

These icons are buttons in the detail view. Add the corresponding fields or choose “– Select a data field” if you do not want an option to display.

Data Field

These are other fields that you have several options to format.

  • Add Field – click this button to add more fields

  • Field Name – Select the field from the data source

  • Field Type – Choose a field type to affect how it displays

    • Image

    • Plain Text

    • HTML

    • URL

    • Telephone

    • Email

    • Date

  • Field Label – this will apply a label above the field

    • Column Name

    • Custom Name

    • No Label

 

Sort and filter

How do you want to sort/filter your lIst?

Click on any existing items to change the sort/filter

Add new sort condition

Click this button to add a new sorting condition for the list

Add a new filter

Click this button to add a new filter to the app. To learn more about the LFD filters, see here

Number of list items to show

Enter the number of list items you want to display on the screen.

 

List Search

Allows users to search list items

This is turned on by default. Uncheck the box if you don’t want your users to have access to list items. 

Type field name and hit enter

This allows you to add fields from the data source that you want to be searchable. 

 

List Filters

Allows users to filter the list

This is turned on by default. Uncheck the box if you don’t want users to filter the list.

Type field name and hit enter

This allows you to add fields from the data source that you want to be filterable. 

Displays filters as a full-screen overlay

This is turned off by default. Check the box if you want users to display the filter as a full-screen overlay, meaning that the Filter window will pop out of the screen.

 

Social Features

Like (not available in the Agenda and Directory layouts)

Check the box to allow users to like list items

Bookmarks

Check the box to allow users to bookmark list items. This will add a bookmark icon in the upper right for users to see only their bookmarked items.

Comments (not available in the Agenda and Directory layouts)

Check the box to allow users to comment on list items. Only users logged on to your app are allowed to post comments.

 

Entry management

Only users logged on to your app are allowed these permissions, unless all your users are allowed to edit.

Add list items (Not available in the Featured List layout)

This requires creating a form on a new screen to allow users to add a new item. Check the box to allow your users to add list items. After checking the box, these other fields appear.

  • Who can add list items?

    • Everyone (all users) can add

    • Only admins can add

  • Select a screen – select the screen where the form created for adding list items will appear

  • Add query parameters – these are an advanced feature that will be discussed in a separate article

  • Select animation – when opening the form before adding a list item, a small animation will be shown. By default, this is set to Fade but you can choose your preferred animation from the list. Set to No to remove the animation.

Edit list items

This requires creating a form on a new screen to allow users to edit an item. Check the box to allow your users to edit list items. After checking the box, these other fields appear:

  • Who can edit list items?

    • Everyone (all users) can edit

    • Users can edit their own list items

    • Only admins can edit list items

    • Users and admins can edit list items

  • Select a screen – select the screen where the form created for editing list items will appear

  • Add query parameters – these are an advanced feature that will be discussed in a separate article

  • Select animation – when opening the form before editing a list item, a small animation will be shown. By default, this is set to Fade, but you can choose your preferred animation from the list. Set to No to remove the animation.

Delete list items

Check the box to allow your users to delete list items. After checking the box, this field appears:

  • Who can delete list items?

    • Everyone (all users) can delete

    • Users can delete their own list items

    • Only admins can delete list items

    • Users and admins can delete list items

Select field where the post author’s email is stored

This field appears when users or users and admins are given the option to edit list items (see above). From the list, select the field in the data source where email addresses are stored. 

Select the data source where app users are listed 

This field appears when users or users and admins are given the option to add or edit list items (see above). From the list, select the data source with users’ email addresses.

Field to identify admins

This field appears when admins are given the option to edit list items (see above). From the list, select the field in the data source that identifies if a user is an admin or not. This requires creating a new column in the data source and tagging admin users with an X.

 

Developer options

Edit component’s code

Clicking this button opens the component code for editing. The component’s HTML, CSS, and JavaScript can be customized through this option. Developer options are discussed in more detail in another article.

 

Was this article helpful?
YesNo