Goal of this article:

Explaining how to create a beautiful and interactive Event app using an Excel block

Use Case:

In the following example we will be showing you how to build an Event app for a 2-day event. The event will hold various sessions/talks given by a number of different speakers. The event also features different partners and sponsors.

Method:

Step 1: 

What information do I need/want to display in my app?

Collect all the information that needs to be displayed for the event.

• Speakers
• Sessions
• Partners and Sponsors

Step 2: 

Structuring the Excel document

Each of the three main elements (speakers, sessions, and partners & sponsors) will be divided into their own “sheets” in the Excel source file.

Step 3:

In our case, the structure detailed above is enough. The data will need to be added after you’ve structured the data columns as outlined above.

Example:

In order to be able to save data in the sheet and link data between sheets, each item will need to get its own ID:

Example:

• speakerId
• programId
• sponsorId

This will let you assign which Speakers will be presenting to which Sessions.

In our example you can even link multiple Speakers to one Session*, this is why we we have added multiple “speakerId” columns in the “Sessions” sheet: speakerId1 / speakerId2 / speakerId3. Name this document “MusicSheet”.

* We’ve decided in this example not to make a view available that shows which sessions a specific speaker will be given. This has the danger of creating a “never-ending loop” within the app which could ruin the User Experience.

If you’d like to create an app that features this structure, please see the table at the bottom of this document.

Step 4:

In the previous steps we’ve structured our Excel document and added data to it. In the next step we will be linking the speakers to the sessions. Essentially, we will be showing which speakers will be present at the different sessions.

We can create these links in the Excel by going to the “Sessions” sheet, finding the “speakerId1” column and filling the value of a speaker in for a session. Let’s take speaker 1.

In this case, the “speakerId” of speaker 1 is “1”. The “speakerId2” may be speaker #7 in the list. The value of “speakerId2” would then be 7. 

Screenshot from a demo Excel file

When you have multiple speakers for a session you can repeat the steps above to fill in “speakerId2” and “speakerId3”.

Because we only have three “speakerId” columns, each session has a maximum of three speakers. If you needed to add more speakers to a session you could create columns for speakerId4, speakerId5, etc.

Because we have now linked speakers to sessions, we will be able to apply a filter later in the AppMachine platform so that we can see which speakers belong to each session.

The filter is a snippet of script that can filter the entire list of data based on your criteria. For example, “date = “17/09/2015” If this filter were to be applied on a data list, only elements with the value “date” → 17/09/2015 would be shown.

BUILDING THE APP

Step 5:

We want to divide the event into its days, Day 1 and Day 2:

1. 
   First, add a Submenu block and name it “Schedule”.
2. 
   Now, add an Excel block to the app and place it under (nest it into) the “Schedule” Submenu block. Upload your Excel file and select the “Sessions” sheet. 
3. 
   Name this Excel block “Day 1”.

Screenshot of the “Add Block” wizard.

Screenshot of the ‘Excel block’.

• Repeat step 2 to create a new Excel block. Name this one “Day 2”

Screenshot of what the block tree should look like

Step 6:

Filtering the right content on Day 1.

In our “Sessions” sheet we have a “date” column which shows the two dates that the event are taking place, namely: 17-09-2015 & 18-09-2015.

Using this column we can filter the events by date.

1. Click on the “Day 1” Excel block 
2. 
   Select the “Advanced” tab and scroll down to the “Advanced” settings
3. 
   Add Filter Expression → date = "9/17/2015".

Screenshot of the screen where the filter can be applied.

Screenshot of the data source

“Date” is the column name and the value is “9/17/2015”*

* Date notation can vary depending on your country settings. Always double check the “Data” tab to see how AppMachine has interpreted the date.

Now the “Day 1” block will only show the data that have “9/17/15” set as the “date”. 

You can repeat these steps for the “Day 2” block with date = "9/18/2015".

Step 7:

Now we’ve filtered the sessions by day. 

Now we want to show the speakers that will be speaking at each session.

Add an Excel block (nested) under the “Day 1” block and select the same Excel document.

Select the “Speakers” sheet and name the block “Speakers”

Screenshot of the Speakers data structure

Overview of the configuration of the ‘Speakers’ block.

Step 8:

Filtering the right speakers for each session.

In the “Session” sheet we have:

• speakerId1
• speakerId2
• speakerId3

Each of these columns has been filled with “id” numbers that correspond to the speakers that will be speaking.

• 
  Click on the Speakers block
• 
  Go to the Advanced tab and go to the Advanced section.
• 
  Filter Expression → speakerId = "{data:speakerId1}" OR speakerId="{data:speakerId2}" OR speakerId="{data:speakerId3}"

Here we’re checking if speakerId is contained in one of the three columns. If one of these columns contains a value then we will be showing the speaker that will be present at that session.

Essentially, we filter the speakerId’s that correspond with the Sessions that they will be giving. The app will show the thus show the speakers and their corresponding information. 

Screenshot of the filter configuration for the speakers

Step 9:

In the previous steps we assembled the sessions and linked their corresponding speakers. In order to give the user an overview of all the speakers that will be attending the event, you can also create a separate Excel block that is linked to the Speakers sheet.

This Excel block can be set on the same level as the “Schedule” block.

Step 10:

The last step is adding the “Sponsors and Partners” block to the app. This can also be done by adding an Excel block. Link this Excel block to the “Partners & Sponsors” sheet.

This last Excel block should also be placed a the level of the “Schedule” block

Result:

Speakers →  Sessions || Sessions → Speakers

In this app we’ve decided to link sessions to speakers (The list of sessions will show which speakers will be there.) We have decided not to link the speakers to the sessions (Show which sessions a speaker will be given in the “Speakers” block). We did this in order to avoid the possibility of creating an endless loop.

Example:

• A speaker links to a session           
  • The session, in turn, links to the corresponding speakers
    • A speaker from that session links to other speakers

This would create a long line of links that would make the user experience less ideal.

If you did want to create this kind of linking in your app, the “Speakers” sheet would need to look like this.