Step 1: Create a list-based provider-hosted app in SharePoint 2013

apps for SharePoint

Learn how to use the Office Developer Tools for Visual Studio 2012 to create an app for SharePoint, and how to activate a push notification feature on an app for SharePoint.

Last modified: June 24, 2014

This article is the first in a three-part series that shows how to create a companion mobile app for SharePoint. For more information, see How to: Create a companion mobile app for an app for SharePoint.

In this section of the procedure, you create a provider-hosted app for SharePoint, which is used to create a companion app in next step of this procedure. The app created in this section is used as a desktop app by a customer-support agent who can log complaints on behalf of customers. The mobile companion app of this app is used by technicians to view and edit the tasks that are assigned to them and to get push notifications when new tasks are assigned to them.

The app for SharePoint have three SharePoint lists, and a feature added for push notification.

After you create an app for SharePoint, you can choose to create a SharePoint-hosted app instead. If you choose to do this, you must use event handlers instead of remote event handlers for the push notification configuration step of this series (Step 2: Configure push notifications in a provider-hosted apps for SharePoint).

Applies to: apps for SharePoint | SharePoint Server 2013

To complete the steps in this article, you will need the following:

  • An Office 365 Developer Site. For instructions on setting one up, see Sign up for an Office 365 Developer Site, set up your tools and environment, and start deploying apps. See Get started developing apps for SharePoint for guidance on how to set up a development environment that fits your needs.

  • Visual Studio 2012

  • Office Developer Tools for Visual Studio 2012

  • A SharePoint 2013 installation for testing and debugging

    • This can be on the computer that is your development computer, or you can develop with a remote SharePoint 2013 installation, and the remote installation can be on SharePoint Online. If you work with a remote installation, you have to install the client object model redistributable from SharePoint Client Components on the target installation.

    • The test SharePoint website must be created from the Developer Site definition (which you can create in Central Administration).

    • The SharePoint 2013 installation must be configured to use OAuth. (If your test website is a Developer Site provisioned on SharePoint Online, it is already configured to use OAuth.)

Core concepts to know for creating a provider-hosted app

Before you create your first a provider-hosted app, you should have a basic understanding of apps for SharePoint and the differences among SharePoint-hosted and provider-hosted apps for SharePoint. The articles listed in Table 1 should give you that understanding.

Table 1. Core concepts for creating a provider-hosted app

Article title

Description

Overview of apps for SharePoint

Learn about the new app model in SharePoint 2013 that enables you to create apps, which are small, easy-to-use solutions for end users.

Important aspects of the app for SharePoint architecture and development landscape

Learn about aspects of the architecture of apps for SharePoint and the model for apps for SharePoint, including the app hosting options, user interface (UI) options, deployment system, security system, and life cycle.

Choose patterns for developing and hosting your app for SharePoint

Learn about the various ways that you can host apps for SharePoint.

In this section, you create an app for SharePoint that includes a SharePoint list with a Geolocation field type.

