How To
Start new project
Whether you are new to Windows and Windows
Phone or already familiar with our concepts, this
document will help you with some baseline concepts.
Empty Apps vs. Templates
What is a Data Source?
What are the different Data Sources?
What can I do with a Collection?
Static Resources vs. App Studio Data Services
What is an Application Section?
Panorama and Hub Controls
What does "Bind to Data" mean?
What does "Add an Action" mean?
What are the different Actions?
Configuring Application Sections
Configuring facebook DataSource
What are Style, Tiles and Splash?
Getting the app done
How do I get my app on my Windows Phone device?
Install the certificate on Windows Devices
Install the App in Windows Devices
How do I publish my app in the Windows Phone 8 Store?
How do I publish my app in the Windows Phone 8.1 and Windows 8.1 Store?
Multilingual Support
How do I enable ads on my app?
How do I run "Windows App Cert Kit"?
Using the YouTube Data Source
Using the Twitter Data Source
Using the Instagram Data Source
Empty Apps vs. Templates
Create an empty app, which allows you to build an app from scratch by adding Sections and Data
Sources and configuring its content and style using your own creativity.
Create an app from a template, which allows you to start with a previously generated app as a guide.
Use a pre-configured app setup with your own customized content and layout, and you can also add new
Sections and Data Sources. Click on a template tile in order to display more information about that apps
layout and purpose as well as screenshots.
You can also create a Web App Template, which allows you to create a web app from scratch by
entering a base URL and various App Bar buttons. Currently, Web App Template creation is only
available for Windows Phone.
Once you have selected the type of app you want, insert a name, add a description, and select an icon. The icon
must be in .png format and measure 160 x 160 px. This icon should also serve as your app tile, which will
represent your app on the start screen of a Windows Phone or Windows device. Save a copy of it in 300 x 300
as well as youll need that if you decide to publish your app. Now its time to add Application Sections and Data
Sources.
What is a Data Source?
A Data Source is simply the content that you want to display in each section of your app YouTube videos from
your favorite channel, your stores inventory, images from your Flickr account, etc. Data Sources are displayed
in your app through Sections. Every Section you create is connected to a Data Source.
What are the different Data Sources?
RSS A list of sets of information based on an RSS feed that you enter when creating the data source.
Html A single page of static text that you enter.
Youtube A list of videos with titles and descriptions based on a YouTube channel or search that you
enter when creating the data source.
Flickr A list of images and their corresponding data based on a Flickr UserId or search that you enter
when creating the data source.
Bing A list of news
Facebook A Facebook feed from a public Facebook page.
Collection A list of items with columns of characteristics. This is your personal data that does not
depend on a website.
What can I do with a Collection?
A Collection is a Data Source that allows you to upload data that does not depend on a website such as store
inventory, contact info,a daily menu, favorite musicians, etc. Before entering any data in a Collection, you can
define the total possible columns of data. Add a column for every bit of information you want to display for
each item and select what type of data it is. There are many types of information you can add: Address, Album
Name, Artist Name, Image, Int, E-Mail, Phone Number, Song Name, and String. Changing the data type for
each piece of information is important because it allows you to include a variety of additional actions in your
app. Your data can be static or dynamic.
Static Resources vs. App Studio Data Services
For Collections, there are two data storage options: Static Resources and App Studio Data Services.
Static Resources means the data will remain constant and does not depend on an internet connection. If you
change the data in Windows App Studio, your app will not automatically update.
App Studio Data Services means the data is stored in Windows App Studio and depends on an internet
connection. If you update your data in Windows App Studio, your app will automatically update. This allows
you to create live apps that dont need to be updated when you want to change data.
What is an Application Section?
Application Sections are the pages of your app. You can add up to 6 distinct Application Sections to your app.
There are two types: Sections and Menus.
A Section is a group of pages that are connected to one Data Source. All Sections have a main page that shows
your data on a high level and can also have additional pages with more detailed data. Your detail pages act as a
pivot and will thus display side-by-side once you click on an individual item on your main page. For example,
the main page of your Starters Section shows an image with the name of the dish. Click on a dish, and you can
see the image enlarged and with a description below. Swipe to the right to see the price or the recipewhatever
you want to show! This is very useful, especially when there is more information about an individual item than
what can optimally fit on a single page.
A Menu is an individual page that contains a list of items that can be either Sections or Actions. Section Items
link you to a new Section in the app. Action Items let you link to an external website or complete a variety of
different actions. You can also create a custom Action Item. Each Section listed in the Menu can be connected to
a different Data Source. Menus let you show more information because they can have multiple Sections, so they
are very useful when you want to show more information than what can fit in 6 Sections.
Panorama and hub Controls
Navigation in Windows Phone 8 apps starts with a Panorama. A Panorama is a list of sections the user will see
when he or she opens the app. Everything an app can have can be displayed in a different section.
In Windows Phone 8.1 and Windows 8.1 the sections are displayed using the new hub control. For more
information see: Guidelines for the hub control
What does "Bind to data" mean?
When you start editing a page in your app, youll see a bind to data icon ( ) next to each Content item.
Binding means you connect part of a Data Source to a certain area of a page. You can see the options that are
available for each Content section by clicking on the binding icon and hovering over Data.
What does "Add an Action" mean?
When you start editing a detail page that depends on a Collection with certain data types, youll see a small add
an action lightning bolt icon ( ) for each Content item. An action is something that will occur on your phone
when you click on that piece of information in your app call a number, send an email, etc. There are a variety
of possible actions, but keep in mind that only the actions that correspond to the types of data in your Collection
will appear.
What are the different Actions?
Call Phone: Call the number (data type phone) that you entered for that item.
Email: Send an email to the email address (data type email) you entered for that item.
Nokia Music - Play Artist Mix: Play a music mix in Nokia Music for the artist (data type artist) you
entered for that item.
Nokia Music - Artist: Display the Nokia Music singer information for the artist (data type artist) you
entered for that item.
Nokia Music - Search: Search in Nokia Music for the artist (data type artist) or album (data type album)
you entered for that item.
HERE Maps - Directions: Open a map to show directions from your current location to the address
(data type address) you entered for that item.
HERE Maps - Address: Open a map that shows the location (data type address) that you entered for
that item.
Configuring Application Sections
Add a new Section or Menu by clicking on the plus sign ( ) near Application Sections. Then you can edit an
Application Section by clicking on its name. For a Section, you will see its corresponding Data Source and
Section Pages. Edit the parts of a Section by clicking on the pencil next to its name. For a Menu, you will see its
Menu Page and Menu Items that can each be expanded. To edit Menu Items, you must first click on the pencil
next to the Menu name and then click on the pencil next to the item you want to edit.
When you edit a Section, you can change the content through binding and add actions. You can also change the
layout that determines the available content fields and add Extras to the application bar, like share, text to
speech and pin to start.
Configuring Facebook Datasource
To configure a Facebook Datasource you will need to know the page name. To do so, go to Facebook, navigate
to the page you want to publish and copy it from the URL. Facebook allows you to select a page name, but if
you dont it will assign a number.
Look at your URL and select at the string to the right of facebook.com.
The Facebook configuration dialog will try to test if that page exist. Please note that whitespaces are not
allowed and that only public pages will work.
What are Style, Tiles and Splash?
Style: Change the colors of your text, background, foreground and application bar or select an image for
your background.
Tiles: A Tile is an image that represents your app and acts as a shortcut on the Start screen of your
device. All apps have a default Tile to be displayed (the smallest icon). You can also add a few more
tiles:
o Cycle template: This Tile cycles through a slideshow of up to 9 images from the Collection that
you indicate.
o Flip template: This Tile has a front and a back and constantly flips between the two.
Your small image should be 160x160 PNG and should match your app tile (icon).
The normal image should be 340x340 PNG and can be a large size of the same image or
a secondary image aligned with the brand of your app.
The back image is a 715x340 PNG panorama style image and should be aligned with
your app brand as well.
o Iconic template: This Tile is static and constantly displays the data you input.
Splash & Lock: Upload the background image that will appear on the splash screen and the lock screen.
Getting the app done
How do I get my app on my Windows Phone device?
First you must install the Windows App Studio certificate on your device.
NOTE: When you open the link to install the app you will see the Tap to open page in Internet explorer. When
you tap it, it will prompt you with the install company app dialog. When you click install the application will
be installed in the background. You will return to the internet explorer page. You dont need to tap to open a
second time. When you click the start button and swipe to the applications page the installed application will be
in the list.
For Windows Phone 8.0
Press the magnifying glass ( ) at the bottom of your device to launch Bing search, and then press the eye icon (
) that appears at the bottom of the screen. Point the phones camera at the QR code that opens with the
certificate link, and the phone will automatically scan it. Click add and the certificate is successfully installed
once it returns to the original Install the certificate page.
Once your certificate is installed and your app is generated, follow the same instructions to scan the QR code.
Accept the installation, and your app will now appear in your app list!
For Windows Phone 8.1
As well as various 3rd party QR Code readers you can use, you can also use Bing vision by doing the following.
Open your camera on your Windows phone. Press the Lenses button
( Sometimes the lenses button wont
be bound to your screen, you can do this by pressing the three dots and adding it to your bindings ) From here, a
new menu will appear with various lenses listed. Choose Bing Vision.
Remember that by clicking install you download the app. By clicking Tap to open, you add the company
certificate. It pushes you back to Install company app at that point, but you do not have to do it a second time.
At this point, go to your app menu and you will see your app. Point the phones camera at the QR code that
opens with the certificate link, and the phone will automatically scan it. Click add and the certificate is
successfully installed once it returns to the original Install the certificate page.
Once your certificate is installed and your app is generated, follow the same instructions to scan the QR code.
Accept the installation, and your app will now appear in your app list!
In order to sideload Windows Phone 8.1 apps directly to your Windows Phone, you will need to update
your device to Windows Phone 8.1 Update Preview. As a Dev Center or Windows App Studio member
you can download the app Preview for developers Click here for more information.
Install the certificate on Windows Devices
Before sideloading an Windows App Studio app on your Windows Device you will need to deploy the
certificate. This process needs to be executed once on each device.
We provide a Powershell script to help you with the certificate installation; however, this script does not work
on Windows RT, so you will need to install it manually on an RT device.
Install Certificate with PowerShell Script. First you need to download the Add-RootCertificate.zip
file. Uncompress it, and right click the file Add-RootCertificate.ps1 and select Run with PowerShell.
Then follow the instructions.
Install Certificate manually. Once you have downloaded and uncompressed the AddRootCertificate.zip, you must double click the file SymantecEnterpriseMobilityRoot.cer and select the
option to Install the certificate. You must install in Local Machine and select the certificate store to be
Trusted Root Certification Authorities
Install the App in Windows Devices
On Windows devices sideloading requires that you have had deployed the certificate and have a free developer
account in Windows Store. We provide a PowerShell script that checks this requirements for you. Once you
complete requirements the first time, the next time you install another app, it will only ask for you to complete
the sections unique to that app.
Download the installable package, uncompress the zip file, right-click the Add-AppDevPackage1.ps1 and select
Run with PowerShell. Then follow the screen instructions as shown in these screenshots.
How do I publish my app in the Windows Phone 8
Store?
If you would like to publish your app to Windows or Windows Phone Store, please follow the guidance below
to give your app the best chance of passing certification:
If you dont have a Dev Center account already, register at either Windows Dev Center or Windows
Phone Dev Center or Windows Dev Center. There is a fee for registration; however, with shared
registration, you have access to both stores with just one account.
Follow the certification requirements for Windows Phone and Windows.
Dont use template placeholder text ([insert name here]) or template app content.
Make sure you use your own unique app title, app Logo, Pin to start tile, and long description.
Reserve your app name in advance for Windows
Check out this website for the rest of the publishing steps!
Screenshots
In order to submit your apps to be published to the Windows Phone or Windows store, you will need one to
eight screenshots from your app. The publish package contains a sample of screenshots for your app; however,
you can always use your device or the emulator in Visual Studio to select the exact screenshots you want.
More information here
Windows Phone 8 Store instructions
How do I publish my app in the Windows Store?
The Windows Store requires you to reserve your App Name before you submit to the store. Once you have
reserved the name the store will assign a Package Identity. You need to know this information and your name
and ID as the publisher.
To ensure that the publish packages we generate are valid for submission we need to update the application
manifest. To do that we offer the feature Associate the App with the Store in the Publish Info tab within
Windows App Studio.
To be able to fill out this form, you can get the information for each field as indicated here:
App Identity: You need to log in to the Store Dashboard, select the app you reserved (or reserve a new
name). Click Edit, Select Services, and click the Live Services site. In this site you will see
Application Identity. You need the information in quotes (e.g 1234user.YourAppName).
App Display Name: This is the name you define when you reserve the App name in the store
Publisherd ID: You can get this information from your Account profile It should have the following
format CN=AAAAA-1111-2222-BBBBBBBBB
Publisher Name: This is the name you select when you registered in Dev Center. Its also available in
your Account profile
More information here
Windows 8.1 Store instructions
Multilingual Support
When you create an app, you can easily change the default language that will be displayed in the Windows
Store in the first "App Information" step. In order to add additional languages to your Windows Phone
application, you need to download the source code for the application and edit it using Visual Studio.
The initial resource file you use to capture UI strings that are being localized is called AppResources.resx and is
located in the apps Resources folder of your project.
On the projects Properties page in the Supported Culture box, select the language(s) you would like your app to
support. Visual Studio will create a new resource file for each supported language that is an exact copy of the
default language resource file (AppResources.resx). It will automatically rename it using the cultures locale
code, such as AppResources.en-US.resx.
Replace the default language values in each supported language resource file with translated values, and you are
done!
For additional information, please visit: How to build a localized app for Windows Phone.
How do I enable ads on my app?
In order to enable advertisements in your Windows Phone application, you need to do the following:
Obtain an AdUnitId and ApplicationId keys - Register your app at the Pubcenter site with your Microsoft
Account, create a Windows or Windows Phone app (ApplicationId), and create an AdUnitID.
Expected sizes are:
300x600: Windows 8.1
320x50: Windows Phone 8.1
480x80: Windows Phone 8.0
For more information about advanced options in the Pubcenter AdControl, please visit: Integrating the
AdControl Using the Visual Designer.
How do I run "Windows App Cert Kit"?
If you plan to publish your application, you must follow the Windows Store requirements or Windows Phone
Store requirements in order to pass certification.
You should use the Windows App Certification Kit (WACK) before submitting to the store. To run this tools for
App Studio Packages you must follow these instructions:
Prerequisites
Install the Windows Software Development Kit (SDK) for Windows 8.1 so that you can run the
Windows App Certification Kit (WACK) 3.3. This SDK will run on any x86 or x64 PC running
Windows 8.1
Windows Phone 8.1
Rename the file from .appxupload to .zip
Uncompress the zip file to extract the .appx file
Run the WACK tool and select Windows Phone Validation
Indicate the absolute path to the .appx file you extracted previously
Once the tool finishes, it will ask where to store the output report as .xml
Windows 8.1
Install the Windows Software Development Kit (SDK) for Windows 8.1
Uncompress the zip file to extract the .appx file
You will need to run the command line version of the tool appcert.exe, located at:
%ProgramFiles(x86)%\Windows Kits\8.1\App Certification Kit\ with the next parameters:
appcert.exe test -apptype windowsstoreapp -appxpackagepath <PATH_TO_APPX>
-reportoutputpath <PATH_TO_OUT_REPORT>.xml -resettesting
Download the Publish Package
Download the Installable Package
Using the YouTube Data Source
Add a YouTube Data-Source to a section by clicking the plus sign on The YouTube selector under Basic
sections as shown in figure 1.
Next, you will be presented with the configuration box for the YouTube Data Source (see figure 2).
This configuration box gives us three options to customize what and how information will be displayed,
as shown in figure 3.
1. Search The Search configuration allows you to enter a certain Search term and then the YouTube
Data-Source will display all videos that come up under that term.
2. User The User configuration allows you to display all of the videos from a certain user channel.
3. Playlist The Playlist configuration will display all the videos in a certain playlist of your choosing.
How to use each one
Lets start with Search as it is the simplest option.
1. Select Search in the dropdown menu and then enter your search term in the lower box (figure 4).
2. Click confirm and then the videos for that search term will be displayed.
Now we will configure the User option.
1. Select User from the dropdown menu and then enter the username of the channel you would like to
display in the bottom box.
2. To locate the name of the YouTube user you want to display navigate to their YouTube page and check
the navigation bar as shown in figure 5.
3. In the address bar you will see the /user/denotation followed by the User name we are looking for.
Take that and enter it into the lower box in the YouTube Data Source configuration box as shown in
figure 6.
4. Click confirm and see all of the users videos that you have selected, populate in the You-Tube Section in
your app.
Now we will tackle the Playlist option.
1. Select Playlist from the dropdown menu and enter the playlist ID or search for the playlist name of the
playlist you would like displayed in the bottom box (figure 7).
2. To locate the playlist ID from YouTube, find the playlist you want to display and then check the
navigation bar. You should see http://www.youtube.com/watch/<random string of numbers and
letters>&list=<another set of random numbers and letters>. This set of numbers and letters following
the $list= is the playlist ID we seek.
3. Take that playlist ID and enter it into the upper box of the two lower input boxes as shown in figure 8.
4. Click confirm and see all of the Playlist videos that you have selected, populate in the YouTube Section
in your app.
If you would like to see this tutorial in video form, you can find it on YouTube HERE.
Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure 7
Figure 8
Using the Twitter Data-Source
The Twitter Data Source allows you to display Tweets from a timeline or hashtag search to the users of your
app, without requiring them to have a Twitter account for up to the minute information sharing with minimal
hassle.
Using the Twitter data source in an app studio project takes a few different steps. We will use this guide to walk
you through the process step by step.
1. Add the Twitter Data Source to your app by clicking the + Sign on it. Once added to your app, the
following dialog box will appear (figure 1).
2. Click on the text below the Data Configuration section that says Click here to create a new Auth Key
which will take you to the screen shown in figure 2. From here you will need to open a new tab in your
browser and navigate to https://apps.twitter.com and login with your Twitter account.
3. Now you will click on the grey button in the top left with the text Create New App. From here you
will need to fill in all of the necessary fields that Twitter requires for app creation as shown in figure 3.
4. Once you fill in all of the previous fields, check the box and click the box with the text Create your
Twitter application It will bring you to the Application Settings page which will reveal all of your
relevant Twitter information as shown in figure 4.
5. The final step on the twitter site will be to generate an access token. To do this, at the top of the page
click on the blue text Keys and Access Tokens and then click Create my access token This
combined with the previous information will give you everything App Studio asks you for above.
6. Now, go back to Windows App Studio and input all of the relevant data requested for your Twitter DataSource in the spaces as follows in figure 6. Make sure you have not copied any extra spaces before or
after the characters.
7. From here you can now go back to your Twitter Data-Source section, and use the Data configuration
dropdown menu to select the new auth key you just provided in figure 7.
8. Finally, press the confirm button and go see your newly populated twitter data in your Windows App
Studio app.
*Note Part of the images have been whited out for account security.
*Note - To maintain the Twitter auth keys you possess, simply click on your username (email address) in the top
right corner of the Windows App Studio website and it will show you all of the different keys you have
registered and from there you can add more or delete ones you no longer need.
Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure 7
Using the Instagram Data Source
The Instagram Data Source allows you to display photos from the hashtag search function to the users of our
app, without requiring them to have an Instagram account for up to the minute picture sharing with minimal
hassle.
For Projects with a New Instagram Data Source
Utilizing the Instagram Data Source in your Windows App Studio project takes a few different steps. We will
use this guide to walk you through the process:
1. Click on your username (email) in the top right corner of Windows App Studio.
2. Click on the button that says Create New Auth Key as shown in figure 2.
3. This will open up the following screen shown in figure 3 where you will click on the text that says
"Click Here to Create and Maintain your Instagram Clients" (figure 3). Clicking that button will take
you to the following where you will click on the Register A New Client button (figure 4).
4. You will need to fill in all of the necessary fields that Instagram requires for client creation as shown in
figure 5. Once you fill in all of the previous fields, fill in the captcha and press the Register Button to
complete the Instagram Client creation which should auto-redirect you to the previous screen where you
see figure 6.
*Note If you do not have a website URL of your own, You can fill in both the Website field and the
OAuth Redirect_URL Field with http://appstudio.windows.com
5. Now you will want to copy the CLIENT ID set of digits and bring them back to the Windows App
Studio Auth Key section and paste them in the Client ID Field as show below and click Validate (see
figure 7). Once you do that it will bring you back to the Windows App Studio Auth key management
section like figure 8.
6. From here open the Windows App Studio project that you would like to add Instagram to, and click on
the + sign to add Instagram to one of your App Studio sections, the Box shown in figure 9 will pop up.
7. Select the data configuration you just created, enter a hashtag search without the hashtag and press
confirm. This will complete the configuration of the Instagram section and display the images with the
hashtag you chose.
For Projects with an Existing Instagram Data Source
For those of you who have used the previous Iteration of the Instagram Data Source and now need to fix it, the
following steps are for you.
Open Windows App Studio and pick the project with an Instagram Data Source, Click Edit to the right
of the project and that will open you to the page where you can edit all of your sections.
Find your Instagram Section and click Edit like figure 10.
From there click on the Data Tab which will bring up all the information related to creating your Client
for Instagram Then click on the Blue words Click here to create a new Instagram key (figure 11).
From this point you will be able to follow steps 1 through 7 in the previous section of this post titled
For Projects with a New Instagram Data Source.
*Note Part of the images have been whited out for account security.
Figure 1
Figure 2
Figure 3
Figure 4
Figure 5
Figure 6
Figure 7
Figure 8
Figure 9
Figure 10
Figure 11
