Show a data set in Project Siena
Show a set of data in a custom gallery, where you can sort the data in ascending or descending order by a column you specify and filter the data by one or more criteria. Show a set of data in pie, column, or line chart.
In this topic, you'll download one or more compressed files and import data from each file into a collection. But you can follow the same techniques with any set of data, whether you add it from an external source, specify the data yourself, or prompt users for it.
Get a general overview of Project Siena with links to resources such as sample apps, video tutorials, and forums.
Prerequisites
- Create your first app to understand how to perform basic tasks, such as adding a control and importing data.
Show a set of data in a custom gallery
Download PriceList.zip, and import it into a collection named PriceList.
Press Alt-V, scroll down until Galleries appears, and then click it.
.jpeg "The icon you click to show a list of types of galleries")
Scroll down until the vertical Custom Gallery appears, and then click it.
.jpeg "Icon for the vertical custom gallery")
Set the Items property of the gallery you just added to PriceList, and move it to the right side of the import control.
Click the first item of the gallery (the gallery template), add three labels, and then set the Text property of each label to one of these expressions:
ThisItem!Name
Text(ThisItem!Price, "$#")
ThisItem!Maker
Each item in the gallery identifies the name of a product, its maker, and its price.
.jpeg "A gallery template with three labels, showing product name, maker, and price")
Resize and arrange the labels in a row near the top of the template, and then shrink the height of the template to fit the labels more exactly.
To select the template, click just below the labels in the first item.
Shrink the height and width of the gallery itself to fit the items more exactly.
(optional) Add labels over the gallery to identify each column.
.jpeg "Gallery with three columns: Product name, price, and maker")
Sort a set of data
Follow the steps in Show data in a custom gallery, and then set the Items property of the gallery to this function:
Sort(PriceList, Name)
The gallery is sorted by product name in ascending order.
.jpeg "A gallery with three columns, sorted alphabetically")
Set the Items property of the gallery to this function:
Sort(PriceList, Name, Descending)
The gallery is sorted by product name in descending order.
Filter a set of data
Follow the steps in Show data in a custom gallery.
Add a slider, name it PriceFilter, and move it over the gallery.
(optional) Configure the slider so that users can't set it to a value outside the range of prices in the list:
Set the Min property to this function:
Min(PriceList, Price)
Set the Max property to this function:
Max(PriceList, Price)
Set the Items property of the gallery to this expression:
Filter(PriceList, Price<=PriceFilter!Value)
Adjust the slider to a value that's between the highest and the lowest price in the gallery.
As you adjust the slider, the gallery shows only those products that are no more expensive than the value you specify.
.jpeg "A gallery filtered to show only items that are below a certain price")
Add an input-text box, and name it MakerFilter.
Set the Items property of the gallery to this function:
Filter(PriceList, Price<=PriceFilter!Value && MakerFilter!Text in Maker)
Set the slider to 50, and type the letter f in the input-text box.
The gallery shows only Fabrikam products that cost less than $50.
.jpeg "A gallery in which the items are filtered by two criteria")
Filter a gallery by another gallery
Download OEMs.zip and Devices.zip from the TechNet Gallery.
Import OEMs.zip into a collection named OEMs, and import Devices.zip into a collection named Devices.
Create your first app for an example of how to import data into a collection.
Press Alt-V, scroll down until Galleries appears, and then click it.
Click the vertical Image Gallery, set its Items property to OEMs, and move it to the right of the other controls.
Click the image in the first item of the gallery, and set its Image Position property to Fit.
Name the gallery OEMGallery, and make it narrower to show more images.
.jpeg "A narrower gallery shows more logos at once")
Add a horizontal Image Gallery with Text, set its Items property to Devices, and move it to the right of the OEMs gallery.
(optional) Swap the data that appears in the two labels within the gallery, so that name of each device appears in larger letters above the name of the OEM.
.jpeg "Left: OEM gallery, Right: Device gallery")
Set the Items property of the devices gallery to this function:
Filter(Devices, 'OEM name' = OEMGallery!Selected!'OEM name')
When you click any logo in the OEMGallery, the devices gallery shows products from only that OEM.
Show data in a chart
Your data should be structured with each series in the first row and the labels in the leftmost column, as in this example:
.jpeg "A collection with four columns and three rows")
Download ChartData.zip, and import it into a collection named ProductRevenue.
Press Alt-V, click Charts, and then click Pie Chart.
Set the Items property of the pie chart to ProductRevenue.
The pie chart shows relative revenue of the products in 2012.
.jpeg "A pie chart that shows revenue for three products")
Press Alt-V, click Charts, and then click Column Chart.
Set the Items property of the column chart to ProductRevenue.
The column chart shows revenue for each product in 2012.
.jpeg "A column chart that shows revenue for three products")
Near the bottom of the screen, click Design if it appears, click Chart, and then set the Number of Series to 3.
The column chart shows revenue data for each product over three years.
.jpeg "A column chart that shows revenue data for three products over three years")