Develop Microsoft SharePoint 2013 APPS - Part 1

Yes this is the time I think I should talk about my learning and work with SharePoint 2013 Apps, The main reason of APPS in SharePoint 2013 is to give Developers the power of creating customizations without full trust access to the target farm, and the sweet reason is you can create apps and publish them in marketplace or corporate app catalog.

This blog series about sharepoint apps will be of different parts and i will try to discuss everything i know here with demonstration. So lets begin:-

APPS the Word(APPS for SharePoint):- You all are familliar with the word app, it was Nokia, Apple then Android who made this word popular in today Techno World, and even a first grade student can explain to you what does an "app" means, Microsoft evolve this in sharepoint from Farm Solutions --> then came SandBox Solutions --> then SharePoint Apps, the reason of this evaluation was mainly to avoid hick ups that admin people feels for Solution Deployment and to avoid effecting SharePoint Farm with custom Solutions or Customizations.

Many of Clients i worked with preffered SharePoint Designer Based customization even though i gave them explanation on how this disturbes the caching and Loading of SharePoint Pages as these have to go through different Parsing mechanism, the only answer they have is Designer based things are easy to modify, change and does not effect our SharePoint Environment.

Yes partially they are right but actually it costs alot to performance and Migration , Upgradation Scenerios.

So i think this evolution of SharePoint Apps are handy but this does not means that Sandbox Solutions are completely Obsolute, Microsoft Says that one should now preffer APPS as much as one can but at situations you have to go with Sandbox Solutions, as we can not modify things on SharePoint Main Sites with Apps

Silly Classification :-

One can classify apps on the basis of Configuration  and hosting model.

Conifguration:- 1) Full Page 2)App Parts 3)UI Command Extension.

Personally if you ask then my favourite is APP Parts but in this part of series we will work with Full Page Apps.

Ahhh i am sorry i should explain you guys first what are these:-

Full-page Based on one or more web pages, these apps include a dedicated UI. You should provide a back button for returning to the parent site, where the app is launched from—but your app will have a UI of its own.Simple as it sounds.. create web pages put javascript on the background yeah and here we go.

App Parts

Also called Client Parts, these render some app content in an IFrame inside pages of the parent site. Usually, App Parts are used to provide users with a small piece of information or functions that can directly interact with the SharePoint user interface.

UI command extension

Used to extend the UI of the parent site, these apps may include a ribbon button or an ECB (Edit Control Block) command to lead the user to a page or function provided by an external app.

Hosting Model Classification
SharePoint-hosted

This model relies on a subweb of the parent site (also called an app web) and enables you to use all the common SharePoint artifacts for implementing the UI and the behavior of the SharePoint app. You can take advantage of all the features of SharePoint, such as lists, Web Parts, pages, workflows, and so on.

Autohosted
Apps following this model are hosted on Microsoft Windows Azure, which can access a Microsoft SQL Azure database for managing data, too. The apps are automatically deployed on Windows Azure on your behalf and can communicate with SharePoint through events and the Client Object Model. Secure communication with SharePoint is enforced using OAuth.

Provider-hosted
From a functional perspective, apps that follow this model are almost the same as autohosted apps. The only difference is that a provider-hosted app has to be deployed on your own hosting environment and does not necessarily use the Windows Azure environment.

Lets Start:-
Ok so lets stop any more discussion and jump on the first app development, I have my development environment ready services required for APPS and Forward lookup Zones for Apps and Service Applications are configured Properly. There are several blogs availlable on how to do this http://msdn.microsoft.com/en-us/library/fp179923.aspx

Ok SO lets begin to develop our very basic and Simple App.

• This going to be a on-premise/sharepoint hosted app.
• Open Visual Studio 2012, create a new project -> Select SharePoint Apps ->;Apps for SharePoint 2013, .Net Framework 4.5 and give a proper name to project (I have given it as KickOff).



• Enter Url of target SharePoint Site & then Change hosting to “SharePoint Hosted” from Autohosted .
• Click Finish and VS 2012 will create a Project for us.
• And this will be what you will get :-

