SharePoint 2013 - Creating a SharePoint 2013 SharePointHosted App

In this post we will create a SharePoint-hosted and also discuss about the important artifacts inside it.

Pre-requisite
1) Before even thinking of creating an app, you must configure the environment for deploying the app. Otherwise, you will get the following  error while deploying:-
"Error occurred in deployment step 'Install app for SharePoint': Failed to install app for SharePoint. Please see the output window for details."
This happens because apps are disabled on the site. You can follow the detailed steps to configure apps environment here.
(http://sptechbytes.blogspot.com/2015/03/sharepoint-2013-configure-enviornment.html)
2) Check whether Microsoft Office Developer Tools for Visual Studio 2012 are installed. Otherwise app project templates wont be visible in Visual Studio 2012. You can download it here.

Following are the main steps:
We shall analyze the following steps to get a better understanding about SharePoint hosted apps:-
1) Creating a SharePoint-Hosted App Project
2) Understanding the App Project folder structure
3) Deploying the App to the App website
4) Customizing the App

So let's get started....!!!!

Creating a SharePoint-Hosted App Project

First of all, create a new project in visual studio 2012 selecting Apps for SharePoint 2013 located in Office/SharePoint->Apps as show in the following image.

Enter a suitable title, specify the Site collection where the app should be deployed and select SharePoint hosted. Click Finish to continue.

Understanding the App Project folder structure
Now that the project has been created, first of all, let's discuss about the components present inside an app at the time of creation.

Feature: The provisioning of all the contents inside the app website is done by the web scoped feature inside this folder.

Package: This folder contains the package for the deployment of app on the target site.

Content: Custom CSS styles related to the app are deployed from this folder.

Images: All the images related to the app  are deployed from this folder. Includes AppIcon.png file, which is the default icon of your app.

Pages: Consists of a Module feature which deploys all the pages of the target app website. The project template creates a Default.aspx page by default.

Scripts: Includes JavaScript files for deploying jQuery scripts, some JavaScript references, and the App.js file, which is the JavaScript Client Object Model entry point of the app.

AppManifest.xml : All the configuration and deployment information related to the app is included in this file.

packages.config : This file consists of the information about the packages referenced by the Visual Studio project such as jQuery packages and so on.

Deploying the App to the App website

Without making an changes, straightaway deploy the solution.

Open the output window and you will see the status of the deployment.

Once the app is successfully deployed you can see that the app is listed in the Site Contents page.

Click on the app and you will be prompted whether you trust this app. Click Trust It button.

Note: You might run into a scenario where you are prompted for credentials and you won't be able to log in to the app page even after providing your credentials multiple times. You can find the work around here.

You will be redirected to the app page (Default.aspx page that you saw in the Pages folder in the project).

Customizing the App
Open the Default.aspx page in our project  and modify the PlaceHolderMain contents as follows. Well, that's nothing much. Just another div  tag named "appDiv" and a button with a function named 'btnClick()' for displaying some custom text.

Code Snippet

28. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
29.     <div>
30.         <p id="message">
31.             <!-- The following content will be replaced with the user name when you run the app - see App.js -->
32.             initializing...
33.         </p>
34.     </div>
35.             <div id="appDiv">
36.     </div>
37.     <button onclick="btnClick();">Click Me!</button>
38. </asp:Content>

Now go to the app.js file inside the Scripts folder inside our project and add a new function named 'btnClick' as follows:

Code Snippet

28. function btnClick() {
29.     $get('appDiv').innerHTML = "<p>This is my first SharePoint 2013 App!</p><p>This is a SharePoint Hosted App!</p>";
30.     return false;
31. }

Deploy the app again and go to the app page. You will see that our new functionality has been added to display custom text when the button is clicked.

Remember this is just a sample app to demonstrate the steps for creation. The actual capabilities of apps are seamless.