Article 4 from 30 : Understanding default template for SharePoint hosted Apps

This post is article 4 from the 30 Articles App series for SharePoint

Understanding the Canvas for painting your App

 

This was the title I was going to give but for the sake of Search engine *discipline* I have not 😉

Let’s start today with the default template that we get for SharePoint Hosted App in SharePoint 2013.
What do you need for this article : SharePoint 2013 + development tools – Visual studio 2012 on your Dev machine.

Step – 1 : Create SharePoint hosted app with the default template.

Visual studio 2012-> create new project-> select Apps from SharePoint 2013 under SharePoint->Apps

choose SharePoint hosted from the hosting options.

Step – 2:  Understanding each part

1 Feature

This folder has all the features.

2 Package and 8 Package.config

Package folder has all the necessary files required to deploy your App.

Packaging in Visual Studio 2012 has a great improvement with NuGet. Packaging take care of bringing the latest resources via Package.config file.

3 Content

App.css – brings custom styling to your App

4 Images

Add your custom images here..

AppIcon.png :this is icon for your App.

5 Pages

Default.aspx -> This is the landing page for your App web.

Our default page simply make a call to SharePointReady() function when DOM is ready and sp.js is loaded.

6 Scripts

If you expand the Scripts node you will find some jQuery files and App.js

In App.js get down to function: “SharePointReady()

It gets the current user name and says Hello !!

7 AppManifest.xml

This is the file that will register your App within SharePoint environment.

You will get configuration settings to choose App Icon, Title , Properties and what sort of access this App will have within SharePoint site.

You will also get designer for this file.

Code View :

Designer View

I hope you have enjoyed today’s article.

Start creating an App of your choice and play with it until we meet again for the next Article(5):)

Note: This article is written for SharePoint 2013 preview.