How to Build Data Directories in Fliplet

DDBannerNew

Directories are an easy way to display structured data sets such as contacts and glossaries. These data sets are then displayed in an intuitively designed directory layout which your users will find easy to use.

The directory layout in Fliplet allows the user to search, filter and simply scroll through the data. In Fliplet Studio, the app creator can control what information is displayed, how the directory functions and of course its branding.

Some key app types that would benefit from a directory are:

  • Internal Communications (e.g. Employee directories, policy libraries)
  • Emergency Management (e.g. Contact directories)
  • Training (e.g. Key term search)
  • Sales (e.g. Glossary or contact list)

For this example, I am going to create a simple contacts directory for my latest internal communications app. See the image above for the finished product, then follow the simple steps to create your own.

Step 1: Get your data

The directory feature relies on the data that you add into Fliplet Studio in order to work. Without the data, the directory will not work. For my example, I have created a table with the column headers set as: name, email, address, phone and about.

You can have as many columns as you need and call them whatever you like. Fliplet will automatically detect your column headers and place them as the directory headings. There are no restrictions as to what these column headers can be say.

datatableex copy

You can create the data tables directly inside Fliplet Studio but I would suggest that you use a dedicated spreadsheet programme such as Microsoft Excel or Google Sheets particularly if you are working with large amounts of data.

Once you have created your data sheet, you can then add it into Fliplet Studio. Go to: Menus & Design > Data > Add new data and add a new table.

MenuData

Click inside the content area and then copy/paste your spreadsheet data in. You will be able to copy and paste directly from Excel and Google Sheets without the formatting being affected.

When your data is in place, click ‘Save & Close’ to take you back to your app screen.

Step 2: Create your directory screen

To display the data you’ve just added in your app, you’ll need to create a new screen. Go to Add Screen and select the ‘Data Directory’ layout.

Directorysscreen

After you have have selected the data directory layout, you can start to populate your directory with the data you added in the previous step.

Step 3: Add data to your directory

Populating your directory with data couldn’t be easier. Simply go to your new directory screen and click ‘Click to configure directory’. You will then be taken into the directory’s configuration settings.

DirectInput

Now you are in the directory configuration tool, you can begin to decide where and how your directory will display your data. But first, you need the directory to know which data table to analyze. Do this by selecting a table from the drop down menu, marked ‘Select a table’ on the ‘Select data source’ tab.

As you can add multiple tables into Fliplet Studio, make sure you select the right one. Changing your table will result in any customization you make to the directory being lost.

Step 4: Customize your directory

You have data in your directory, check. Now make that data work for you and your users. In the ‘Browse options’ tab, you can decide how your data is displayed to the user. You can also change how that data is collated and searched.

Dataconfig

How do you want your information to be displayed in the main list? changes what information is displayed in the scrollable list. The items in this list should be the main identifiable information. I.e. in a contact list, the name of the contact should be displayed.

You can choose how your data in the main list will be sorted; either alphabetically by any of your column headers or in the order of which the data is displayed in the table.

Dataconfig2

How do you want to use the information in each field? lets you decide how the information in your data set is used by the directory. You can select whether the information can be searched or used as a filter by selecting the checkboxes.

You can also change how that information is interpreted by the directory. For example, in the ‘Email’ column, you will have email addresses. If you set the directory to read these as email addresses, it will automatically give them a ‘mailto:’(link to previous blog) link that will allow the user to automatically create an email when they select the address.

The directory also does this for:

  • Phone numbers
  • Web addresses
  • Images

Images can be very useful, but you don’t want your users to have to download every image in a large directory. For this reason, directories are the only feature in Fliplet where the content is not fully supported offline.

To add an image, get the image’s URL by right clicking on the image and selecting ‘Copy image URL’ and add the address into the data table in a new column. Then select then change the display option to ‘Display as an image’.

Step 5: Displaying the details

When the app user selects an item from the main list, that item’s details will be displayed, either in an overlay on a smartphone or next to the list on a tablet. You can change what is displayed here by going to ‘Detail options’.

The directory will automatically select all of the column headers for you. But if you want to customize this screen, you can add or take away the names of the headers. The order in which these items are placed is the order in which they’ll appear.

Dataconfig3

Divide your fields as such: “Company”,”Email”,”Phone”,”Address”,”About”

You can select an image to act as a thumbnail, which is particularly useful for contact lists or employee directories. To do this, Select a field to use as the thumbnail URL – this must be a field containing your list of image URLs. Once this has been selected, images will appear as a thumbnail against each list item.

Once you are happy with your directory and you want to view it on your mobile device, click ‘View your app’ and publish to Fliplet Viewer.

PhonesDirect1

Step 6: Using your directory

Using your directory couldn’t be easier. It works in the same way as the contact list in your phone. You can scroll up or down through the data. If you have a lot of data to scroll through, you can use the alphabetic list on the right to skip straight to that letter.

To get the correct information faster, use the search function located at the top of the directory. You can type in what you’re looking for and the directory will search through the whole data sheet and find the closest selections.

You can also filter the information to show you a list of items that are in the same group. For example, everyone from a certain department in the company would be filtered under departments.

Updating your directory

Updating your data requires you to go back into the data table in Fliplet Studio and make the necessary changes. To do this, go to ‘Menus & design’ and go to data. Once there, select the data table you want to edit and make your changes.

To implement the changes into your app, you will need to re-publish your app by clicking on ‘View your app’ and sending it to Fliplet Viewer.

Need help?

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