How to: Create a SharePoint 2013 App for Office 365

In this post I will show you how to create a SharePoint 2013 [SharePoint hosted] app for Office 365 and publish it on any SharePoint Online account. If you don't have Office 365 account already, you can get an Office 365 trial today.

Prerequisites

• Visual Studio 2012 or later. Get Visual Studio 2013 for free.
• Office Developer Tools.
• Office 365 account or SharePoint 2013 server installed locally.

Creating an SharePoint Developer Site Collection

To test and debug SharePoint apps we need to have a Developer Site Collection in Office 365. Go to your SharePoint site as an administrator and choose Admin from the apps shortcut.

From the Office 365 admin center, click Admin/SharePoint.

In the SharePoint admin center screen, choose New/Private Site Collection.

Give the site a name, choose a URL and make sure you choose the site template as "Developer Site".

Once you created it, you are now able to test from Visual Studio.

Creating the App

Open Visual Studio 2013 and create a new SharePoint app.

In the next dialog, enter the URL of your SharePoint site that you created earlier and select the radio button that reads “SharePoint-hosted”.

Hit Finish and you now have created your first app for SharePoint 2013.
Note: After clicking finish it will ask for credentials, please provide your Office 365 account credentials.
Visual Studio 2013 creates app project for you and open Default.aspx page.

You can see in Default.aspx Visual Studio adds some required references to JavaScript files. What we are interested in for now is App.js.

The JavaScript written in App.js is straight forward, as you would see we have context and user variables defined as global variables, context will hold the current client context our app is running on and user will hold the current user object.
We have jQuery dom ready function which calls getUserName() method and display the current user title in the html element named ‘message’ defined in Default.aspx page.
Please go to JavaScript API reference for SharePoint 2013 to deep dive.

Understanding app project structure

As you see in image above, we have 4 folders added as module:

• Content [mainly holds static content like style sheet used in our app].
• Images [as the name suggests, holds images used in app].
• Pages [will contains pages used in the app].
• Scripts [stores all the scripts used in the app].

Along with that you might see AppManifest.xml file, which holds information about the app for SharePoint, open it.

You can configure some app settings here, like I changed the app Title, you can change it to whatever you are liking, you can change the app Name too, but make sure it will not contains spaces. You could change the version number, app icon and the app start page. Start page is what end users see when your app runs.

You could also set app permissions by going to Permissions tab, as you can see I have set the permission for reading Web scope.

Testing and debugging your app for SharePoint

To test/debug the app, press F5, it will build the app and deploy to SharePoint 2013 site. Enter your Office 365 credentials in the browser that Visual Studio 2013 open for debugging.
SharePoint 2013 will ask you to trust the app, trust it! What are you waiting for?

and you will see the app running in SharePoint itself with full page rendering.

When running app, Visual Studio 2013 may have hit breakpoint(s) that you set in App.js, if not then set it and see Visual Studio will wait for you there.
I am done now, I hope you like it. I can’t imagine what you can build with Apps for SharePoint. If you have any questions or comments then please let me know, I am happy to answer.

References:

• Build apps for SharePoint.