This article is Part 3 of a three-part article mini-series on using Project Siena and Microsoft Azure cloud services together to build real no-code Windows 8.1 business apps.  Project Siena gives users the ability to create powerful apps without writing any code whatsoever, and Microsoft Azure provides a globally-accessible Internet cloud service that can serve as a centralized data source for these apps.  Together, Project Siena and Microsoft Azure provide a complete toolset for building no-code data-driven business apps.

Microsoft Azure Mobile Services

If you’ve missed the earlier parts of this series, be sure to check them out below and then come back here when you’re ready to proceed …

As we discussed in Part 2 of this series, the app we’re building in this mini-series is a video-based lesson plan app.  This app will leverage content that my good friend, Andy Syrewicze, and I previously created for training IT Pros on Hyper-V.  If you haven’t done so yet, you can download a completed version of this app from the Windows Store to see the finished result that we’ll be targeting in this article.

Download a completed version of this app in the Windows Store!

We’re almost ready to build our app!

Before we jump into Project Siena and begin building a Windows 8.1 app, we’ll first need to grab the information that Project Siena will need to connect to the Azure Mobile Services data source that we defined in Part 2 of this series. Specifically, we’ll need to identify the URL for connecting to our Azure Mobile Service and the Application Key that Project Siena will use to authenticate to this mobile service.

  1. Sign-in at the Microsoft Azure Management Portal with the credentials used when activating your Azure subscription.
     
  2. On the blue left navigation bar of the Azure Management Portal, click Mobile Services.
     
    Click to enlarge ...
     
  3. In the list of Mobile Services, record the URL displayed in the right-most column for the mobile service that you previously defined.
     
  4. On the bottom black toolbar, click Manage Keys and copy the Application Key to your clipboard.

Let’s build our no-code app!

Now that we’ve grabbed the information that Project Siena will need to connect to the Azure Mobile Service, we’re ready to launch Project Siena and build our app.

  1. Install Project Siena from the Windows Store (if you haven’t done so yet).
     
  2. Launch Project Siena from the Start screen.
     
    Tip! On the Start screen, just start typing “S-i-e-n-a” to locate Project Siena for launching.
     
    When Project Siena launches, you will be greeted with an empty app canvas for designing a new app.
     
    Click to enlarge ...
    Project Siena displaying a blank canvas for a new app
     
  3. Right-click on the blank canvas or swipe-down from the top to expose the top app bar.
     
    Click to enlarge ...
    Project Siena displaying top app bar
     
  4. Add the Azure Mobile Services data source to Project Siena by selecting App Data | Data Sources from the top app bar.
     
    Click to enlarge ...
    Adding Azure Mobile Services as a data source to Project Siena
     
    On the Data Sources page, select Azure Mobile Services and complete the following fields:
     
    URL: type the Azure Mobile Services URL recorded above with “/tables/episodes” appended to the end.
     
    App Key: paste in the Application Key copied to your clipboard above.
     
    Click or tap image to connect to the Azure Mobile Service and query the list of tables.
     
    Click or tap Select All, and then click or tap the Import data button.
     
    Click to enlarge ...
    New Azure Mobile Services data source added to Project Siena
     
    When completed, click or tap image to return to the Project Siena app canvas.
     
  5. Click or tap Add a visual to add an Image Gallery to the canvas for displaying each video module.
     
    Click to enlarge ...
    Adding visuals to an app in Project Siena

    On the right Visuals panel, click or tap Galleries, and then click or tap Image Gallery with Caption.
     
    Click to enlarge ...
    Adding Image Gallery with Caption to an app in Project Siena
     
  6. Resize the Image Gallery that was added to the app canvas.
     
    Click or tap the sizing handles on the newly added Image Gallery and drag to resize to the full width of the canvas.
     
    Click to enlarge ...
    Resizing Image Gallery to full width of Project Siena canvas
     
  7. Bind the Image Gallery to the Azure Mobile Services data source. 
     
    Select the Image Gallery, and then click or tap Data | Items | episodes on the bottom app bar.
     
    Click to enlarge ...
    Binding the Azure Mobile Services data source to the Image Gallery
     
  8. Update the Caption for each video module.
     
    Select the Caption of the first image in the gallery, and then click or tap Data | Text | title on the bottom app bar.
     
    Click to enlarge ...
    Binding the title column in the Azure Mobile Service data source to the caption
     
  9. Add a Video Player to the app canvas. 
     
    Click or tap a blank area of the canvas, and then click or tap image in the upper right corner. Select Video Player from the Visuals panel.
     
    Click to enlarge ...
    Adding a Video Player to the app canvas in Project Siena
     
    Move and resize the Video Player so that it is positioned in the bottom left corner of the app canvas as shown above.
     
  10. Click or tap the Video Player on the canvas to select it, and then use the bottom app bar buttons to configure Media, Image and DefaultPaused state.
     
    Click to enlarge ...
    Configuring the Video Player on the app canvas in Project Siena
     
    Click or tap Media | Gallery1!Selected | mediaurl.
     
    Click or tap Image | Gallery1!Selected | thumbnail.
     
    Click or tap DefaultPaused | false.
     
  11. Add a Label to the canvas for displaying the description of a selected video module. 
     
    Click or tap a blank area of the canvas, and then click or tap image in the upper right corner. Select Label from the Visuals panel.
     
    Click to enlarge ...
    Adding a Label to the app canvas in Project Siena
     
    Move and resize the Label so that it is positioned in the bottom right corner of the app canvas as shown above.
     
  12. Click or tap the Label on the canvas to select it, and then use the bottom app bar buttons to configure Text and Design formatting.
     
    Click to enlarge ...
    Configuring Label to display description of selected video module.
     

    Click or tap Text | Gallery1!Selected | description.
     
    Click or tap Design | Size | 18.
     
  13. Add a Button to the canvas for linking to recommended next steps for a selected video module. 
     
    Click or tap a blank area of the canvas, and then click or tap image in the upper right corner. Select Button from the Visuals panel.
     
    Click to enlarge ...
    Adding a button to the app canvas in Project Siena
     
    Move and resize the Button so that it is positioned in the bottom right corner of the app canvas as shown above.
     
  14. Click or tap the Button to select it, and then use the bottom app bar buttons to configure Text, Size and OnSelect action.
     
    Click to enlarge ...
    Configuring a button on the app canvas in Project Siena
     
    Click or tap Data | Text and then enter “Next steps …” in the fx field.
     
    Click to tap Design | Size | 18.
     
    Click or tap OnSelect and then enter Launch(Gallery1!Selected!pageurl) in the fx field.
     
  15. Add a Label to display the app title at the top of the screen using the same steps as used previously for adding a Label.
     
    Click to enlarge ...
    Adding a label to display the app title in Project Siena

Congratulations! You’ve just built your first no-code app with Project Siena!

Let’s test our app …

As you build an app in Project Siena, you can test as you go by using the Preview feature at any time.

  1. Right-click on a blank area of the app canvas or swipe-down from the top to expose the top app bar.
     
    Click to enlarge ...
     
  2. Click or tap Preview located at the right on the top app bar. Your new app will launch full-screen for testing.
     
    Click to enlarge ...
     
  3. When you've finished testing your app, press Escape to return to the Project Siena app canvas.

Ready to publish your app!

Now that you’ve created a new Windows 8.1 app in Project Siena, you’re ready to publish it so that other users can install and enjoy it.

You can publish Project Siena apps to be publicly available via the Windows Store or distribute to internal users via sideloading within an enterprise organization.

  1. Sign up for App Builder Rewards for access to publishing tools, resources and special rewards.
     
    Sign-up for App Builder Rewards!
     
  2. Submit your app for publishing in the Windows Store.
     
    - OR -
     
  3. Deploy your app to a different device for additional testing or QA.
     
    - OR -
     
  4. Distribute your app internally over a network via sideloading.

What’s your app idea?

As we saw in this article mini-series, Project Siena, together with Microsoft Azure, has the potential to help you turn your ideas into real apps – without requiring any programming skills!

If you need help turning your ideas into apps for publishing in the Windows Store, be sure to connect with our team of Tech Advisors who can help with everything from app design to marketing advice to troubleshooting.

Get local app help from a Tech Advisor!
Get app help from a local Tech Advisor!

When you’ve successfully submitted your Project Siena app to the Windows Store, please feel free to post a comment in the Feedback section below with a link to your app for all of us to enjoy!

  Interested in learning more about Windows 8.1 for Business?

  Check out our complete blog series at: