How to Build Interactive lists in Fliplet

Interactive lists allow you to display a structured list of content to the user, with each item able to be linked to other pieces of content such as other screens, documents and videos. Interactive lists are a key component of the user experience in apps built with Fliplet.

In this post, you will learn how to:

Interactive lists are an ideal way to create:

  • Menus
  • Agendas
  • Contact lists

Every app that you make with Fliplet will benefit from using an interactive list. They improve the user experience and allow you to quickly and easily link users to the correct material.

For this example, I am going to use an interactive list to create an agenda.

Step 1: Create your list

Interactive lists can be placed within any content area in a screen, allowing you to use them in any layout apart from ‘Data directory’.

To create your list, click on ‘Click to edit content’ on your screen. Then select where you’d like your list to begin in the content area and click on ‘List’ at the top of the editor.

Lost3

You will need to pick which layout you’d like to use. Don’t worry, if you don’t like it, you can change it at any time in the future. For this example, I am going to use ‘Simple list’.

Now that you’ve selected the layout of your list, you can begin adding your list items. The ‘simple list’ layout allows you to have a title and a description. For my agenda, I want my session titles to be at the top and their time to be below.

Here is how I’ve structured the data:

List2

To add another item, simply click ‘Add new item’. You can add as many items as you like to your list. Once you are happy with the items you’ve added, make sure you click ‘Save’ to close the window.

Step 2: Adding links to your list

An interactive list isn’t very interactive without links. Adding a link is a way of placing more detailed information behind a list item. For example, you may want to put session information and documents behind some of the agenda items.

Each item within a list can be linked to a separate piece of content. The linking options are:

  • Display another screen – Take the user to another screen in the app
  • Go back to the previous screen – Takes the user to the screen they visited last
  • Go to a webpage – Can open a webpage or be used to add weblinks such are ‘mailto:’
  • Open an overlay – an overlay is a screen that opens on top of the current screen. Useful for displaying small amounts of content that need to be accessed quickly.
  • Open an image in full screen (pinch to zoom) – Upload a high resolution image and allow your user to zoom in. Particularly useful for floorplans in events apps.
  • Open a document – Embed a document behind your list. You can upload all major document file types
  • Open a video – Automatically plays a video in full screen when the user selects the menu item.
  • Open a popup box – Opens a popup box. These are usually used as warnings or alerts.

To add a link to a list item first click on ‘Click to edit content’ and then open the list plugin. Now you can select which list item you’d like to add a link to. Once you’ve opened the correct list item, click ‘Add link’ and select from the dropdown menu (see options above).

For this example, I am going to add an overlay to this list item. That means, when the user selects the agenda item, an overlay will open over the top of the list.

List5

After selecting ‘open an overlay’, you can set the title of the overlay, change its size and edit the content. An overlay can contain all the information and interactive features that a normal screen can contain, making them an effective way to quickly display useful information to the user.

An alternative to using an overlay is to use ‘Display another screen’, this will take the user away from the list. Use this to move the user away from the current list screen. You’d use this option when creating a ‘main menu’ or similar menu style list.

Another regularly used link is ‘Open a webpage’, which is a very versatile link to use. It can be use to, as you’d expect, take the user to a webpage. Add the link’s destination by clicking on ‘Edit link’ and adding the web address.

It can also be used to initiate native commands on the mobile device such as email, text and calling. You can do this by adding these into the web address box when editing your link:

  • mailto:[add email address]
  • tel:[add phone number]
  • sms:[add phone number]

Step 3: Changing the list layout

You can change the list’s layout without losing your information at any point. You have six choices of layouts:

  1. Simple list – List items appear as text only
  2. Small thumbnails – Add an small image or color block to your list item. Ideal for adding icons to your list
  3. Large thumbnails – Add an large image or color block to your list item. Use this for contact lists or for adding more detailed descriptions.
  4. Slider (Small thumbnails) – List items will appear as small thumbnails. These thumbnails will slide across the screen horizontally.
  5. Slider (Medium thumbnails) – List items will appear as large thumbnails. These thumbnails will slide across the screen horizontally.
  6. Slider (Large thumbnails & text)

List6

Step 4: Swipe to save

You can now add a ‘Swipe to save’ feature whereby the user can slide the list item to the right to save it into their own custom list. The custom list can be accessed by tapping on ‘My List’ at the top of the list.

Swipe to save is particularly useful for event agendas and content lists so that the user can create a list of the sessions they are most interested in or articles they want to read later.

You can enable swipe to save by going back into the list editor and selecting ‘Swipe to save’ on the left hand side. Here, you can click on the ‘Enable Swipe to Save’ check box to enable the feature. You can also edit the name of the unique list the user will create after saving their own list items.

Step 5: Explore the feature

The interactive list is one of the most versatile features that Fliplet offers. It can be used in a number of different ways and combinations to create the functionality that you desire. Experiment with the different options find out what works for you and your users.

Need help?

If you have any questions, please feel free to get in contact. You can reach us by Live Chat or via email: Support@fliplet.com