Export (0) Print
Expand All

How to: Create a basic SharePoint-hosted app

apps for SharePoint

Learn how to create a basic SharePoint-hosted app for SharePoint with the Office Developer Tools for Visual Studio 2012.

Last modified: October 01, 2014

Applies to: apps for SharePoint | Office 365 | SharePoint Foundation 2013 | SharePoint Server 2013

By using Office Developer Tools for Visual Studio 2012, you can create and deploy both SharePoint-hosted and ISV-hosted apps. A SharePoint-hosted app is the easiest to create and deploy because its contents are deployed to a single SharePoint site.

We'll walk you through the steps to build the app incrementally. You'll learn how to interact with SharePoint 2013 sites by using the JavaScript object model. Then, you can create and include other fundamental pieces of an app for SharePoint.

By using Office Developer Tools for Visual Studio 2012, you can create and deploy both SharePoint-hosted and ISV-hosted apps. A SharePoint-hosted app is the easiest to create and deploy because its contents are deployed to a single SharePoint site.

  1. Start Visual Studio 2012 by using the Run as administrator option.

  2. In Visual Studio 2012, on the File menu, choose New, and then choose New Project.

  3. In the New Project dialog box, expand the Visual C# node, expand the Office/SharePoint node, and then choose the Apps node. Choose App for SharePoint 2013.

  4. Name the project, and then choose the OK button.

  5. In the first Specify the App for SharePoint Settings dialog box, name your app and provide the URL of the SharePoint 2013 site that you want to use to debug your app. Under How do you want to host your app for SharePoint, choose SharePoint-hosted. Choose Finish.

  6. Open the AppManifest.xml file. Visual Studio 2012 displays the file in an editor that shows you the properties and values you'll assign to your app for SharePoint. In the Permission requests section, select Web from the list of permission scopes and Read from the list of permissions.

  7. Add a custom list to the project by using the following steps:

    1. In Solution Explorer, right-click the app project node to open the shortcut menu for the app for SharePoint, and then choose Add New Item.

    2. Expand the Office/SharePoint node under Visual C#.

    3. In the Templates pane, choose List, and then choose Add.

    4. In the Choose List Settings dialog box, name the new list TestCustomList, click the Create a customizable list based on radio button, select Default (Blank), and then click Finish.

  8. Add a host web menu item custom action to the project by using the following steps. This adds an Edit Control Block (ECB) custom action that launches your app for SharePoint to items in the Shared Documents library on the parent SharePoint site.

    1. In Solution Explorer, right-click the app project node to open the shortcut menu for the app for SharePoint, and then choose Add New Item.

    2. Expand the Office/SharePoint node.

    3. In the Templates pane, choose Menu Item Custom Action, type HelloWorldCustomAction in the Name field, and then click Add.

    4. In the Create Custom Action for Menu Item dialog box, select the Host Web radio button. Select List Instance in the Where is the custom action scoped to? drop-down box. Select Documents in the Which particular item is the custom action scoped to? drop-down box. Click Next.

    5. Keep the default options and click Finish.

  9. Add a ribbon custom action for the Shared Documents library by using the following steps.

    1. In Solution Explorer, right-click the app project node to open the shortcut menu for the app for SharePoint, and then choose Add New Item.

    2. Expand the Office/SharePoint node.

    3. In the Templates pane, choose Ribbon Custom Action, type HelloWorldRibbonCustomAction in the Name field, and then click Add.

    4. In the Create Custom Action for Ribbon dialog box, select the Host Web radio button. Select List Instance in the Where is the custom action scoped to? drop-down box. Select Documents in the Which particular item is the custom action scoped to? drop-down box. Click Next.

    5. Keep the default options and click Finish.

  10. In Visual Studio 2012, on the Build menu, choose Deployyour app name.

    After the app is deployed, Visual Studio 2012 will launch the Site Contents page. Your app should appear in the list of apps on that page.

  1. Replace the contents of the Scripts\Apps.js file with the following JavaScript. This code retrieves a count of the number of lists on the current SPWeb object and the current user. It also populates elements in the Default.aspx file with the information that it retrieves.

    // Replace the following with your custom JavaScript. 
    var ctx;
    var web;
    var user;
    
    function sharePointReady() {
        ctx = new SP.ClientContext.get_current();
    
        $("#getListCount").click(function (event) {
            getWebProperties();
            event.preventDefault();
        });
        welcome();
    }
    
    
    function welcome() {
        web = ctx.get_web();
        user = web.get_currentUser();
        ctx.load(user);
    
        ctx.executeQueryAsync(onUserReqSuccess, onUserReqFail);
    }
    
    function onUserReqSuccess() {
        var welcomeText = document.getElementById("starter");
        var userWelcome = document.createElement("p");
        userWelcome.style.fontSize = "14pt";
        userWelcome.innerText = "Welcome " + user.get_loginName() + ".";
        welcomeText.appendChild(userWelcome);
    }
    
    function onUserReqFail(sender, args) {
        alert('Failed to find current user. ' + args.get_message());
    }
    
    
    function getWebProperties() {
        web = ctx.get_web();
        lists = this.web.get_lists();
        ctx.load(this.lists);
        ctx.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFail));
    }
    
    function onSuccess(sender, args) {
        alert('Number of lists in web:' + this.lists.get_count());
    }
    
    function onFail(sender, args) {
        alert('failed to get list. Error:' + args.get_message());
    }
    
  2. In the Default.aspx file, inside the <PlaceHolderMain> tag, add the following HTML.

     
    <div>
       <button id="getListCount">Get count of lists in web</button>
    </div>
    <div id="starter">
    </div>
    

  3. You can display the contents of another webpage in an Iframe by adding the SharePoint:SPAppIFrame control to the Default.aspx file, as shown in the following code.

    <SharePoint:SPAppIFrame   ID="SPAppIFrame1" runat="server" Src="http://www.bing.com" Width="100%" Height="100%"></SharePoint:SPAppIFrame>
    
  4. You can add a list view that displays the contents of the custom list that you created by adding the WebPartPages:XsltListViewWebPart control to the Default.aspx file, as shown in the following code.

    <WebPartPages:WebPartZone runat="server" FrameType="TitleBarOnly" 
    ID="full" Title="loc:full" >
    <WebPartPages:XsltListViewWebPart ID="XsltListViewWebPart2" 
    runat="server" ListUrl="Lists/TestCustomList" IsIncluded="True" 
    NoDefaultStyle="TRUE" Title="TestCustomList" PageType="PAGE_NORMALVIEW" 
    Default="False" ViewContentTypeId="0x"> 
    </WebPartPages:XsltListViewWebPart>
    </WebPartPages:WebPartZone>
    
  5. Use the F5 key to deploy and run your app. Choose Trust It on the consent page to grant permissions to the app. When the app launches, you’ll see a page like the one shown in Figure 1. Click the Get count of lists in web button to see the number of lists that have been deployed to the appweb.

    Figure 1. Default.aspx page in the app, displaying the Bing home page and information about the appweb

    Basic SharePoint-hosted app launch page

After you have finished with the Start node of the app model SDK, take a look at the Design, Develop, and Publish nodes.

Was this page helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft