Creating apps with redesigned App Studio

Recently Microsoft has updated App Studio with redesigned UI, a rebuilt emulator, image conversion and more templates. Also the site has become more touch friendly which enables you to design and create app from your touch first devices like phone, phablet, tablet etc. With this changes there are some variations made to the workflow from the earlier one and with this post I am going to help you in creating apps using the new interface.


When you login to the refurbished website for the first time, all your apps will be automatically regenerated so that all the apps confronts to the changes made to the website and your new dashboard will be like the image given below.




For creating a new project, click on the Create New Project link and you will be redirected to the template page, where you will have the option to select a pre-defined template or an empty template using which you can start from the scratch.




From here I have selected Empty App option and you will be presented with a model window where you will click on the Create button.




The big change to the site is in this section. In the earlier iteration we were used to have a wizard like interface, which is now replaced with a tabbed layout as shown below.




So let’s design our app by creating a section which will be using Collection as the data source.






In the Add Collection screen, we will select Dynamic Resources for out data, which is stored in the cloud and will be easier to play with the dynamic data in the long run and also a name for the section in given here. Next we will add columns to our collection to show the data in the section by clicking on the Create New. Here you will have option to add columns with different data types as shown below.




Once you are finished your edit section will list the newly created section and you have the option to edit the same if you are not happy with anything.




Like the option to edit the section, you will also have the option to edit the data source too.


Now let’s dress up our app in the next screen, where you can select a predefined dark or light coloring style or make a custom one which I had done as shown below.




In the next tab, we will select the tile template for the app and also splash and background images.







The Publish Info will let you change the logo, add Title if not and a description which will be displayed along with the title in the store. Also there are option to include an about page and an option for adding ad client in the source code once it’s generated.




Reference :  Creating WP Apps Using App Studio

No Comments

Add a Comment