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:
-
Directory – see this article on how to make a directory
-
News Feed – see this article on how to make a news feed
-
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. |
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.
|
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.
|
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:
|
Delete list items |
Check the box to allow your users to delete list items. After checking the box, this field appears:
|
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. |
Related Articles