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

  • 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 app’s 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.

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 you’ll need that if you decide to publish your app. Now it’s time to add Application Sections and Data Sources.

Templates

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 store’s 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.

Data Sources

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.

DataSource Types

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.

Collections

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 don’t need to be updated when you want to change data.

Static Resources vs. App Studio Data Services

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 recipe…whatever 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.

  • Sections
  • Pivots

Panorama and hub Controls

Navigation in Windows Phone 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

  • Panorama
  • hub

What does "Bind to data" mean?

When you start editing a page in your app, you’ll see a bind to data icon (Bind 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. Binding

What does "Add an Action" mean?

When you start editing a detail page that depends on a Collection with certain data types, you’ll see a small add an action lightning bolt icon (Add action 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.

Add action

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.

Action types

Configuring Application Sections

Add a new Section or Menu by clicking on the plus sign (Add section icon) 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.

Section configuration

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 don’t 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:
    • Cycle template: This Tile cycles through a slideshow of up to 9 images from the Collection that you indicate.
    • 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.
    • 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.

Style

Tiles

Splash

Getting the app done

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 don’t 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.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 Search icon( Sometimes the lenses button won’t 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 phone’s 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.

Windows App Studio certificate

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 Add-RootCertificate.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 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 don’t 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.
  • Don’t 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 Store instructions

Publish

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. It’s 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 app’s Resources folder of your project.

On the project’s 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 culture’s 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.

Ads enabled

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

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
  • Wack WP8.1Download the Publish Package
  • Wack W8.1Download 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

Let’s 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.

  • YouTubeFigure 1
  • YouTubeFigure 2
  • YouTubeFigure 3
  • YouTubeFigure 4
  • YouTubeFigure 5
  • YouTubeFigure 6
  • YouTubeFigure 7
  • YouTubeFigure 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 Data-Source 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.

  • TwitterFigure 1
  • TwitterFigure 2
  • TwitterFigure 3
  • TwitterFigure 4
  • TwitterFigure 5
  • TwitterFigure 6
  • TwitterFigure 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.

  • InstagramFigure 1
  • InstagramFigure 2
  • InstagramFigure 3
  • InstagramFigure 4
  • InstagramFigure 5
  • InstagramFigure 6
  • InstagramFigure 7
  • InstagramFigure 8
  • InstagramFigure 9
  • InstagramFigure 10
  • InstagramFigure 11

Using the Flickr Data-Source

The Flickr Data Source allows you to display photos from the hashtag search function as well as from a specific user account, to the users of your app, without requiring them to have a Flickr account.

  • Add the Flickr Data Source to your application Sections. This will open the following dialog box (figure 1).

From here we have two different configuration options. The User configuration, or the Tags configuration. We will start with the Tags configuration as it’s the quicker process:

  • Select Tags from the dropdown and Enter your Tag, or tags separated by commas and then press confirm (figure 2).

Now we will work with the User configuration option:

  • Add the Flickr Data Source to your application Sections. This will open the following dialog box (figure 3).
  • Open a new browser tab and navigate to – http://idgettr.com/ and paste in the full http link of the user account you would like to find the user name for and press the find button (figure 4).
  • Copy the id: and paste it into your Windows App Studio Flickr Data Source in the proper box shown in the image above and press confirm to display the selected users picture feed (figure 5).
  • FlickrFigure 1
  • FlickrFigure 2
  • FlickrFigure 3
  • FlickrFigure 4
  • FlickrFigure 5

How to add a TouchDevelop app in App Studio

  1. Login to App Studio.
  2. Under Advanced Sections select ‘TouchDevelop’ (figure 1).
  3. Click on ‘Search’ (figure 2).
  4. Enter the TouchDevelop App name and click on ‘Search’ (figure 3).
  5. Click on ‘Select’ (figure 4).
  6. Click on ‘Confirm’ (figure 5).
  7. You will be able to see the TouchDevelop the application section.
  8. To change the Section name click on ‘Edit’ (figure 6).
  9. Type in the name of your choice and click on ‘Save’ (figure 7).
  10. You will see the updated App name in application section (figure 8).
  11. Your app is ready to get published!!!

NOTE: Not all scripts are supported at this time. View this document in TouchDevelop for more information on current limitations.

  • TouchDevelopFigure 1
  • TouchDevelopFigure 2
  • TouchDevelopFigure 3
  • TouchDevelopFigure 4
  • TouchDevelopFigure 5
  • TouchDevelopFigure 6
  • TouchDevelopFigure 7

Using the WAT Template in Windows App Studio

The WAT Template in Windows App Studio allows you to turn your mobile friendly, responsive websites into a top quality Windows & Windows Phone App with only a few clicks!

  1. Open windows App Studio and Press the Start New Project button (figure 1).
  2. Choose the Web App Template (figure 2).
  3. When the preview appears, press the “Create” Button (figure 3).
  4. Enter the URL Of the website you would like to turn into an app, Into the Base URL box (figure 4).

    *Note – For best results you will want to use a mobile friendly, responsive web site.
  5. From Here press the “Save” Button in the top right corner. That’s it! Your website is now wrapped and ready to be turned into a Windows and Windows Phone app!
  • WATFigure 1
  • WATFigure 2
  • WATFigure 3
  • WATFigure 4