Create your first app with Project Siena

Create a Windows app to manage organizational data (such as text, numbers, and images) without learning a programming language. Import one or more sets of data from sources such as Excel, SharePoint, an Azure mobile service, a REST source, or a social-media channel. Update the data to keep it current, and add records as your organization grows. Show data sets in tables, charts, or other ways that help your organization make better decisions.

Get an overview of Project Siena, and check out other sample apps.

In this topic:

Create an app for tracking inventory by showing a picture of each product, its name, and the number of units in stock. As products are sold, update the quantity to reflect your current inventory.

Prerequisites

• Download CreateFirstApp.zip, which contains sample data, and remember where you saved it.

You don't need any other prerequisites to follow this tutorial, which covers developing and testing an app but not installing it. To install a Project Siena app, you must meet several other prerequisites.

Install and open Project Siena

1. Install Project Siena from the Windows Store, and then open the app the same way as you open any other Windows app.

   

   To access Project Siena more easily, pin it to the Start Screen by following the steps in the "Pinning apps you use often" section of the Start Screen page of the Windows Tutorial.

2. Watch the short video that automatically runs the first time you open Project Siena, or click Skip Tour near the lower-right corner.

3. (optional) Save your app by pressing Ctrl-S, typing a name in the text box, and then clicking Save.

   By default, Project Siena files are saved in the Documents folder of the current user, but you can specify a different location.

Add and configure a control

When you develop an app, you'll add UI elements, called controls or visuals, to show text, images, and other information. In this procedure, you'll add a label that appears near the top of the screen to identify your app, and then you'll configure the label by changing several of its properties. For example, you'll specify the text that appears in the control, the font size of that text, and the name, size, and location of the control itself. Other types of controls, such as buttons, have similar properties, and you can change them in similar ways.

Add a control, and change a property

1. Press Alt-V to open a list of controls that you can add to your app

   You can open the same list by clicking Add a visual if it appears, but it disappears when you add any control. You can also open the list by clicking the plus sign near the upper-right corner.

   

   If the top app bar is open, click anywhere under it to close it and show the plus sign.

2. In the list that appears, click Label.

   

   A label appears near the upper-left corner. A thick, grey box surrounds the label to indicate that it's selected.

   

   The Text dialog box also appears in the lower-left corner but closes if you click anywhere outside it or you change focus to another app.

   

   To reopen this dialog box, make sure that the label is selected, and then click the Text icon near the lower-left corner.

   

   Note

   When you want to configure a control, make sure that it's selected so that the appropriate options appear. If no control is selected, the options for a screen appear.

   If you want to change a property but its icon doesn't appear near the bottom of the screen, you might need to click one of these icons first, which represent categories of properties:

    

   For example, the Text property is in the Data category, so you might need to click the Data icon first and then click the Text icon.

   If you're not sure in which category a property belongs, click Express View in the lower-right corner to display a list of properties in all categories.

   

   If the property you want still doesn't appear, click the down arrow for each category to show all properties in that category. When you finish, click Express View again to close the list.

3. In the Text dialog box, change the text that appears in the label by typing Track inventory between the quotation marks.

4. Close the Text dialog box by clicking anywhere outside of it.

   You can also change the Text property by highlighting the text in the label and then typing the text you want (without quotation marks).

   

Rename, resize, and move a control

1. Rename the label itself by double-clicking Label1 near the top of the screen and then typing Banner.

   

   If you've added more than one label, the default name might end in a number other than 1.

2. With the label selected, perform one of these sets of steps:

   • If this icon appears, click it to open a dialog box in which you can change font properties.

     

   • If this icon appears, click it, and then click the Text icon to open a dialog box in which you can change font properties.

     

3. Make the font size bigger by clicking 11 on the left side of the dialog box and then adjusting the slider or typing 40 in the text box.

   

   The new font size appears on the left side of the dialog box.

4. Make the label bigger by dragging the small, white triangle in the lower-right corner of the selection box until all the text appears on one line.

   

5. Drag the selection box around the label so that it's centered near the top of the screen.

   Note

   If you want to delete a control, select it, and then press Delete.

Import a set of data

You can add text, numbers, and images to an app by adding one label or image control at a time, but many Project Siena developers incorporate data from an external source into their apps. Not only can you add data more efficiently this way but you can also, in many cases, update the original source from within the app. In this procedure, you'll import a set of data from the compressed file that you downloaded earlier.

1. Press Alt-V, scroll to the bottom of the list of controls, and then click Import.

   An Import control appears near the upper-left corner of the screen.

   

2. Copy this function:

   Collect(Inventory, Import1!Data)

3. Near the bottom of the screen, click the OnSelect icon.

   

   With this property, you specify what happens when you click a control (in this case, the Import control).

4. In the text box that appears, paste the function that you just copied.

   In the next step, you'll click the Import control, which is named Import1 by default. You'll then browse to the data that you downloaded before you started this tutorial. This function will add that data to a collection named Inventory.

   Note

   In Project Siena, a collection contains one or more columns of data and one or more rows for each record. For example, a collection of contact information might contain columns for names, addresses, and phone numbers, with a row for each contact.

5. Press F5 to open Preview.

   So far, you've been working in the design workspace, where you can add and configure controls. But not all functions, such as an importing data, work in the design workspace. In Preview, all functions work so that you can test them before you install your app on one or more devices. As you develop your app, you should frequently verify your app's behavior in Preview.

6. Click the Import control, find CreateFirstApp.zip, and then click it.

   

