Introduction

This article will explain how to associate multiple media files such as images to items listed in an Excel data feed. Each item could have a different number of images.

For example: a list of products where each product has a variable number of associated media files used to represent that product in a data sheet or gallery.

This article will refer to "images" but the mechanism described below can be replicated for videos and documents as well.

How it works

We are going to use:

• 1 Excel workbook with 2 sheets:
  • Sheet 1 contains the list of products
  • Sheet 2 contains the list of images
• Excel filtering mechanism
• theory behind relational databases, used in a very simple way

For our example we will reuse the Excel file used in this webinar and adapt it to present a list of artists, each artist having one or more pictures associated with him / her.

This is our Artist list:

And this is the Pictures list:

Note how we are using the "Artist" name as the primary key, a database term meaning the "Artist" value will act as a link between the two sheets in our Excel workbook as we apply filters.

Let's create two collections in our Intuiface experience:

• The first contains the Artist data feed and will let the user select an artist. We are using a vertical Asset Grid here with Toggle buttons.
  • The toggle button belongs to a toggle button set which will limit selection to a single artist.
• The second contains pictures associated with the selected artist. In the beginning, it contains all pictures for all artists since no filter is applied yet. You can hide this collection and show it when an artist button is selected.

Now we need to create a trigger / action pairing that will filter the pictures based on the selected artist. Add this to the toggle button used as a template for the artists data feed:

• WHEN toggle button is checked
• THEN Photo List -> add filter
  • the column we use is the Artist column from the Photo list sheet
  • the operator is Equals
  • as we want this column value to be equal to the Artist button we just checked, we should bind this parameter to the Artist column of the Artists sheet
  • make sure the "Clear column filter" option is selected to remove any previous filters applied to the Artists column
    

And voilà! Only those images associated with the selected artist are displayed in the picture gallery.

Sample

You can download the sample described above by clicking this link.