Introduction

Sometimes you may wish to implement one of the following scenarios

• Display a list of items and, with selection of one particular item, display a specific media file
  
  • For example, display a list of brochures. When a brochure is selected, the associated PDF is opened on screen.
• Display a list of items and, with selection of one particular item, display one or more optional media files
  
  • For example, display a list of photographs. When a photograph is selected, any or all of associated images, videos, and PDFs are opened on screen.

In this article, we will explain how to realize these scenarios. The solution is to connect a data feed to a summary list with detail view. With this approach, a data feed is displayed as follows:

• a list of all items in the data feed, each with minimal detail - i.e. the summary
• a detailed view when the user selects a specific item in the list

This approach can be used with any type of data feed: Excel, Headless CMS, REST APIs such as Airtable or any other CMS, or any data source accessible via a Custom Interface Asset.

In the example below, we'll go from a basic example to a more complex / complete one.

Basic example: Single media file available for each list item

In this example, we will present a list of brochures using an Asset Grid collection. When the user clicks on an item in the list, it will open the associated PDF. 

For better performance, instead of loading each multi-page brochure into the master list - overkill when we only need a thumbnail of the cover - we will display an image associated with each PDF document as a thumbnail. 

The link between this image thumbnail and the corresponding brochure is made in the Excel file. See the structure below. 

If you need a refresher, see our article about how to reference files in an Excel file. 

Detailed instructions are in the video below. 

Advanced example: Multiple, optional media files available for each list item

Let's now assume we want to present a catalog of items that have multiple types of media files associated with them. An item could be represented by

• a PDF document
• a video
• a website

Within the template used in the Master view, three buttons will enable the user to open the associated media. 

To address the possibilities that not all items may have the three media types available, we will add fields in the database to specify if a media option is available or not. These three columns will be used as boolean values: TRUE or FALSE. The visibility of buttons will be bound to these values to decide if the button should be visible or not. Below is the updated Excel file structure. 

Detailed instructions are in the video below. 

Alternative solution for external databases

As explained in the video above, if you cannot modify the structure of the data feed to add true/false values, you can use a Value Converter to transform the media path into a true/false value. 

In our experience, the most efficient converter is the following Custom Script

INPUT.length > 0

This is a short version of "if the INPUT exists and is a string with at least 1 character, then return true, else return false". 

Note that this converter must be added to a property bound to the supposed path to the media file. If this path is empty, then the visibility will be "false" and the associated asset will be hidden. 

Example below: Binding on the PDF path

With the custom script converter: 

Video explanation - Creating a pop-up

You will also find in the Quarterly Q&A Live - Summer Edition 2022 video, a detailed example of how to create pop-ups that could be used with the scenarios provided in this article.