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. 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 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 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

  • 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.0

Press the magnifying glass (Search icon) at the bottom of your device to launch Bing search, and then press the eye icon (View icon) that appears at the bottom of the screen. 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!

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 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 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 8 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