Now let me brief about what we have :-
1. Features Folder:-
 Contains all the features for provisioning contents and capabilities to the target web site, Upon creation this contains only one feature scoped to web-level.

One Major thing to note is you cant modify the scope of this feature and it packages all the contents, the main perpose of this feature is to deploy all the APP contents to the “TARGET APP WEBSITE”.

I would like to add a note here that you should know:-

NOTE:-One has to remember that an app website is provisioned and unprovisioned together with its app. Thus, we create an app that stores content inside its app web, if end user remove or uninstall the app, however the app will be gone also its related data will go away.

2. Package Folder:- Contains the package for deploying the app.
3. Content Folder:- Contains CSS style and a Module to deploy it to the target app.
4. Images Folder:- A Module and Images with default APP Icon image of 96*96 pixel, you can modify this with one of yours.
5. Pages Folder:- Module Feature and the pages of target app contains in this folder, default.aspx is the page contained by default.
6. Scripts Folder:- Represents a Module Feature that is for Javascript Files, APP.js file is the file where we put oue custom scripts(it is our entry point.
7. AppManifest.xml file:- Contains configuration and deployment information related to app.
8. Packages.config file:- Information about the packages referenced by Visual studio project.

Allright now lets just see what happens when out of box feature contained web is deployed to the Site, press F5 and see what happens:-

First Uploading of app starts then installation begins:-

Depending on the kind of environment and configuration installation progresses and takes time

And thus the app will get open:-

You can see there that it does have its default.aspx page loaded and link to go to the site from which it was reffered, in my case "test site" 

If you go back to the Man Site "Test Site in my case" then This app is located under site contents:-

Now Lets Start the Fun :- Make Changes
Open Default.aspx page:-
You will see this :-
<script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script> <script type="text/javascript" src="/_layouts/15/sp.js"></script> <!-- Add your CSS styles to the following file --> <link rel="Stylesheet" type="text/css" href="../Content/App.css" /> <!-- Add your JavaScript to the following file --> <script type="text/javascript" src="../Scripts/App.js"></script>
Apart from SP.js files it also contains an App.js file reference and this is our target start point of scripting and we will use this to provide our logic.


Now let me just show you a very simple thing, we will create a div and load all site users into it:- so declare a div element in your page with id:- “AppDetails”

<div id="AppDetails">




        
    </div>

And Now lets open" App.js" file and modify the code in it

add two global variables :-


var htmltoappend = ""; //Will store the html string to append in div
var siteUsers; // will store the siteUser object retrieved from CSOM of SharePoint 2013.

This is how the modified APP.js will be:-

'use strict';

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var htmltoappend = ""; // Variable to store html string
var siteUsers; //Variable to store siteUsers Object..
// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function () {
    getUserName();
    populateWebDetails();//Populates Users and generates the html for div

});

// This function prepares, loads, and then executes a SharePoint query to get the current users information
function getUserName() {
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() {
    $('#message').text('Hello ' + user.get_title());
}

// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}
function populateWebDetails()
{
    var webload = context.get_web();
    context.load(webload);
    siteUsers= webload.get_siteUsers();
    context.load(siteUsers);
    context.executeQueryAsync(onwebcallsuccedded , onwebcallfail);
    
}
function onwebcallsuccedded()
{
    htmltoappend = "<table>
<tr><td>Property Name</td><td>Property Value</td></tr>
";
    var userEnum = siteUsers.getEnumerator();

    while (userEnum.moveNext()) {

        var current = userEnum.get_current();

        htmltoappend += "
<tr><td>User Name</td><td>" +current.get_title() + "</td>";


    }
  
    htmltoappend +="</Table>"


    $get("AppDetails").innerHTML= htmltoappend;


}


function onwebcallfail(sender, args)
{



}

We are just initializing siteusers and showing the title of each users and creating a table and loading  this table into the div, just run the app now and see the changes:-

Thanks and coming up next is App Parts and many more exiting Notes about SharePoint Apps....