Exploring an App for SharePoint 2013 Visual Studio 2012 project – SharePoint hosted apps

After having installed Visual Studio 2012 together with the Microsoft Office Dev Tools which are distributed with the Web Platform Installer 4.0 (Just search for Office within Web PI) you can start building your first SharePoint 2013 apps. There is only one project type for building SharePoint 2013 apps.

After having selected the SharePoint 2013 app template, you will need to decide what type of app you want to build.

Let’s start with exploring what is included in the Visual Studio 2012 project after you have selected SharePoint hosted app.

Visual Studio 2012 SharePoint 2013 App structure:

• Features folder – which contains a .feature configuration file, which is used to deploy features to the server that's running SharePoint. This file is typically edited using the VS Feature Designer
• Package folder - which contains a Package.package file, which is used to deploy the solution to the server that's running SharePoint.
• Content folder
  • App.css : CSS file to style your SharePoint 2013 app. For guidelines about the different styles take a look at Apps for SharePoint UX design guidelines
  • Elements.xml: provisions the CSS file into the App web
• Images folder
  • AppIcon.png : serves the icon for the app in the home page
  • Elements.xml: provisions the icon into the App web
• Pages folder
  • default.aspx : Main/starter page of the app which is shown in full screen mode. Every app needs a least one page likes this. Appmanifest.xml points to this app starter page
  • Elements.xml: provisions the default.aspx file into the App web
• Scripts folder
  • App.js – Script file for adding your own Javascript logic
  • JQuery-1.6.2.js – If you are not familiar with JQuery yet – you should definitely pick up some learning material on this topic – it is quite essential for building SharePoint 2013 apps. In essence JQuery is a Javascript library which allows you to easily select and manipulate items in the DOM. See JQuery.com for more information
  • JQuery-1.6.2.min.js – Minified version of the JQuery library
  • JQuery-1.6.2.vsdoc.js – Used to provide intellisense capabilities – see How do I get intellisense for JQuery? for more info
• Root of the project
  • Appmanifest.xml - defines the various elements of the SharePoint 2013 app itself. The appmanifest.xml tells SharePoint what it must know about the app and defines the app's most important properties such as ProductID, Version, Title, Tile and StartPage Urls
    , different AppEvent Urls: Installed, Uninstalling, Upgraded and the App Permission requests.
    
  • For more information, see Explore the app manifest and the package of an app for SharePoint
  • Packages.config - When creating a SharePoint 2013 app  project in Visual Studio 2012, NuGet packages are used for the JQuery libraries. This means that instead of using whatever version is installed on your machine (via the SDK), Visual Studio will pull the latest version from NuGet. You can see this by looking into the packages.config file in your project.

If you take a look at default.aspx you will notice the following javascript snippet added in to the page – this is quite important – and provides the binding with the business logic which is added into app.js

   1: <script type="text/javascript">

   2:     $(document).ready(function () {

   3:         SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { sharePointReady(); });

   4:     });

   5: </script>

The snippet above uses the jQuery document ready event handler – “ $(document).ready(function())” to call SP.SOD.ExecuteFunc(). This is an example of a common pattern in Javascript called anonymous function calls. SP.SOD.ExecuteFunc(key,functionname,fn) ensures that the specified file - sp.js - that contains the specified function – SP.ClientContext - is loaded and then runs the specified callback.

So when both the DOM and SP.js are loaded and the ClientContext object is initialized the code will call the sharePointReady() function which is located in App.js.

If you look at the code in App.js – you will notice that the general way of working with the  Javascript Client Object Model hasn’t changed a lot in SharePoint 2013.

   1: // The code creates a context object which is needed to use the SharePoint object model

   2: function sharePointReady() {

   3:     context = new SP.ClientContext.get_current();

   4:     web = context.get_web();

   5:  

   6:     getUserName();

   7: }

References:

• Getting started with building apps for SharePoint 2013



• How to: Create a basic SharePoint hosted app



• Project structure and properties of apps for SharePoint in Visual Studio

Tags van Technorati: CSOM,javascript,sharepoint+2013,sps2013,microsoft,visual+studio+2012,vs2012,sharepoint