Export (0) Print
Expand All

Show data from Excel in a Project Siena app

Published: July 14, 2014

Updated: July 14, 2014

In Project Siena, you can create a Windows Store app that shows data that you import from one or more tables in an Excel workbook. For example, you can follow this tutorial to create an app in which users can display and filter data about laptops, tablets, and all-in-one devices from several original equipment manufacturers (OEMs). As the following illustration shows, the finished app displays the logo of each OEM on the left side, in addition to an image and other information about each device on the right side.

Left: OEM gallery, Right: Device gallery
Note Note

The data in this tutorial is provided for demonstration purposes only. Microsoft makes no guarantees as to the accuracy of the data at the time of this writing or at any point in the future.

For an overview and app demos, see Microsoft Project Siena.

Prerequisites

  • Project Siena, which you can get for free from the Windows Store

    You can find system requirements and other information in the release notes.

  • Excel 2010 or Excel 2013

In this topic:

You'll find the data for this tutorial in an Excel workbook that contains two worksheets. One worksheet contains the names of several OEMs and links to their logos, and the other worksheet contains data and a link to an image file for each device. Before you can use those elements, you must format the data as tables and ensure that the links point to the image files in a location where your app can find them.

  1. Download and decompress the Excel workbook and image folders for this tutorial from the TechNet Gallery.

  2. Open the Excel workbook, highlight all the data in the OEMs worksheet, click Format as Table on the ribbon, and then specify whatever format you want.

    Highlight data, and then click Format as Table
  3. In the Format As Table dialog box, ensure that the My table has headers check box is selected, and then click OK.

    Note Note

    If you use your own data, ensure that it also has column headers before you format it as a table. Otherwise, Excel will use default values that you'll probably need to update.

  4. In Table Name near the left edge of the ribbon, type OEMs.

    Name the table "OEMs"
  5. In the Devices worksheet, repeat the last three steps except name the table Devices.

  6. Save your changes, and then close the Excel file.

  7. Copy the folders that contain device images and OEM logos, and then paste them into C:\Users\Public\Public Pictures.

    Important note Important

    To use media in a Project Siena app, you must copy the files to the Pictures, Videos, or Music folders for your user account on the local computer or the public versions of the same folders.

  8. If you're running Windows 8.1, right-click the Public Pictures folder, point to Include in library, and then click Pictures.

In this procedure, you'll tell Project Siena where to find the data for your app. Specifically, you'll indicate the type of data that your app will show, the file that contains that data, and the tables that you want to use within that file.

  1. Start Project Siena by clicking or tapping its tile on the Start screen.

    If the tile doesn't appear on the Start screen, you can find the tile by typing all or part of its name while the Start screen is showing. In the search results, click Microsoft Project Siena to open the app.

    Note Note

    You can pin the tile for a search result to the Start screen by right-clicking the result and then choosing Pin to Start.

  2. If the top app bar isn't showing, right-click anywhere in the workspace or swipe down from the top of the screen.

  3. On the App Data menu, click Data Sources.

    App Data menu with Data Sources selected
  4. In the list of data sources, click Excel.

  5. Browse to the Excel workbook that you downloaded, click it, and then click Open.

  6. Select the check box for each table that you created, and then click Import Data.

  7. Verify that images from each table appear, and then click the Back button to return to the design workspace.

    Note Note

    If the images don't appear, ensure that you've copied the folders as the previous procedure describes.

  8. (optional) In the top app bar, open the File menu, and then save your app.

In this section, you'll put a "face" on your app by adding and customizing UI elements called galleries.

In this procedure, you'll create a vertical gallery that shows the OEM logos, and you'll give that gallery a descriptive name, so that you can more easily distinguish it from other elements of the UI. Then you'll resize the items in the gallery, so that they appear correctly instead of too wide for the gallery, and you'll resize the gallery itself, so that you'll have room for other elements.

  1. In the upper-right corner of the workspace, click the plus sign to display a list of UI elements that you can add to your app.

  2. In the list of elements, click Galleries, and then click the vertical Image Gallery.

    Add gallery to show OEM logos

    The Items dialog box appears automatically when you add a gallery. If the dialog box disappears, you can reopen it by clicking the gallery near its bottom edge and then clicking Items in the lower-left corner of the workspace.

  3. In the Items dialog box, click OEMs.

    Note Note

    If OEMs doesn't appear in the list of data sources, point to the list to display a vertical scroll bar, and then scroll down.

    Items dialog box for vertical image gallery
  4. Rename the gallery by replacing Gallery1 near the top of the workspace with OEM gallery.

    Rename a gallery by typing in the control list
    Note Note

    When you rename a visual or a screen, the name must start with a letter or an underscore and can't duplicate the name of another visual or imported table.

  5. Click the top logo in the OEM gallery, and then click Design ear the bottom of the workspace.

  6. Click Image Position, and then click Fit.

    The logos shrink to fit inside the gallery.

  7. Click the gallery near its bottom edge, and then decrease its width so that more logos appear and to make room for another gallery.

    When an element is selected, a thick, gray box surrounds it, and you resize the element by dragging that box. You can also resize a selected element by dragging a small, white square or triangle in the selection box.

    A narrower gallery shows more logos at once

    If you point within the gallery, a vertical scroll bar appears so that you can display the logos for the other OEMs.

In this procedure, you'll add a horizontal gallery that shows not only an image for each device but also the names of the device and its OEM. You'll rename the new gallery, change where it shows each type of name, and then resize and move the new gallery to show more information and avoid overlapping with the OEM gallery.

  1. Open the list of UI elements, click Galleries, and then click the horizontal Image Gallery with Text.

    Choose the horizontal image gallery with text
  2. In the Items dialog box, click Devices.

    By default, the OEM name appears as the title of the item, and the device name appears as the subtitle. In the next few steps, you'll swap those names.

  3. In the upper-right corner of the Items dialog box, click the Pick column to display button.

  4. Click Title1!Text to change the kind of information that the title element contains.

    Select the title element of the device gallery
  5. Click Device name to show the names of devices, not the names of OEMs, in the title element.

    Swap the text for the title and the subhead
  6. Click the Back button in the dialog box, and then repeat the previous two steps except show the names of OEMs in the subtitle element.

  7. Rename the gallery that you just added to Device gallery.

  8. Increase the width of the Device gallery so that it shows data about three devices at a time, and move the gallery so that it touches the right edge of the screen about halfway down.

    Left: OEM gallery, Right: Device gallery

If your app shows a lot of data by default, users might want to filter that data to show only what they care about right now. For example, users of a plant-nursery app might want to show only data about fruit trees or plants that thrive in cooler climates. You can configure your app to show data that meets one or more criteria that you specify, as the first part of this procedure demonstrates, or that a user specifies, as the second part demonstrates.

Filter the devices by type or OEM

  1. Select the Device gallery, and then click Items in the lower-left corner of the workspace.

  2. In the fx text box, type or paste the following function:

    Filter(Devices, Type = "Laptop")

    For more information, see Operators and functions in Project Siena.

    The Device gallery shows every laptop in the table but no other types of devices.

  3. In the fx text box, type or paste the following function:

    Filter(Devices, 'OEM name' = 'OEM gallery'!Selected!'OEM name')

    If you click an icon in the OEM gallery, the Device gallery shows only those devices from the OEM that you specified.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft