Windows App Studio MSDN blog forum page

Certificate-related Generation Issues Solved - Debrief and instructions on re-generating your apps

Windows App Studio Support Team — Tue, 23 Aug 2016 16:26:43 GMT

Hello, and we hope everyone is doing well in these late summer weeks. We apologize for the recent issues over the past couple of days when trying the generate or install Windows App Studio apps. The issue was that a certificate expired and the renewal notice was sent to the wrong email address, meaning that we didn’t find out until the generation broke due to the certificate being expired. We made sure to update all contact info so this won’t happen again, but this time it was our fault, and we regret the delay it took to get it working again. The good news is that the certificate is renewed and everything is good to go. Any generations of your projects should now work. If you previously generated an app in the past couple of days with the expired certificate, please re-generate your app and everything should work. Windows 10 For Windows 10 projects, things should “just work” now. Please re-generate your projects and use the Windows App Studio Installer app to install them (if you’re sideloading). Everything should run as it normally does. If it doesn’t, please email appstudiosupport@outlook.com and we’ll help out. Windows 8.1 For Windows 8.1, there is one extra step that you need to do. The pre-requisite certificate needs to be re-installed, but don’t worry, it’s easy. When you re-generate your Windows 8.1 project, you’ll notice links for the Windows 8.1 Desktop and Windows 8.1 Phone certificates (see screenshot). Please just download, and reinstall them. Installing the Desktop Certificate

Download the zip file from the link and extract it.
Find the file named “Add-RootCertificate”, right click it, and select “Run with PowerShell”
(Please click “Open” if the security warning appears)
PowerShell will open, and then follow the instructions. If it prompts you to make changes to the computer, allow it.
When the second PowerShell window opens, type “r” to “Run Once”, and then “y” for Yes to confirm.
This should install the certificate.

Installing the mobile certificate

Click the link on the generation page, which will launch a QR code. (Download any QR code app from the store and scan this code with your phone camera if needed)
Click on the Website URL on the Phone (it might ask you to login with your Microsoft Account).
Click on “Open”, then click on “Add”, then click on the Windows icon on the Phone.
This should install the certificate on the phone.

If you would like a bit more detailed instructions on certificates and sideloading, please visit the Sideloading section of the Help Docs. Please reach out to us if you have any issues, and again, we apologize for the generation downtime. Thanks for using Windows App Studio and have an awesome day!

How to use the new REST API Data Source

Windows App Studio Support Team — Tue, 07 Jun 2016 16:00:31 GMT

