In this article you will learn how to create navigation menus that are automatically generated from data stored in an Excel worksheet.
Simple "One Level" Menu
Preparing the Excel worksheet
Create a single column where each row represents a scene in your experience. The first row should contain a column name. For this example, we'll use SceneName. The other rows should contain the name of each scene. Use the exact names for each scene as they appear in your experience.
These rows will be used both to name each menu entry and to target the proper scene for navigation.
Creating the menu in your Experience
In order to have the menu available on every scene, we'll place it within an Experience Layer.
Inside the Asset Grid collection, within the data feed representation, place a Toggle Button.
For the Toggle Button:
- bind the Text property to the Excel "SceneName" column in order to display the scene name
- assign an "Is checked" trigger with a "Go to scene" action that will navigate to a specified scene. Specify the scene using binding to the same "SceneName" column in the Excel worksheet
Final polishing: Select the initial scene
In order to have your initial scene selected in the menu we'll use a Global Variable. In this example, we'll name it "Starting Scene". The value of this variable is set to the name of your initial scene, the scene that will first appear when running the experience. In this example, we'll say the initial scene name is "Scene 1".
The trick here is to set a condition on the Toggle Button to ensure you check it only when the experience is first run:
- when a timer of 01. seconds has elapsed (no repeats) - i.e. when the toggle button first appears onscreen
- the scene name from the Excel data feed equals the value of the "Starting Scene" global variable
- call the "Check" action of that Toggle Button.
Adding new menu items into your experience
Let's say you're using the above approach and decide to add one or more scenes that will require new menu items. Just create a new row for each relevant scene in your Excel file using the name of that scene. That's it! The menu will be "automagically" updated and fully functional.
Enhanced "Two Level" Menu
Preparing the Excel worksheet
Here the Excel worksheet is a bit more rich as we have to deal with both a menu and a sub-menu. For this example we're going to use a part of the website menu for a very successful, well-known software company ;)
The first worksheet will contain the top level menu items. This worksheet will contain the same LabelCategory column used above in the one level menu, but it will also contain two additional columns, one for an ID (IDCategory) and another for a color code in hexadecimal (ColorCategory). Each menu item should have a unique ID and color. For this example, the worksheet itself will be named "MenuEntries".
The second worksheet - we'll call it SubmenuEntries - will contain a list of the sub-menu items. Here too we are adding an ID (IDCategory) column and a color code (ColorEntry) column in addition to the sub-menu item name (LabelEntry) column. For each sub-menu item, assign the ID listed for its parent menu item in the first worksheet. (For color, assign anything you'd like.) Finally, one additional column is added, this one for the target scene name (SceneEntry).
Creating the menu and sub-menu in your Experience
In order to have the menu and sub-menus available on every scene, we're placing them in an Experience Layer as we've done before.
Both are generated by using an Asset Grid populated by the Excel file. For the menu we'll use the data feed from the first worksheet (MenuEntries) and for the sub-menu, we'll use the second worksheet (SubmenuEntries).
Within both Asset Grids we will use Toggle Buttons in order to display each menu/sub-menu option, assigning each group of buttons to a Toggle Button Set in order to have only one menu item selected at a time. The Toggle Button Set is different for the menu and the sub-menus.
For the top-level menu's Toggle Button:
- bind the Text property to the Excel "LabelCategory" column in order to display the scene name
- assign an "Is checked" trigger with a set of associated actions that are discussed in the next section below.
For the sub-menu Toggle Button:
- bind the Text property to the Excel "LabelEntry" column in order to display the sub-menu name
- assign an "Is checked" trigger with an action that will navigate to a specified scene. Specify the scene using binding to the "SceneName" column in the Excel worksheet
Displaying the right sub-menu in the right location
In order to get the proper sub-menu entries for a menu choice, we need to filter the second worksheet.
For the "Is checked" trigger of the top-level menu Toggle Button, call the "Filter" action using the IDCategory column of the sub-menu worksheet with a filter value bound to the value of IDCategory for the checked menu item.
Next, to place the sub-menu in the right location we use the following animation sequence:
- when a menu entry is unchecked (which will occur when a different menu item is checked, as they're all in a Toggle Button Set), hide its sub-menu by moving it up (see the vertical red arrow in the screen capture below)
- when a menu entry is checked:
- filter the sub-menu according to the value of IDCategory for the checked menu button as explained above
- move the sub-menu just above the selected menu entry (see the horizontal red arrow in the screen capture below)
- move the sub-menu down to display it (see the vertical arrow farthest to the right in the screen capture below)
Useful trick: uncheck all Toggle buttons generated from a Collection
In order to have all menus and sub-menus unchecked when you enter a scene we have to call an action, but as all menu items are generated from an Excel data feed, they can't be targeted directly.
The trick is to create a Toggle Button on the side of your experience, outside of the visible scene, and make it part of the Menu Toggle Button Set. We do the same with another Toggle Button for the sub-menu Toggle Button Set.
Now we can check these two Toggle Buttons when entering a scene. The result is that all other Toggle Buttons will be unchecked.
Final polish: Change your Menu font color and size according to is "checked" status
This cool trick is only available to those with Premier or Enterprise-level Intuiface accounts because it uses the Custom Script value converter.
To make a selected Toggle Button have more visibility when checked, you may want to modify the font size and color of its text. You can achieve this with a quick and simple trick.
For font size:
- bind the font size to the checked status of the Toggle Button (hence, if you don't change anything, the font size value will be true or false)
- add a Custom Script value converter for that binding and use the following simple script. In this example we're saying that if the Toggle Button is checked then the if statement is true, so a value of 40 is returned. That 40 becomes the font size. If the button is unchecked, the font size becomes 55.
if (INPUT) 40 else 55
Use the same trick for Font color:
- bind the font color to the checked status of the Toggle Button (hence, if you don't change anything, the font color value will be true or false)
- add a Custom Script value converter for that binding and use the following simple script. Here, if the button is checked, the color black will be used. If the button is unchecked, the color will be white
if (INPUT) "#000000" else "#FFFFFF"
Adding new sub-menu items into your experience
Let's say you're using the above approach and add one or more scenes that will be sub-menu items. Just create a new row for each relevant scene in the SubmenuEntries worksheet, using the name of each relevant scene. Pick a color and an IDCategory matching the relevant top-level menu item values on the MenuEntries sheet.
That's it! The menu will be "automagically" updated and fully functional.