How to Create a Dynamic Building Directory Using Excel

Introduction

Completion Time: 30-40 minutes

Description

This guide demonstrates how to create a fully dynamic directory using Table Widgets in Wallboard. The directory will pull tenant information from an Excel spreadsheet containing columns for Floor, Suite, and Tenant. Changes in the Excel sheet will dynamically reflect in the content. The directory will feature three Table Widgets, one for each floor, positioned across the canvas. The guide also covers how to manage data overflow using Automatic Pagination for seamless animations.

Widgets Used

1. Table Widgets: Using multiple table widgets to display each floor’s tenants, including their name and suite number.
2. Image Widget: Adds a background image.
3. Image Widget: A logo at the top-center of the canvas for branding.
4. Shape Widget: Creates a gradient overlay to enhance the background with a semi-transparent effect.
5. Shape Widget: Provides a contrasting background for the directory information to ensure text readability.

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 this guide or choose your own Excel Workbook with the same format. It should have the following columns:
    • Tenant
    • Suite
    • Floor
  • 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.
  • In the popup:
    • 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 and follow the prompts to log in and authorize access.

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., “Tenant Directory”).
  • In the Credentials dropdown, select the Microsoft Credential you added earlier.
  • Navigate through your OneDrive/SharePoint to locate the Excel file.
  • Select the appropriate Workbook and Worksheet.
  • Set the Refresh Interval to 300 seconds.
  • Toggle Cache External Sources.
  • Enable First Row is Header.
  • 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 popup:
    • Name your content (e.g., “Tenant Directory”).
    • 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 Main Tab of the widget's properties, click Source to upload a background image.
  • Use the Size & Position Presets:
    • Width: "Set width 1/1 of page".
    • Height: "Set height 1/1 of page".
    • Horizontal: "Align left".
    • Vertical: "Align top".
• Add a Gradient Overlay:
  • Drag a Shape Widget onto the canvas.
  • In the Main Tab, set the Shape Type dropdown to Simple Box.
  • Set the Line Width property to 0.
  • Use the Size & Position Presets to make it full screen:
    • Width: "Set width 1/1 of page".
    • Height: "Set height 1/1 of page".
    • Horizontal: "Align left".
    • Vertical: "Align top".
  • Enable the Gradient property.
  • Set the gradient colors:
    • First Fill Color: #7c1467.
    • Second Fill Color: #4f0d74.
  • Adjust the opacity:
    • Go to the Other Tab, scroll to the bottom, and click the three dots to reveal the Opacity property.
    • Set the opacity to 75%.
• Add a Logo:
  • Drag an Image Widget onto the canvas.
  • In the Main Tab, click Source to upload a logo.
  • Resize and position the logo at the top-center of the canvas. The logo should be small.
• Add a Directory Background Shape:
  • Drag another Shape Widget onto the canvas.
  • In the Main Tab, set the Shape Type to Simple Box (round boxes).
  • Resize and position the shape widget to fit the area where the directory information will go.
  • Set the Fill Color to #10003d.
  • Adjust the Rounding property to 10.
  • In the Other Tab of the Widget Properties, scroll all the way down, click on the 3 Dots, and then set the Opacity to 80%.
• Add Separator Lines (Optional):
  • Drag additional Shape Widgets onto the canvas to add divider lines and create sections where each floor’s table widget will go.
  • Choose the Vertical Line option in the Shape Type dropdown.
  • Adjust the Stroke Color to white.
  • Set the Line Width to 2.
  • Resize & position as needed.
  • Copy and paste the widget by pressing CTRL+C and CTRL+V.

4. Add and Configure the Table Widgets

4.1. Add the First Table Widget (Floor 1):

• Drag a Table Widget onto the canvas.
• Bind to the Datasource:
  • Click Bind to Data in the Main Tab of the Properties Panel.
  • In the Data Picker:
    • Select the Tenant Directory datasource.
    • Select Rows in the first dropdown.
    • Select 0 in the second dropdown.
    • Click the Table Icon next to "0" to enable array binding (icon turns blue).
    • Go to the Select Columns Tab:
      • Toggle the Visible switch (it should turn blue) for the Tenant and Suite columns.
      • Adjust the Width Ratio:
        • Tenant: 40.
        • Suite: 5.
    • Open the Column Level Settings Tab:
      • Select the Suite column from the dropdown in the top-left corner.
      • Enable the Bold property.

4.2. Hide Additional Rows, Adjust Row Height, and Alignment:

• Enable Hide Rows:
  • Go to the Table Level Settings Tab.
  • Enable Hide Rows, then add rules:
    • Column: Floor.
    • Evaluation: Does Not Equal.
    • Evaluation Origin: Static.
    • Evaluation Against: Enter "1" for Floor 1.
    • Press Save to confirm your changes and close the data picker popup.
• Set the Row Height:
  • In the Other Tab, set Row Height to Fixed and set the height to 75.
• Adjust the Horizontal Alignment:
  • In the Other Tab, set the Horizontal Alignment to Left until the icon turns blue.

4.3. Configure Font and Pagination:

• Go to the Other Tab:
  • Set Font Family: "Open Sans".
  • Set Font Color: White.
  • Set Font Size: 23.
• Resize & position the table widget to the left of the canvas.
• Enable Automatic Pagination:
  • In the Main Tab, click Bind to Data.
  • Select Table Level Settings.
  • Enable Automatic Pagination and configure:
    • Page Size: 10.
    • Delay: 15 seconds.
    • Fade Animation: Enable.
    • Animation Delay: 2 seconds.
  • Press Save to confirm your changes and close the data picker popup.

4.4. Add Tables for Floors 2 and 3:

• Copy and paste the Floor 1 Table Widget twice.
• Update the Hide Rows rules for each floor:
  • Floor 2: Evaluation Against "2".
  • Floor 3: Evaluation Against "3".
• Position the Table Widgets:
  • Floor 1: Left.
  • Floor 2: Center.
  • Floor 3: Right.

4.5. Hide the Tenant and Suite Column Headers:

• Click Bind to Data in the Main Tab of the Properties Panel.
• Go to the Select Columns Tab.
• Click into the Label field of the Tenant and Suite columns and remove the headers.
• Click Save and repeat the steps for the other table widgets.

5. Final Adjustments and Preview

• Align Widgets:
  • Use the alignment tools in the top toolbar.
• Save the Content:
  • Click the Save icon to confirm your content changes.
• Preview the Content:
  • Click the Preview button to ensure the directory displays correctly.
  • Verify pagination transitions for large datasets.

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!