Start a conversation

List Components

What are the List Components?

A list allows you to present information following a certain order. There are several list components in Fliplet, each ideal for a particular purpose. For example, a list with small thumbnails is suitable for building a directory of your contacts. 

There are several list components that you can use in your apps, namely:

  • List without images - List of items without any attached images arranged horizontally on the screen

  • List with small thumbnails - List of items with small thumbnail images arranged horizontally on the screen

  • List with large thumbnails - List of items with large thumbnail images arranged horizontally on the screen

  • List using panels - List of items presented vertically, with each panel containing a large image or a color with text below

  • List from a data source - List of items, available in several different styles, that connect to a data source - often a spreadsheet - to allow you to populate data. This component is discussed in more detail in a separate article and video.

  • Grid - List of items presented as panels that may be of different sizes. This component is discussed in more detail in a separate article and video.

  • Slider - List of items presented in a slider. The slider is similar to the gallery but does not have the interactive features of the latter, including the gallery’s ability to be maximized. This component is discussed in more detail in a separate article and video. 

How to Use the List Components

Why Use the List Components

Lists are a great way to highlight content in your app, and can also be used for various other app features. For example, the large thumbnail list component is often used in home pages and indexes linking users to other areas of your app. The panel can be used to set up a Contacts page. Other use cases include:

  • Directories

  • Agendas

  • News Feeds

  • Event speaker and attendee listings

Options of the List Components

When adding a list component, an example will be shown on the screen. You must begin by clicking the Add new item / Add new panel button on the List Items tab to the right.

List Items

The options below may vary between different list types.

Add List Item (without image, small & large thumbnails); 

Add New Panel (for panels)

Allows adding of new item/panel to the list. For more information, see Select File. 

Drag item to reorder

Allows dragging the item to the desired position on the list

Title

Name of the item. This is displayed with the item in the list. 

Description

Description of the item. This is displayed with the item in the list. 

Link action

This is what will happen when a list item is clicked. By default, this is set to None. For more on the options of a link action, see this article.

Image area color (small & large thumbnails); Panel color (panels)

Allows setting the image area/panel to a simple color for the list item

Swipe to Save

These options are only for the List (no images), List (small thumbnails), and List (large thumbnails).

Swipe to Save

Enable to let your users swipe on any list item for saving/bookmarking for later.

Saved List Name

The name of the saved list.

Related Articles

Configure Links

Grids

List from Data Source (LFD) Component

Sliders

Using the File Manager

Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Brett Johnson

  2. Posted
  3. Updated

Comments