Why Windows 8.1 for Business? Build No-code Business Apps with Windows 8.1, Project Siena and Microsoft Azure (Part 3)
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.
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.
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.
- Sign-in at the Microsoft Azure Management Portal with the credentials used when activating your Azure subscription.
- On the blue left navigation bar of the Azure Management Portal, click Mobile Services.
- In the list of Mobile Services, record the URL displayed in the right-most column for the mobile service that you previously defined.
- On the bottom black toolbar, click Manage Keysand 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.
Install Project Siena from the Windows Store (if you haven’t done so yet).
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.
Project Siena displaying a blank canvas for a new app
Add the Azure Mobile Services data source to Project Siena by selecting App Data | Data Sources from the top app bar.
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 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.
New Azure Mobile Services data source added to Project Siena
When completed, click or tap to return to the Project Siena app canvas.
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.
Resizing Image Gallery to full width of Project Siena canvas
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.
Binding the Azure Mobile Services data source to the Image Gallery
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.
Binding the title column in the Azure Mobile Service data source to the caption
Add a Video Player to the app canvas.
Click or tap a blank area of the canvas, and then click or tap in the upper right corner. Select Video Player from the Visuals panel.
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.
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.
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.
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 in the upper right corner. Select Label from the Visuals panel.
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.
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.
Configuring Label to display description of selected video module.
Click or tap Text | Gallery1!Selected | description.
Click or tap Design | Size | 18.
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 in the upper right corner. Select Button from the Visuals panel.
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.
Click or tap the Button to select it, and then use the bottom app bar buttons to configure Text, Size and OnSelect action.
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.
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.
- Right-click on a blank area of the app canvas or swipe-down from the top to expose the top app bar.
- Click or tap Preview located at the right on the top app bar. Your new app will launch full-screen for testing.
- 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.
- Sign up for App Builder Rewards for access to publishing tools, resources and special rewards.
- Submit your app for publishing in the Windows Store.
- OR -
- Deploy your app to a different device for additional testing or QA.
- OR -
- 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.
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: