How to Create a Dynamic Menu using Excel

Introduction

Completion Time: 30 minutes

Description:
This guide walks you through creating a dynamic menu content in Wallboard using Table Widgets and an Excel spreadsheet. The menu will display different categories—Drinks, Burgers, and Sides—with real-time updates from the spreadsheet. Changes in the Excel sheet, such as price updates, availability changes, and new items, will automatically reflect in the content.

Widgets Used

1. Table Widgets: Using multiple table widgets to show menu items by category.
2. Text Widget: Labels each category section as Drinks, Burgers, and Sides.
3. Image Widgets: Adds decorative food images.
4. Image Widget: Adds a background that contrasts with the white text.

Step-By-Step Interactive Tutorial

Step-by-Step Instructions

1. Add Your Microsoft Account to Access Excel Docs

Download Project Files & Upload Excel Doc:

• Download the Project Files zip file at the bottom of the guide.
• Extract the Excel doc and upload it to OneDrive or SharePoint.

Add a Microsoft Cloud Credential in Wallboard:

• Click Settings in the navigation bar.
• In the expanded submenus, click Cloud Credentials.
• Select the Microsoft tab.
• Click the + icon at the top.
• In the pop-up:
  • Provide a Name.
  • Select Microsoft Excel from the Scope dropdown.
  • Choose the appropriate Tenant Type:
    • Personal Account for personal OneDrive accounts.
    • Work or School Account for SharePoint files.
• Click Sign in with Microsoft. A new window will appear for login and authorization.

2. Add Your Excel Sheet as a Datasource

Navigate to the Datasources Menu:

• Click Settings in the navigation bar.
• In the expanded submenus, click Datasources.
• Ensure the External Datasources tab is selected.

Add a New Datasource:

• Click the + button.
• Select Microsoft Excel as the data type.
• Name the datasource (e.g., “Excel Food Menu”).
• In the Credentials dropdown, select the Microsoft Credential you added.
• Navigate through your OneDrive/SharePoint to find the Excel file.
• Select the Workbook and then the Worksheet.
• Set the Refresh Interval to 300 seconds.
• Enable First Row is Header.
• Enable Cache External Sources.
• Click Save.

3. Set Up the Content

Create a New Content:

• Navigate to the Contents section.
• Click the + icon and select Create Content.
• In the pop-up:
  • Name your content (e.g., “Dynamic Menu”).
  • Set the Resolution to 1920x1080.
• Click Create and Open to enter the Content Editor.

Add a Background Image:

• Drag an Image Widget onto the canvas.
• In the Properties Panel, click Source and select your background image.
• Resize the image to cover the entire canvas using the Size & Position Presets in the Main Tab:
  • Width: "Set width 1/1 of page"
  • Height: "Set height 1/1 of page"
  • Horizontal: "Align left"
  • Vertical: "Align top"

4. Add and Configure the Table Widgets

Add the First Table Widget (Drinks):

• Drag a Table Widget onto the canvas.
• In the Properties Panel, click Bind to Data.
• In the Data Picker:
  • Select the Excel Food Menu datasource from the dropdown.
  • Choose Rows from the next dropdown.
  • Select 0 from the next dropdown.
  • Click the Table Icon to the left of the "0" dropdown to enable array binding (icon turns blue).
  • Switch to the Select Columns tab.

In the Select Columns tab:

• Toggle on the Visible switch for the columns you want to display (Item Name and Price).
• Adjust the Width Ratio of the columns if needed (e.g., set Item Name to 25).
• Delete any text in the Label fields to remove default headers (optional if you’re using custom headers).

Go to the Column Level Settings tab:

• In the top left corner, select the Item Name column from the dropdown.
• Click the Text Align property and select Left from the dropdown.

Go back to the Table Level Settings tab:

• Add a Hide Rows rule to hide rows where Category "does not equal" “static” Soft Drink.
• Add another rule to hide rows where Availability "equals" “static” Out of Stock.

Resize and position the table widget on the left side of the canvas.

Set Font Properties for the Drinks Table Widget:

• Go to the Other Tab in the Properties Panel and set:
  • Font Family: "Open Sans"
  • Font Style: "Bold"
  • Font Size: 37
  • Font Color: White (use the color picker)

Copy and Paste the Table Widget:

• Copy the configured Drinks Table Widget twice using CTRL + C / CTRL + V.
• Adjust the Hide Rows rule for each copied widget:
  • For Burgers: Set the Category filter to “Burger”.
  • For Sides: Set the Category filter to “Side”.
• Position the Burgers Table Widget in the center and the Sides Table Widget on the right.
• Resize the table widgets as needed. Since there are more burger items, this table widget should be made larger.
• When sizing your table widgets, make sure that you are leaving enough room at the bottom of it in case more items are added to the Excel doc.

Adjust Column Width Ratio:

• To ensure your items are displaying correctly in a single row, you can adjust the Width Ratio.
• For the Burger Table Widget, change the Width Ratio of the Item Name column to 40.

5. Add and Configure the Text Widgets

Add a Text Widget for Drinks:

• Drag a Text Widget onto the canvas.
• Enter the text "Drinks".
• In the Other Tab, set:
  • Font Family: "Pacifico"
  • Font Size: 50
  • Font Color: White
• Resize and position as needed.

Repeat for Burgers and Sides:

• Copy and paste the Drinks Text Widget twice using CTRL + C / CTRL + V.
• Change the text to "Burgers" and "Sides" respectively.
• Adjust the Font Size for Burgers to 130 since its section or table widget is larger.
• Resize and position the text widgets above their respective table widgets.

6. Add Decorative Images

Add the Burger Image:

• Drag an Image Widget onto the canvas.
• In the Properties Panel, click Source and select the burger image from the project files.
• Resize and position the image at the bottom-left of the canvas.

Add the Fries Image:

• Copy and paste the Burger Image Widget.
• Change the Source to the fries image from the project files.
• Position the image at the bottom-right of the canvas.

7. Final Adjustments and Preview

Align Widgets:

• Use the alignment tools in the top toolbar to ensure all widgets are properly aligned.
• Fine-tune positioning using the arrow keys for precision.

Save the Content:

• Click the Save icon to store your content.

Preview the Content:

• Click the Preview button to view the dynamic menu.
• Make any necessary adjustments before publishing.

Downloads

Downloadable content!

• Project files
• Content export

Tip!

If you have further questions please do not hesitate to contact us at support@wallboard.info. Happy editing!