To set up the Visual Studio 2012 solution and its elements

  1. In Visual Studio 2012, create an App for SharePoint 2013 project from the Office SharePoint, Apps node (under either C# ) in the templates tree of the New Project wizard. Choose the provider-hosted hosting option. In the continuing example of this article, C# is used as the language and SupportCenter is the project name.

  2. Choose Finish in the wizard. A lot of configuration is done when the solution opens. The following are some of the most important things that occur.

    • Two projects are created in the Visual Studio 2012 solution: one for the app for SharePoint and the other for the ASP.NET web application.

    • The Web Project property of the app for SharePoint project is set to the name of the web application project.

    • The values in the AppManifest.xml file are set appropriately for a provider-hosted app. The Start Page URL is set by default to ~remoteAppUrl/Default.aspx replace this with ~appWebUrl/Pages/Default.aspx?{StandardTokens}. The Query String value is set to {StandardTokens}. This is also a token that resolves to a longer query string that includes an identification of the URL of the SharePoint website to which the remote web application communicates. Because neither the host web nor the app web URL is known until the app is installed, you need to use a token as the value of the query string. For more information about tokens in the app manifest, see App for SharePoint manifest file and URL strings and tokens in apps for SharePoint.

    • The Target Framework of the web application is set to Microsoft ASP.NET 4.0 (not Microsoft ASP.NET 4.5).

    • The SSL Enabled property of the web application is set to True.

    • References are added to the web application project for the SharePoint client object model assemblies as well as assemblies for the Microsoft identity model infrastructure.

    • A source file named TokenHelper.cs or TokenHelper.vb is added to the web application project.

  3. In Solution Explorer, choose the node that represents the project (named SupportCenter if you follow the naming convention used in these procedures).

  4. On the Project menu, choose Add, New Item. When the Add New Item dialog box opens with the Office/SharePoint templates, choose List.

  5. Specify Technicians as the name of the list, and choose Add. In the SharePoint Customization Wizard, choose customizable list based, and then choose Default (Blank) from the drop-down list.

    After you add the list to the solution, you can add a column to the list using the user interface.

    In the Solution Explorer, choose the node that represents the newly created list (named Technicians if you follow the naming convention used in these procedures). Open the selected node to open the Technicians list in the List Designer, and add the columns and field types shown in Table 1. Delete the columns that are created with the list before you add new columns to the list.

    Table 1. Technicians list

    Column

    Type

    Required

    Title

    Single line of text (Text)

    Yes

    Name

    Person or Group

    No

    Job Title

    Single line of text (Text)

    Yes

    Expertise

    Single line of text (Text)

    No

    Location

    Geographic Location

    No

  6. Repeat step 4 to create one more list with Notifications as the name of the list in your app for SharePoint.

  7. Repeat step 5, and use Table 2 to create columns in the list Notifications created in the preceding step.

    Table 2. Notifications list

    Column

    Type

    Required

    Title

    Single line of text (Text)

    Yes

    Notification Time

    Single line of text (Text)

    No

    Status Code

    Single line of text (Text)

    Yes

    Service Token

    Single line of text (Text)

    No

    Headers

    Single line of text (Text)

    No

    Interval Value

    Single line of text (Text)

    No

  8. To add the third list in your app for SharePoint, repeat step 4. Specify Cases as the name of the list, and choose Add. In the SharePoint Customization Wizard, choose customizable list based, and then choose Tasks from the drop-down list.

    In the Solution Explorer, choose the node that represents the newly created list (named Cases if you follow the naming convention used in these procedures). Open the selected node to open the Cases list in the List Designer, and add one column to the existing columns Customer Address as the Display name and Multi Lines of Text as the field type for the column.

  9. In the AppManifest.xml file, add the following code. To learn more about Permissions, see App permissions in SharePoint 2013

    <AppPermissionRequests>
        <AppPermissionRequest Scope="http://sharepoint/content/sitecollection/web" Right="FullControl" />
      </AppPermissionRequests>
    

Adding Default page to the App

  1. In the Solution Explorer, choose the node that represents the newly created list (named SupportCenter if you follow the naming convention used in these procedures). Add a .aspx page to the solution.

  2. Add the following code inside the body of the page

    <div>
            <p>
                <table cellpadding="20">
                    <tr>
                        <td valign="top" align="left">
                            <p>
                                <a href="../Lists/Cases">Support Cases</a>
                            </p>
                            <p>
                                <a href="../Lists/Technicians">Technicians</a>
                            </p>
                            
                            <p>
                                <a href="../Lists/Notifications">Notifications</a>
                            </p>
                            
                        </td>
                    </tr>
                </table>
            </p>
        </div>
    

In the following steps, you activate the push notification feature in your app for SharePoint. This step is only to activate the push notification feature. To send push notifications, you need to add remote event receivers, which is covered in Step 2: Configure push notifications in a provider-hosted apps for SharePoint.

To activate the push notification feature in apps for SharePoint

  1. In Solution Explorer, choose and expand the node Features.

  2. In the feature designer, expand the Feature Activation Dependencies node, and then choose the Add button.

  3. In the Add Feature Activation Dependencies dialog box, choose the Add a dependency on features in the solution option button, enter Push Notifications in the title of the feature you are adding as a dependency, enter 41e1d4bf-b1a2-47f7-ab80-d5d6cbba3092 in the feature ID text box, and optionally add a description. Then choose the Add button.

    To learn more about adding a feature, see How to: Add and Remove Feature Dependencies.

In the next step, Step 2: Configure push notifications in a provider-hosted apps for SharePoint, you will learn how to create push notifications for a provider-hosted app for SharePoint using a remote event receiver.

Show:
© 2014 Microsoft