Hi everyone! As you can probably tell, we’re pretty excited about the REST API data source. If you haven’t seen our post about the release on the Building Apps for Windows blog, you can check it out here. Since this new feature is a bit more complicated than the average data source, we thought it would be best if we posted a short little tutorial on how to use it. For this tutorial, we’ll focus on the most basic use case, which is to pull a bit of information from a REST API that is open and does not require an API key. Once you understand how to do this, you’ll know enough to jump into creating more complex apps using this REST API data source. Getting Started The first step is to know what REST API you want to use and what data you want to get out of it. Today we’re going to be making an app that displays information from WordPress. So to get started, open up https://appstudio.windows.com and log into your account. Once you do that, start a new project and begin with a blank template. When you’re on the main content editing area, add the REST API data source as a section. Leave the REST API URL blank since we will use this one for the demo. However, if you wanted to use your own, just enter the URL in that area and click on the “Check API” button to confirm everything is correct. If the API you’re using requires the use of headers, you can enter that information below. When you are ready, click the arrow and move to the next step. Setting the Root The next section is called “Root”, and this is where you tell the tool what group of data you are thinking of pulling. Generally, in this step there is the content you want, and something often labeled “meta”. Since we’re looking to pull in posts from WordPress, we’ll select that. Once you’ve selected the root of the data you want to pull, click the right-facing arrow to move to the next step. Selecting the Identifier/ID In this step, the tool needs you to tell it what the identification field is called. For any object/data you’re pulling, there is a unique ID associated with it that the service uses to keep things organized and operate properly, Windows App Studio needs to be told what that is since it can vary across different APIs. In this example, it’s simply just called “ID”, so select that and confirm it shows in the top box. When it does, click on the right-facing arrow to go to the next step. Mapping the Response This is the main step where you map the data from the API to the data objects in your app. In this step, you should look through the properties and decide what you want to show. For this example, we’ll select, Title, Author Name, URL, Featured Image, and the Content. So browse through the properties to find them, single click the ones you want, and then define the Column Type for each. Once you have all the data you want and it’s properly organized and set to the right Column Type, click the right-facing arrow to go to the next step. Defining Pagination Pagination is a complicated word that can simply be thought of “How many records am I pulling per batch?”. This section will ask you if the REST API supports pagination. Some do and some don’t, so look up the details in the given service’s API documentation. If it doesn’t, skip this step. If it does, then select Yes and see new options appear on the page. With the new options, you’ll be able to define the pagination type, the Pagination parameter name (look this up in API documentation for the given service as it will differ across different APIs), the initial value, and if you want to configure the page size. If you do configure the page size, you will need to enter in the Page Size Parameter name as well as the value you want. This step is a bit more confusing than the others, but the good news is that if you leave it with the defaults, things will probably work. If you’re struggling with this at all, just play around with it and it will likely click and begin to make sense. You can’t break anything here, so have some fun with it. When you’re ready to move to the next step, click the right-facing arrow. Defining the Order If the API supports it, you can select a custom order for the data you’re pulling. This step is very similar to the pagination step. For this, you will look at the API documentation to find the properties for the “Order By” parameter and the “Order Direction” parameter. When you have those, just enter the values of your choosing. Once you do that, you’re all done with the configuration. Click the blue Confirm button and you’ll have a REST API data source in your app. At this point, you can manage your section bindings, stylings, and everything else just like you would with any other data source. Conclusion This is an extremely powerful tool and enables you to bring the wealth of the web’s data into your apps. We’ll be working on building out this feature over future releases as well, so expect this to become much more robust and guided in the future. If you have any questions, concerns, or recommendations, we’d love to hear from you, so leave us a comment below or find us on the forums and User Voice. Thanks for reading and happy app building!

Instagram data source issues

Windows App Studio Support Team — Fri, 29 Apr 2016 17:02:54 GMT

We have learned of issues with the Instagram data source. Due to API Changes on their side, our integration no longer works for users who have previously not set up an API key. Users who already have an API key are largely not affected. We're actively investigating and working on this. Since some of this is out of our control and we have a dependency on Instagram to solve this, we unfortunately cannot give an ETA yet. Thanks for your patience and we hope to have it back up soon.

Windows App Studio April 2016 Update - Installer companion app

Windows App Studio Support Team — Wed, 13 Apr 2016 17:08:28 GMT

As users of Windows App Studio , you know that it’s an easy-to-use tool for building Windows apps. You also know that the sideloading and installation process has been a bit complex by comparison, since it required running PowerShell scripts and deploying a certificate in a somewhat manual way. Since you told us that it was a bit of a pain point, we spent some time to solve the problem. Today, the Windows App Studio team is excited to deliver on your requests by officially announcing a brand new companion app designed to make the sideloading and installation process easier: the Windows App Studio Installer app. The Windows App Studio Installer app is currently available in the store for Windows 10 devices. The installation process is now as simple as two mouse clicks. Behind the scenes, the app checks to see if the necessary certificate is installed, and if it’s not, the app installs it automatically. If necessary, it will then guide the user through enabling sideloading mode in Windows 10 and open the proper settings page. Once those things are in place, it installs the appx on the local computer.

Here is how it works:

Installing Apps

Generate your app in Windows App Studio and build an installable package.
Click the link to install the app.

The link will open up the Installer app, and from there, all you need to do is click the install button. Note: If you are not already in sideloading or developer mode for Windows 10, this tool will also prompt you to make that change and automatically open the correct settings page.

Once you click “Install,” the app deploys the certificate (if necessary) and installs the app. Once the installation process completes you can open it from the Installer app, or however you normally prefer to open programs, like with the Win key + app name shortcut.

Sharing Apps

With the Installer app, it’s now much easier to share apps with your friends and family, regardless of their level of expertise with Windows.

When you generate installable package, look for links just below the install button for sharing via email, Twitter, and Facebook.

Click one of those links to share your app through email, Facebook, and/or Twitter.
Whoever you shared it with will get a link to a page about your app and will have the link to download it with the Installer app.

Once they click “Install App” on the page, it will open up the Installer app. It’s just one more click from there to install the app.

We hope that this tool makes it a lot easier to install and share all the great apps you’ve been building with Windows App Studio. This is the first version of this companion app, so we’d love to hear your thoughts on what works well and what can be improved—let us know on the Forums or on User Voice. We’re looking forward to adding more features to this tool in coming release and would love to incorporate your feedback.

Windows App Studio February 2016 update – agenda layout, searching in apps, and other new features

Windows App Studio Support Team — Mon, 22 Feb 2016 09:00:00 GMT

The Windows App Studio team is excited to announce a new update to the service that went live this morning, and this update is packed with robust new features. This update is the first of 2016 and contains new features, some bug fixes, and improvements in the user experience and documentation. With over 200 million Windows 10 devices out in the wild, Windows App Studio provides a great way to reach them directly with your content.

One of the major themes that we’ve been focusing on lately is providing great solutions for small businesses, creatives, and content producers that want to showcase their work. With that goal in mind, many of the new features are designed to help showcase information and provide more advanced user-focused features so you can better engage with your customers and audience.

New feature highlights:

Grouped layout – Windows App Studio now supports grouping data based on a data point. This feature lets users represent their in groups based on certain criteria. This could be used when displaying a list of products grouped by brand or other data point. It can also be used to group things based on date or time. For example when used for the events template, this lets the user create an agenda or schedule. This feature introduces a lot more flexibility into how you can display your data.

Date & Date/Time data type – We introduced two new data types for our collections: Date and Date/Time (Date + Time w/ minutes precision). This allows you to append date and time info to any collection entry, which in turn enables a lot more experiences such as organizing information by time. To support this feature, there is a new date/time picker, new calendar formatting options, and new calendar actions so the end user can add events to their personal calendars. In addition to the collections data source, Date and DateTime data types can be used among all the data sources of Windows App Studio that have date times fields (RSS, WordPress, Facebook, Twitter, etc.), allowing you to take advantage of the DateTime formats and use these data sources with the new Grouped Layout.

Search within app –With this release, we’re delivering a long-requested feature: enabling search within an app generated in Windows App Studio. This lets users search through an app to find specific content, which is particularly helpful when there is a lot of data.

Collection favorites –Now your end users can have the option to save any data from your collections as their favorites into a favorites section. If you enable this for their users, as they browse your collections they can mark certain entries as their favorites to save for easy browsing later.

Service improvements – In this release cycle, we also improved the back end of the App Studio service to make your experience smoother. This included updating the app generation model to use VS2015 Update 1 (which means developers can target more devices) and improved and updated how-to documentation.

We also are excited to announce that later this month we will kick off a contest to showcase the great Windows 10 apps you are creating with Windows App Studio. For the contest, we will select the best Windows 10 apps that are published to the store, and 6 of them will be featured on the Windows App Studio homepage! We are still finalizing some of the details on the contest and will post official rules and details in the next two weeks, so check back for it soon!

There are a ton of great features packed into this release and we only touched on the surface of everything these new features enable. We’ll be going through some deep dives into each of these over the coming weeks. As always, we’d love to hear your feedback on the new features. So please let us know your thoughts on the forums or User Voice.

Windows App Studio December 2015 Update

Windows App Studio Support Team — Tue, 22 Dec 2015 09:37:00 GMT

It’s the end of the year and the holiday season in many parts of the world, so we have one more release this year to celebrate all the App Studio enhancements in 2015, such as the launch of Windows 10 and the November Update. Today’s Windows App Studio Beta update brings some exciting new features that we can’t wait for you to use. There are a couple of big new features, some significant design related improvements, and fun and useful new templates.

The new features in this release focus on things that help empower small businesses, professionals, and organizations to create great apps for Windows and better connect with their customers.

WordPress Data Source – We introduced a new WordPress data source that lets you connect your app to your WordPress blog. It pulls in content and displays it beautifully in your app so you can free your blog from the web and get it in front of 110+ million Windows 10 users by publishing it to the Store.
Related Content – Did you ever want to show related content in a section (such as speaker information for an event listing in a Convention app, or comments from a blog post)? Now it can be easily done in Windows App Studio Beta. This feature opens up new use cases and we will show them off in new templates in the future.
Microsoft Advertising – It’s great to have people using and enjoying your app, but it’s even better when those eyeballs translate into revenue! Now included is the Microsoft Ad control, which means you can now place advertising in your app to make money from people using it.

Recognizing that great design is core to quality user experience, we also put time into building features that customize of the look and feel of the apps created in Windows App Studio. These features let you set the look and feel you want for each section of your app, taking advantage of media-rich designs. :

New Carousel Control – Sometimes you want to showcase a selection of images in your app. The Carousel lets you display a number of hero images in a single section that behave like a slideshow.
Improved Section Design Features – We added a few more features to help make your apps look great. Now you can change the background and adjust the hero image for each section individually and choose how each section appears on the default/home section of your app.

What’s the best way to get started with these features? With the new templates we’re releasing! These templates show off the new features and make it easy for you to become familiar with and use them.

WordPress Template – Showcases the new WordPress data source and is an excellent way for you to break out of the web and bring your WordPress blog to the Windows platform and Store
Events – This template uses the new Related Content feature to help you build an informative app for all of your event attendees.
My Shop – Leverage our new design features in this template and show off your catalog of products. This template also adapts nicely to portfolio situations for photographers, artists, designers, and anyone who creates or sells content.

We would love to hear your feedback on these new features and see the great ways you take advantage of them for the apps you build. As always, you can find us on the forums and User Voice. Also, if you have a great story to tell about your experience using App Studio, please tell us. Have a great rest of 2015 and we look forward to an exciting 2016.

Let’s build some apps!

-Windows App Studio Team

Deep Dive: Windows App Studio NuGet packages for Windows 10 Apps

Windows App Studio Support Team — Wed, 25 Nov 2015 15:33:00 GMT

Hello everyone! We hope you've been having a great November. It's so exciting to see how much everyone has been using and enjoying the new Windows 10 features in Windows App Studio that were released as a part of the update at the beginning of the month.

Today we want to get a bit technical and dig into one of the aspects of Windows App Studio that's designed to help when extending your app in Visual Studio, which is the use of NuGet packages. NuGet allows for the easy production and consumption of packages, so it can help speed things up when developing apps.

We currently have two published NuGet packages that Windows App Studio uses to generate the code for Windows 10 Apps:

Windows App Studio UWP Controls: This library contains the UWP/XAML controls used in Windows App Studio to create responsive Windows 10 apps. This library encapsulates different XAML controls used to represent information in the apps as well as other base application services like caching, navigation and commands.
Windows App Studio Data Providers: This library enables the applications to retrieve information from several Internet services (aka data sources), define the schema of the information, handle the data parsing, and manages the complexity of the authorization for those data sources that require it.

The packages are published under the Windows App Studio account in NuGet. All source code is available in the team GitHub account, under the open source waslibs repo. That repo contains the source code for the libraries as well as for the samples and tests. We are totally open to the community so feel free to fork the source code and propose changes by making a pull request.

Windows App Studio UWP Controls

As mentioned before, this library is used in the Windows 10 apps generated with Windows App Studio. The library implements common patterns used in UWP applications as well as provides some user interface controls that help the developers to create responsive apps that adapt to different form factors. The library contains different namespaces, and the following are the most relevant:

Actions: Generalizes the way the developers add commands by providing a list of actions that are automatically added to the app command bar.
Cache: Provides a caching service that can be used to store information locally, thereby not requiring access external data every time a page renders information.
Commands: Contains the definition of different commands based on the Relay Command pattern.
Controls: Contains the XAML controls used to present information, of which the most notable are:
- ReadingWebView: XAML control based on the WebView control to render HTML content in the pages.
- ResponsiveGridView: Responsive control to present information within a GridView. It reacts to changes in the layout as well as the content so it can adapt to different form factors automatically. The number and the width of items are calculated based on the screen resolution in order to fully leverage the available screen space.
- SectionList: A responsive control that renders the information from sections vertically, it is used to create the home page for Windows App Studio apps.
- VisualBreakPoints: Enables the definition of different visual breakpoints for a certain layout as well as modifies the properties of child controls based on the defined breakpoints. The main advantage over the platform “Visual State Manager” control is that all the visual breakpoints can be defined in a centralized JSON file and allows for the modification of properties inside one or more DataTemplates.
- Navigation: Provides the navigation service for the app, simplifying the management and improving the handling.

We recommend heading over to UWP code samples on GitHub for detailed usage and documentation of these controls and services.

Windows App Studio Data Providers

Within the Data Providers library, we concentrate the code that enables our generated apps to access data from different data sources. For Windows App Studio, a data source is any source that returns elements to be displayed within the app.

Any Data Provider for Windows App Studio app is created based in four pillars:

Configuration: This is the configuration necessary to access the data source. It would be as simple as a URI for a RSS data source or a bit more complex as the APIKEY and the hashtag for a Twitter data source.
Schema: Contains the definition of columns for each element returned by the data source. The schema is used by the layouts to finally display the information.
Parser: Contains the implementation to convert the raw information returned by the data source to the resulting elements according to the defined Schema.
Provider: The is the implementation of how to retrieve the requested data for a concrete source. For example, given an RSS data source, we implement a simple http request, for a Twitter data source we need to ensure the authorization policies to be able to access the Twitter REST API

Windows App Studio Data Providers library contains the implementation to retrieve information from several sources, thereby hiding the complexity of dealing with each concrete implementation. We currently support some of the most popular sources of information on the Internet, such as: Twitter, Facebook, Flickr, Instagram YouTube, Bing and generic RSS.

Since all the information in Windows App Studio generated apps is for data sources, we also have Data Providers (which follow the same rules) for: HTML sections, Menus, Local Storage (aka Static Collections), and Dynamic Storage (aka Dynamic Collections).

For more information and references, access our Data Providers sample code on GitHub.

Windows App Studio Release – Windows 10 Store Package support and other new features

Windows App Studio Support Team — Thu, 29 Oct 2015 17:01:00 GMT

The Windows App Studio Windows 10 Store Support Release is now available, allowing you to easily create and publish a universal Windows app in record time with no code required. This release builds on the foundation created with July’s App Studio Windows 10 Preview release. You can directly submit your app to the Store through Dev Center, now with no intermediate step in Visual Studio required. In addition, this release brings a host of other new features.

New Features:

Windows 10 Store Package with Screen Shots

Windows App Studio now generates a Store package for your Windows 10 apps, including automatically created screenshots for the Store listing.

Immersive Simulator (full screen web view)

No one wants to preview their app only in a tiny viewport. Included with this release is a big full screen simulator into Windows App Studio. Now it’s easy check out the app you’re building and interact with it in a full screen mode as you’re working on it.

Windows App Studio Collection App

Wouldn’t it be great if you could easily manage the contents of a collection for an app without making any update to the app itself? Now you can with the newly released Windows App Studio Collection App available here. This app lets you easily manage the collections for all your apps in real time without the need to go to the Windows App Studio website. Update the data in the app and it will update the data in your relevant projects and apps with no additional actions required.

Live Tiles Editor

You can now design dynamic Live Tiles for your Windows 10 apps from within Windows App Studio. This will work on any Windows 10 app you create with the exception of Hosted Web Apps. With this tool, you fully customize your Live Tiles to make your app more dynamic for your customers when they view it from the Start menu or on a Windows 10 mobile device.

…and more, including:

Advanced theme and icon editors
Better sideloading support for Windows 10 apps
Hero Image Editor
Improvements to the UX in apps generated with added visual features
Initial Windows 10 IoT support
Windows App Studio NuGet packages
Source code on GitHub for libraries and sample apps

As many of you already know, with Universal Windows apps the same app can run on PCs, Mobile devices, and Raspberry Pi 2s and other IoT devices. Windows Universal apps generated in Windows App Studio will share all of this great functionality and they’ll run on a wide range of devices.

For those of you with existing Windows 8.1 projects in App Studio, with just a couple of mouse-clicks, you can upgrade your project to Windows 10. All you need to do is to navigate to your Windows 8.1 Projects page, and click on the “Convert” icon for any app(s) you’d like to upgrade. It really is that easy.

Enjoy the new Windows App Studio release and let’s go build some apps!

Windows App Studio update for Windows 10 launch

Windows App Studio Support Team — Thu, 30 Jul 2015 11:32:00 GMT

We are excited to announce an update for this July in App Studio to coincide with the Windows 10 release. We worked hard to both update App Studio for Windows 10 and introduce some new features that are designed to improve the quality and capabilities of apps you create.

Here is a sampling of just some of the new features we introduced:

- Responsive design using visual break points

- Redlines for every layout

- New reading web view

- New nuget packages

- Open source core libraries in GitHub

- Simplified generated code

In addition to adding features that improve the quality of the apps, we also improved the features of App Studio itself. The major changes are:

New Windows 10 simulator – We have a new simulator that is capable of showing the great experiences that come with Windows 10. We think you’ll love this improved feature.

New Dialog to start Windows 10 apps – While this is still in preview mode, we have introduced a new path that allows you to create apps for Windows 10. This is the new default option for building apps. At the moment, you can only generate code for PCs and Tablets, but Phone will be activated later for Windows 10 Mobile is ready.

Convert apps from Windows 8.1 to Windows 10 – We built a nice tool to help you easily upgrade your apps from Windows 8.1 to be fully Windows 10 compatible. We hope that this makes things easy for you!

Hosted Web Apps (HWA) – This is the new version of the Web App Template (WAT) for Windows 10 designed to take advantage of the new version’s features. WAT still exists for 8.1 apps too!

We are also excited to announce that we just aligned our infrastructure to the just released Windows and Visual Studio RTM, so no need to worry about maintaining installs of the RC client!

We are also working on another release that will be available in the next couple of months. We’re building some great things, so we can’t wait to show you. As always, we’d love to hear your suggestions and comments, so head on over to the Forums or User Voice to let us know what’s on your mind!

Happy app building!

-The Windows App Studio Team

How to add a YouTube DataSource in Windows AppStudio

Windows App Studio Support Team — Mon, 23 Feb 2015 18:31:00 GMT

Here are the simple steps to add a YouTube DataSource in Windows AppStudio:

1. Click on and click on DataSource.

2. You would see the below screen.

a. Change the YouTube section name if you want.

b. Next, create a new YouTube key.

3. This will take you to a new screen as shown below:

Click on the highlighted section. This will connect your free YouTube developer account with your Windows AppStudio app.

4. This will take you to the Google Developers page. Login with your standard Google user name and password.

5. Click on ‘Create Project’.

6. Enter a ‘PROJECT NAME’ and ‘PROJECT-ID’ and click on ‘Create’.

7. Now, the YouTube API needs to be switched ON. To do this

a. Click on APIs.

b. Scroll down the screen till you find ‘YouTube Data API v3’ and click on ‘OFF’ to switch ON the API.

c. Once it is switched on the API is visible in the ‘Enabled APIs’ section

8. Now we need to pass the credentials to the App. To do this click on ‘Credentials’ and then click on ‘Create New Key’.

9. Click on ‘Browser key’

10. Click on ‘Create’

11. Copy the API KEY.

12. Paste the API KEY in the Windows AppStudio Section and click on ‘Validate’. Ensure that there are no additional spaces before or after the Api Key. This is a common issue that can cause errors.

13. The API key is registered now.

14. You will be able see the key name in Data Configuration.

15. Select the ‘API Keys’ and type in the YouTube channel name.

16. You will be able to see the channel videos in the preview screen.

2.png