Export (0) Print
Expand All

Get started creating SharePoint-hosted apps for SharePoint

apps for SharePoint

Set up a development environment and create your first SharePoint-hosted app for SharePoint.

Last modified: April 25, 2015

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

Note Note

The name "apps for SharePoint" is changing to "SharePoint Add-ins". During the transition, the documentation and the UI of some SharePoint products and Visual Studio tools might still use the term "apps for SharePoint".

In this article
Set up your dev environment
Create the app project
Code your app
Retrieve data by using the JavaScript object model
Next steps
Additional resources

SharePoint-hosted apps are one of the two major types of apps for SharePoint. For an overview of apps for SharePoint and the two different types, see Apps for SharePoint. Here's a summary of SharePoint-hosted apps:

  • They contain SharePoint lists, Web Parts, workflows, custom pages, and other components, all of which are installed on a subweb, called the app web, of the SharePoint website where the app is installed.

  • The only code they have is JavaScript on custom SharePoint pages.

Step 1 Set up your dev environment Step 2 Create the app project Step 3 Code your app

There are many ways to set up a development environment for apps for SharePoint. This section explains the simplest way. For alternatives, see Additional resources.

Get the tools

Sign up for an Office 365 Developer Site

Note Note

You might already have access to an Office 365 Developer Site.

  • Are you an MSDN subscriber? Visual Studio Ultimate and Visual Studio Premium with MSDN subscribers receive an Office 365 Developer Subscription as a benefit. Redeem your benefit today.

  • Do you have one of the following Office 365 subscription plans?

    Office 365 Midsize Business

    Office 365 Enterprise E1, E3, E4, or K1

    Office 365 Education A2, A3, or A4

    Office 365 Government G1, G3, G4, or K1

    If so, an administrator of the Office 365 subscription can create a Developer Site by using the Office 365 admin center. For more info, see Create a developer site on an existing Office 365 subscription.

There are two ways to get an Office 365 plan.

Tip Tip

Each of these links open in a new window or tab so that you can still see the following instructions.

Figure 1. Office 365 Developer Site domain name

Page 2 of Sign up form for Office 365 account

  1. The first page (not shown) of the signup form is self-explanatory; supply the requested information and then choose Next.

  2. On the second page, shown in Figure 1, specify a user ID for the administrator of the subscription.

  3. Create a subdomain of .onmicrosoft.com; for example, contoso.onmicrosoft.com.

    After signup, you use the resulting credentials (in the format UserID@yourdomain.onmicrosoft.com) to sign in to your Office 365 portal site where you administer your account. Your SharePoint Online Developer Site is set up at your new domain: http://yourdomain.sharepoint.com.

  4. Choose Next and fill out the final page of the form. If you choose to provide a telephone number to get a confirmation code, you can provide a mobile or landline number, but not a VoIP (Voice over Internet Protocol) number.

Note Note

If you’re logged on to another Microsoft account when you try to sign up for a developer account, you might see this message: "Sorry, that user ID you entered didn’t work. It looks like it’s not valid. Be sure you enter the user ID that your organization assigned to you. Your user ID usually looks like someone@example.com or someone@example.onmicrosoft.com."

If you see that message, log out of the Microsoft account you were using and try again. If you still get the message, clear your browser cache or switch to InPrivate Browsing and then fill out the form.

After you finish the signup process, your browser opens the Office 365 installation page. Choose the Admin icon to open the admin center page.

Figure 2. Office 365 admin center page

Screenshot that shows the Office 365 admin center.
  1. Wait for your Developer Site to finish setting up. After provisioning is complete, refresh the admin center page in your browser.

  2. Then, choose the Build Apps link in the upper left corner of the page to open your Developer Site. You should see a site that looks like the one in Figure 3. The Apps in Testing list on the page confirms that the website was made with the SharePoint Developer Site template. If you see a regular team site instead, wait a few minutes and then restart your site.

  3. Make a note of the site's URL; it's used when you create apps for SharePoint projects in Visual Studio.

Figure 3. Your Developer Site home page with the Apps in Testing list

Screenshot that shows the Developer site homepage.

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

  2. Choose File > New > New Project.

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

  4. Name the project, and then choose OK.

  5. In the first Specify the App for SharePoint Settings dialog box, provide the full URL of the SharePoint site that you want to use to debug your app. This is the URL of the Developer Site. (Use HTTPS, not HTTP in the URL.) Under How do you want to host your app for SharePoint, choose SharePoint-hosted. Choose Finish.

  6. You may be prompted to login to your Developer Site. If so, use your subscription administrator's credentials.

  1. Open the AppManifest.xml file. Visual Studio displays the file in an editor that shows you the properties and values you'll assign to your app. In the Permissions tab, select Web from the list of permission scopes and Read from the list of permissions.

  2. Add a host web menu item custom action 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.

    3. In the Templates pane, choose Menu Item Custom Action, type HelloWorldCustomAction in the Name field, and then choose 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. Choose Next.

    5. Keep the default options and choose Finish.

  3. 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, 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 choose 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. Choose Next.

    5. Keep the default options and choose Finish.

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

    After the app is deployed, navigate to 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.

    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 Pages\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 (inside the asp:content element), as shown in the following code.

    <SharePoint:SPAppIFrame   ID="SPAppIFrame1" runat="server" 
          Src="http://www.bing.com" Width="100%" Height="100%">
    </SharePoint:SPAppIFrame>
    
  4. Set Internet Explorer as the default browser for Visual Studio before you continue.

    Use the F5 key to deploy and run your app. (You may be prompted to login to your Developer Site. If so, use your subscription administrator's credentials.)

  5. Choose Trust It on the consent page to grant permissions to the app. When the app starts, you might see a warning about unsafe content. Choose to trust all content. You can use techniques that make this unnecessary in a production app for SharePoint, but using them in your first app for SharePoint would be a distraction.

  6. When the page loads, you’ll see the Bing home page partially visible in its own frame. Choose the Get count of lists in web button to see the number of lists that have been deployed to the app web.

See Deploying and installing apps for SharePoint: methods and options to learn how to publish your app to a SharePoint 2013 site.

  • Apps for SharePoint

  • For other ways of setting up a development environment, such as an "all on-premise" environment, see the Tools section in the apps for SharePoint table of contents.

Show:
© 2015 Microsoft