7. Click Open, and then press Esc to return to the design workspace.

   You've just created the Inventory collection, which contains information about five products, including a design image, a product name, and the number of units in stock. To display a preview of the collection, press Alt-D, and then click Collections in the left navigation bar.

   

   The first five rows in the Inventory collection appear, with the design of each product, its name, and the number of units in stock.

   

8. Press Esc to return to the design workspace.

Show a set of data

You can display a preview of a collection, but it's hidden from users unless you show it in a gallery or another control. Galleries are groups of controls, such as labels and images, that work together to show a set of data. Project Siena offers several pre-built galleries, such as for images only, text only, or a combination of images and text. You can modify a pre-built gallery to suit your needs, or you can build your own by starting with a custom gallery.

In this section, you'll show the Inventory collection in a gallery that supports images and two labels. The images will show the designs, and the two labels will show the names and the number of units in stock for each product. You'll also add a visual indicator of which item in the gallery is selected.

Add a gallery

1. Press Alt-V, and then scroll down until the Galleries icon appears.

   

2. Click the Galleries icon, and then click the horizontal Image Gallery with Text icon.

   

   The gallery appears in the upper-left corner of the screen, and the Items dialog box opens automatically.

   

   If the Items dialog box closes, click the Items icon in the lower-left corner to reopen it.

3. In the Items dialog box, click Inventory to show that collection in the gallery.

   

4. Name the gallery ProductGallery, move it down and to the right so that it doesn't block the other controls, and widen it to show three products.

   

   The gallery contains an image control, which shows the design of each product, and two labels. You'll configure the labels to show the product name above the number of units.

5. In the first item of the gallery, click the bottom label.

   

   The first item in any gallery is a template. By changing the first item, you automatically change all other items in the gallery.

6. In the Data category of properties, click the Text icon.

   

7. In the Text dialog box, click UnitsInStock.

   The bottom label shows the number of units in stock for each product.

   

Show which gallery item is selected

1. Select the gallery template by clicking any item in the gallery except the first one and then clicking the icon that appears in the upper-left corner.

   

2. Press Alt-V, and then scroll down the list of controls until the Shapes option appears.

3. Click Shapes, and then click the rectangle.

   A blue solid rectangle appears in each gallery item.

4. Near the bottom of the screen, click Fill, and then set the property to this function:

   RGBA(0, 0, 0, 0)

5. Near the bottom of the screen, click Border, set the BorderStyle property to Solid, and set the BorderThickness property to 3.

6. Resize the rectangle so that it surrounds each gallery item.

7. Near the bottom of the screen, click Options, and then click the icon to set the Visible property.

   

8. Set the Visible property to this function:

   If(ThisItem!IsSelected, true)

   The rectangle appears around the item that's currently selected (but no others).

   

Update a set of data

Specify what data to update

1. Click outside the gallery, press Alt-V, and add a slider to your app.

   

2. Name the slider UnitsSold, and move it under the gallery.

3. In the lower-left corner, click the Data icon, click Max, and then type or paste this expression in the dialog box that appears:

   ProductGallery!Selected!UnitsInStock

   With the Max property set this way, a user can't specify a value that's larger than the number of units in stock for the specified product.

4. Press Alt-V, and then add a button to your app.

   

5. Set the Text property of the new button to Update, and move it just below the slider.

   

6. With the button selected, copy this expression, click OnSelect, and then paste this expression into the dialog box that appears:

   UpdateIf(Inventory, ProductName = ProductGallery!Selected!ProductName, {UnitsInStock:UnitsInStock-UnitsSold!Value});SaveData(Inventory, "inventoryfile")

   When you click this button in the next procedure, you'll update data in the Inventory collection. For the selected product, the number of units in stock will be reduced by the value to which the slider is set. You'll also save your change in a location that's identified by the name between quotation marks.

Update the data

1. Press F5, click a product in the gallery, specify a value with the slider, and then click the Update button.

   The gallery shows that the number of units in stock decreased by the amount that you specified for the product that you specified.

2. Press Esc to return to the design workspace.

   When you clicked the Update button, you not only made changes but also saved them. Whenever you close and reopen a Project Siena app, all collections are empty by default. In the next step, you'll configure the app to automatically load the data back into the Inventory collection when the app is opened. (If you create another screen and then navigate back to this one, the data isn't loaded back because that would cause duplicate data.)

3. Click away from all controls on the screen, and then click the Behavior icon near the bottom of the screen.

   

   The properties in the Behavior category for the screen appear.

4. Copy this expression:

   If(IsEmpty(Inventory), LoadData(Inventory, "inventoryfile"))

5. Click the OnVisible icon, and then paste the expression into the dialog box that appears.

   

Develop your own app

• Add labels and other controls one at time to show specific pieces of data or to get information from the user.

• Add one or more sets of data from the user, another external source, or both.

• Show a set of data in a custom gallery or a chart.

• Share data by exporting it and then importing it into another Project Siena app, posting the data in a SharePoint list, or sending the data in an e-mail message.

• Build a function to update the data, add to it, display it differently, or make other changes.

Install your app

When you finish developing and testing your app, you can install it on the same device that you used to develop it, on a test device, or on devices across your organization. Before you can install your app, you'll need a few prerequisites, such as a current developer license for Windows 8. The license is free, but you must renew it to keep your app running. You'll also need an app key if you connected to a data source (such as Bing Search) that requires one. For a full list of prerequisites and instructions, see Install a Project Siena app.