Introducing SharePoint Apps

Understanding SharePoint app model architecture

Microsoft designed the SharePoint app model to work in the Office 365 environment as well as within on-premises farms. However, developing for Office 365 introduces a few important new concepts that will be unfamiliar to many experienced SharePoint developers. One of the new concepts that is essential to the development of SharePoint apps is a SharePoint tenancy.

A SharePoint tenancy is a set of site collections that are configured and administrated as a unit. When a new customer establishes an Office 365 account to host its SharePoint sites, the Office 365 environment creates a new tenancy. The customer’s business users that access the tenancy are known (not surprisingly) as tenants.

When the Office 365 environment creates a new tenancy for a customer, it creates an administrative site collection which is accessible to users who have been configured to play the role of a tenant administrator. A tenant administrator can create additional site collections and configure the set of services that are available to all the sites running within the tenancy.

The concept of tenancies was first introduced in SharePoint 2010 to support hosting environments such as Office 365. Although the creation and use of tenancies is essential to the Office 365 environment, their use has not been widely adopted in on-premises farms. This is primarily due to the fact that SharePoint farm administrators can create site collections and configure the services available to users within the scope of a web application.

The architecture of the SharePoint app model requires that apps are always installed and run within the context of a specific tenancy. This can be a bit confusing for scenarios in which you want to install SharePoint apps in an on-premises farm that doesn’t involve the explicit creation of tenancies. However, SharePoint 2013 is able to support installing and running SharePoint apps in on-premises farms by transparently creating a farm-wide tenancy behind the scenes that is known as the default tenancy.

Working with app service applications

SharePoint 2013 relies on two service applications to manage the environment that supports SharePoint apps. The first service application is the App Management Service, which is new to SharePoint 2013. The second service application is the Site Subscriptions Settings Service, which was introduced in SharePoint 2010. A high-level view of a SharePoint 2013 farm running these two service applications is shown in Figure 1-1.

The App Management Service has its own database that is used to store the configuration details for apps as they are installed and configured. The App Management Service is also responsible for tracking other types of app-specific configuration data that deals with app security principals, app permissions, and app licensing.

The Site Subscription Settings Service takes on the responsibility of managing tenancies. Each time a new tenancy is created, this service adds configuration data for it in its own database. The Site Subscription Settings Service is particularly important to the SharePoint app model due to the requirement that SharePoint apps must always be installed and run within the context of a specific tenancy.

When you are working within the Office 365 environment, you never have to worry about creating or configuring these two service applications, because they are entirely managed behind the scenes. However, things are different when you want to configure support for SharePoint apps in an on-premises farm. In particular, you must explicitly create an instance of both the App Management Service and the Site Subscription Settings Service.

Creating an instance of App Management Service is easier because it can be done by hand via the Central Administration or by using the Farm Creation Wizard. Creating an instance of Site Subscription Settings Service is a bit trickier because it must be done by using Windows PowerShell. However, when you create an instance of the Site Subscription Settings Service by using Windows PowerShell, it automatically creates the default tenancy which then makes it possible to install SharePoint apps in sites throughout the farm.

Understanding app installation scopes

A SharePoint app must be installed before it can be made available to users. When you install a SharePoint app, you must install it within the context of a target web. Once the app has been installed, users can then launch the app and begin to use it. The site from which an app has been launched is known as the host web.

There are two different scopes in which you can install and configure a SharePoint app. The scenario that is easier to understand is when an app is installed at site scope. In this scenario, the app is installed and launched within the scope of the same SharePoint site. In this scenario, the host web will always be the same site where the app has been installed.

SharePoint apps can also be installed and configured at tenancy scope. In this scenario, an app is installed in a special type of SharePoint site known as an app catalog site. Once the app has been installed in an app catalog site, the app can then be configured so that users can launch it from other sites. In this scenario, the host web will not be the same site where the app has been installed.

The ability to install and configure apps at tenancy scope is especially valuable for scenarios in which a single app is going to be used by many different users across multiple sites within an Office 365 tenancy or an on-premises farm. A single administrative user can configure app permissions and manage licensing in one place, which prevents the need to install and configure the app on a site-by-site basis. The topic of installing apps will be revisited in greater detail at the end of this chapter.

This book discusses many different scenarios in which SharePoint apps behave the same way, regardless of whether they have been installed in an Office 365 tenancy or in an on-premises farm. Therefore, the book frequently uses the generic term SharePoint host environment when talking about scenarios that work the same across either environment.

Understanding app code isolation

When you develop a SharePoint app, you obviously need to write custom code to implement your business logic, and that code must run some place other than on the web servers in the hosting SharePoint farm. The SharePoint app model provides you with two places to run your custom code. First, a SharePoint app can contain client-side code that runs inside the browser on the user’s computer. Second, a SharePoint app can contain server-side code that runs in an external website that is implemented and deployed as part of the app itself.

There are many different ways in which you can design and implement a SharePoint app. For example, you could create a SharePoint app that contains only client-side resources such as web pages and client-side JavaScript code that are served up by the SharePoint host environment. This type of app is known as a SharePoint-hosted app because it is contained entirely within the app web. You could write a SharePoint-hosted app that uses Microsoft Silverlight, Microsoft VBScript, Flash, or whatever client-side technology you prefer.

Now, imagine that you want to create a second SharePoint app in which you want to write server-side code in a language such as C#. This type of SharePoint app will require its own external website so that your server-side code has a place to execute outside of the SharePoint host environment. In SharePoint 2013 terminology, a SharePoint app with its own external website is known as a cloud-hosted app, and the external website is known as the remote web. The diagram in Figure 1-2 shows the key architectural difference between a SharePoint-hosted app and a cloud-hosted app.

From the diagram in Figure 1-2, you can see that both SharePoint-hosted apps and cloud-hosted apps have a start page that represents the app’s primary entry point. With a SharePoint-hosted app, the app’s start page is served up by the SharePoint host; however, with a cloud-hosted app, the start page is served up from the remote web. Therefore, the SharePoint host environment must track the remote web URL for each cloud-hosted app that has been installed so that it can redirect users to the app’s start page.

There is infrastructure in the SharePoint host environment that creates a client-side JavaScript component known as an app launcher that is used to redirect the user from a page served up by the SharePoint host environment over to the remote web.

When you decide to develop a cloud-hosted SharePoint app, you must often take on the responsibility of hosting the app’s remote web. However, this responsibility of creating and deploying a remote web along with a SharePoint app also comes with a degree of flexibility. You can implement the remote web associated with a SharePoint app by using any existing web-based development platform.

For example, the remote web for a cloud-hosted SharePoint app could be implemented by using a non-Microsoft platform such as Java, LAMP, or PHP. However, the easiest and the most common approach for SharePoint developers is to design and implement the remote web for cloud-hosted apps by using ASP.NET web forms or MVC4. Chapter 4, “Developing SharePoint Apps,” discusses several patterns that use these technologies.

Understanding app hosting models

Thus far, this chapter has discussed how a SharePoint app can be categorized as either a SharePoint-hosted app or a cloud-hosted app. However, the SharePoint app model actually defines three app hosting models, not just two. Any time you create a new SharePoint app project in Microsoft Visual Studio 2012 you must pick from one of the following three app hosting models.

• SharePoint-hosted
• Provider-hosted
• Autohosted

This chapter has already explained SharePoint-hosted apps. As you recall, a SharePoint-hosted app is simply an app that adds its start page and all its other resources into the SharePoint host environment during installation. Now, it’s time to explain the differences between the other two app hosting models.

A provider-hosted app and an autohosted app are just two variations of the hosting model for a cloud-hosted app. Both types of apps have an associated remote web that is capable of hosting the app’s start page and any other resources the app requires. Furthermore, both provider-hosted apps and autohosted apps can and often will host their own custom databases to store app-specific data. The difference between these two different app hosting models involves how the remote web and its associated database are created when an app is deployed and installed.

It makes sense to begin by first examining the hosting model for a provider-hosted app. Imagine a scenario in which a developer has just finished testing and debugging a provider-hosted app that has a remote web with its own custom database. Before the app can be installed in a SharePoint host environment, the developer or some other party must first deploy the website for the remote web to make it accessible across the Internet or on a private network.

The custom database used by the remote web must also be created on a database server and made accessible to the remote web as part of the deployment process. Once the remote web and its custom database are up and running, the provider-hosted app can then be installed in a SharePoint tenancy and made available to the customer’s users, as demonstrated in Figure 1-3.

Once a provider-hosted app has been deployed, the company that developed the app usually assumes the responsibility for its ongoing maintenance. For example, if a company develops a provider-hosted app and deploys its remote web on one or more of its local web servers, it must ensure that those web servers remain healthy and accessible. If it deploys the remote app for its provider-hosted in a hosting environment such as Windows Azure, it must pay a monthly fee for the hosting services. Furthermore, it will be responsible for backing up the app’s database and then restoring it if data becomes lost or corrupt.

Keep in mind that a provider-hosted app can be installed in more than one SharePoint site. Furthermore, a provider-hosted app can be installed in many different SharePoint sites that span across multiple customers and multiple SharePoint host environments. This is a common scenario which is known as multi-tenancy. What is critical to acknowledge is that multi-tenancy introduces several noteworthy design issues and deployment concerns. Let’s look at an example.

Think about a scenario involving multi-tenancy in which a provider-hosted app has been installed by many different customers and the number of users is continually growing larger. All these users will be accessing the same remote web through a single entry point, which is the app’s start page, as shown in Figure 1-4.

As you can imagine, a provider-hosted app in this type of multitenant scenario must have a way to scale up as the number of users increases. Furthermore, this type of app should generally be designed to isolate the data for each customer to keep it separate from the data belonging to other customers—you would never want one customer accessing another customer’s data. Depending on the customers’ industry, there could even be government regulations or privacy concerns that prevent the app from storing data for different customers within the same set of tables or even within the same database.

The important takeaway is that multi-tenancy introduces complexity. The development of a provider-hosted app that will be used in a multi-tenant scenario typically requires a design that isolates data on a customer-by-customer basis. As you can imagine, this increases both the time and the cost associated with developing a provider-hosted app.

Now that you have seen some of the inherit design issues that arise due to multi-tenancy, you will be able to more fully appreciate the benefits of the hosting model for autohosted apps. Autohosted apps offer value because they prevent the developer from having to worry about many of the issues involved with app deployment, scalability, and data isolation.

The first thing to understand about autohosted apps is that they are only supported in the Office 365 environment. Although this constraint might change in future releases, with SharePoint 2013 you cannot install an autohosted app in an on-premises farm. The reason for this is that the hosting model for autohosted apps is based on a private infrastructure that integrates the Office 365 environment with Windows Azure and its ability to provision websites and databases on demand.

The central idea behind the hosting model for autohosted apps is that the Office 365 environment can deploy the remote web on demand when an app is installed. You can also configure an autohosted app so that it creates its own private database during app installation. Once again, the Office 365 environment and its integration with Windows Azure is able to create a SQL Azure database on demand and then make it accessible to the remote web.

Autohosted apps offer value over provider-hosted apps because the Office 365 environment transparently handles the deployment of the remote web and potentially the creation of a custom database, as well. Autohosted apps also transfer the ongoing cost of ownership of the remote web and its database from the developer over to the customer who owns the Office 365 tenancy where the app has been installed. Therefore, the app developer doesn’t have to worry about babysitting web servers, backing up databases, or coming up with a strategy scaling up the remote web as the number of users increases.

The benefits of an autohosted app over a provider-hosted app also extend into app design, which can serve to lower development costs. That’s because each customer receives its own private database whenever installing an autohosted app, as illustrated in Figure 1-5. The benefit is that the developer isn’t required to add complexity to the app’s design and implementation to provide isolation because each customer’s data is isolated automatically.

Reviewing the app manifest

Every SharePoint app requires an XML file called AppManifest.xml, which is known as the app manifest. The app manifest contains essential metadata for the app that is read and tracked by the SharePoint host environment when an app is installed. Listing 1-1 presents a simple example of what the app manifest looks like for a SharePoint-hosted app.

Listing 1-1 An app manifest

<App xmlns=http://schemas.microsoft.com/sharepoint/2012/app/manifest
     Name="MySharePointApp"
     ProductID="{b93e8f64-4d14-4c72-be47-3b89f7f5fdf6}"
     Version="1.0.0.0"
     SharePointMinVersion="15.0.0.0" >

  <Properties>
     <Title>My SharePoint App</Title>
     <StartPage>~appWebUrl/Pages/Default.aspx?{StandardTokens}</StartPage>
  </Properties>

  <AppPrincipal>
     <Internal />
  </AppPrincipal>

</App>

The app manifest contains a top-level <App> element which requires a set of attributes such as Name, ProductID, and Version. Within the <App> element there is an inner <Properties> element that contains important child elements such as <Title> and <StartPage>. The <Title> element contains human-readable text that is displayed to the user in the app launcher. The <StartPage> element contains the URL that the SharePoint host environment uses in the app launcher to redirect the user to the app’s start page.

Listing 1-1 shows the minimal amount of metadata required in an app manifest; however, the app manifest for most real-world apps will contain a good deal more. The app manifest often contains addition metadata to configure other essential aspects of an app, such as app-level events, authentication, permissions, and the SharePoint services that an app requires from the SharePoint host environment. Table 1-1 lists the most common elements you might be required to add to an app manifest.

Table 1-1 The elements used in the App Manifest file

Element	Purpose
Name	Creates the URL to the app web.
ProductID	Identifies the app.
Version	Indicates the specific version of the app.
SharePointMinVersion	Indicates the version of SharePoint.
Properties\Title	Provides text for the app launcher.
Properties\StartPage	Redirects the user to the app’s start page.
Properties\SupportedLanguages	Indicates which languages are supported.
Properties\WebTemplate	Supplies a custom site template for the app web.
Properties\InstalledEventEndpoint	Executes custom code during installation.
Properties\UpgradedEventEndpoint	Executes custom code during upgrade.
Properties\UninstallingEventEndpoint	Executes custom code during uninstallation.
AppPrincipal\Internal	Indicates there is no need for external authentication. This is what is always used for SharePoint-hosted apps.
AppPrincipal\RemoteWebApplication	Indicates that the app is provider-hosted and requires external authentication.
AppPrincipal\AutoDeployedWebApplication	Indicates that the app is autohosted and requires external authentication.
AppPermissionRequests\AppPermissionRequest	Add permission requests that must be granted during app installation
AppPrerequisites\AppPrerequisite	Indicates what SharePoint services must be enabled in the SharePoint host environment for the app to work properly.
RemoteEndpoints\RemoteEndpoint	Configures allowable domains for cross-domain calls using the web proxy.

Using the app manifest designer in Visual Studio 2012

When you are working with the app manifest in a SharePoint app project, Visual Studio 2012 provides the visual designer shown in Figure 1-6. This visual designer eliminates the need to edit the XML in the AppManifest.xml file by hand. The designer provides drop-down lists that makes editing more convenient and adds a valuable degree of validation as you are selecting the app start page or configuring permission requests, feature prerequisites, and capability perquisites.

Although you should take advantage of the visual designer whenever you can to edit the app manifest, it is important to understand that it cannot make certain types of modifications that you might require. Therefore, you should also become accustomed to opening the AppManifest.xml file in code view and making changes to the XML within by hand. Fortunately, in times when you need to manually edit the AppManifest.xml file, Visual Studio 2012 is able to provide IntelliSense, based on the XML schema behind the app manifest.

Setting the start page URL

Every app has a start page whose URL must be configured by using the <StartPage> element within the app manifest. The SharePoint host environment uses this URL when creating app launchers that redirect the user to the app’s start page. For a SharePoint-hosted app, the start page must be located in a child site known as the app web that will be discussed in more detail later in this chapter. For a cloud-hosted app, the start page will usually be located in the remote web.

When you are configuring the URL within the <StartPage> element for a SharePoint-hosted app you must use a dynamic token named ~appWebUrl, as demonstrated in the following:

~appWebUrl/Pages/Default.aspx

This use of the ~appWebUrl token is required because the actual URL to the app’s start page will not be known until the app has been installed. The SharePoint host environment is able to recognize the ~appWebUrl token during app installation and it replaces it with the absolute URL to the app web.

In the case of a provider-hosted app whose start page exists within the remote web, the <StartPage> element can be configured with the actual URL that is used to access the start page where the remote web has been deployed, such as in the following:

https://RemoteWebServer.wingtip.com/MyAppsRemoteWeb/Pages/Default.aspx

When you are debugging provider-hosted apps and autohosted apps, you can use a convenient dynamic token named ~remoteAppUrl that eliminates the need to hardcode the path to the remote web during the development phase. For example, you can configure the <StartPage> element with the following value:

~remoteAppUrl/Pages/Default.aspx

The reason this works during debugging is due to some extra support in Visual Studio 2012. When you create a new SharePoint app project and select the option for a provider-hosted app or an autohosted app, Visual Studio 2012 automatically creates a second project for the remote web that is configured as the Web Project. Whenever you debug the Visual Studio solution containing these two projects, Visual Studio 2012 performs a substitution to replace ~remoteAppUrl with the current URL of the Web Project. After the substitution, the app manifest contains a start page URL that looks like this:

https://localhost:44300/Pages/Default.aspx

The key point is that Visual Studio 2012 replaces the ~remoteAppUrl token during a debugging session before the app manifest is installed into the SharePoint host environment. This provides you with a convenience in the debugging phase of a SharePoint app project.

Now, think about what happens after you have finished testing and debugging an app and its remote web. Visual Studio 2012 provides a Publish command with which you can build a final version of the AppManifest.xml file that will be distributed along with your app. In this case, what will Visual Studio 2012 do with the ~remoteAppUrl token? The answer is different depending on whether the app is an autohosted app or a provider-hosted app.

When you use the Publish command with an autohosted app, Visual Studio 2012 builds a final version of the AppManifest.xml in which the ~remoteAppUrl token remains within the <StartPage> element. This is done because the actual URL to the remote web of an autohosted app will not be known until the app installation process has started and the Office 365 environment has created the remote web. You can see that the ~remoteAppUrl token is replaced by Visual Studio 2012 in some scenarios and by the Office 365 environment in other scenarios.

When you use the Publish command with a provider-hosted app, the final version of the AppManifest.xml cannot contain the ~remoteAppUrl token. You must know the URL to the remote web ahead of time. Therefore, when it is used with a provider-hosted app, the Publish command prompts you for several pieces of information including the actual URL where the remote web will be deployed.

When creating the URL for the <StartPage> element, it is a standard practice to include a query string that contains another dynamic token named {StandardTokens}, as demonstrated in the following example:

~remoteAppUrl/Pages/Default.aspx?{StandardTokens}

The {StandardTokens} token is never replaced by Visual Studio 2012. Instead, this dynamic token remains inside the final version of the app manifest that is installed in the SharePoint host environment. The SharePoint host environment performs a substitution on {StandardTokens} token whenever it creates the URL for an app launcher. This substitution involves replacing the {StandardTokens} token with a standard set of query string parameters that are frequently used in SharePoint app development such as the SPHostUrl parameter and the SPLangauge parameter, as shown in the following:

default.aspx?SPHostUrl=http%3A%2F%2Fwingtipserver&SPLanguage=en%2DUS

When you implement the code behind the start page of a SharePoint app, you can generally expect that the page will be passed the two query string parameters named SPLanguage and SPHostUrl, which are used to determine the language in use and the URL that points back to the host web. In some scenarios, the SharePoint host environment will add additional query string parameters.

Understanding the app web

Each time you install a SharePoint app, you must install it on a specific target site. A SharePoint app has the ability to add its own files to the SharePoint host environment during installation. For example, a SharePoint-hosted app must add a start page and will typically add other resources, as well, such as a CSS file and a JavaScript file to implement the app’s user experience. The SharePoint host environment stores these files in the standard fashion by adding them to the content database associated with the site in which the app is being installed.

Beyond adding basic files such as a start page and a JavaScript file, a SharePoint app also has the ability to create other SharePoint-specific site elements in the SharePoint host during installation such as lists and document libraries. Let’s look at an example.

Imagine that you want to create a simple SharePoint app to manage customers. During installation, the app can be designed to create a customer list using the standard Contacts list type along with a set of pages designed to provide a snazzy user experience for adding and finding customers. Your app could additionally be designed to create a document library upon installation so that the app can store customer contracts as Microsoft Word documents, whereby each Word document would reference a specific customer item in the customers list.

So, where does the SharePoint host environment store the content added by an app during installation? The answer is inside a special child site that the SharePoint host environment creates under the site where the app has been installed. This child site is known as the app web.

The app web is an essential part of the SharePoint app model because it represents the isolated storage that is owned by an installed instance of a SharePoint app. The app web provides a scope for the app’s private implementation details. Note that an app by default has full permissions to read and write content within its own app web. However, SharePoint app has no other default permissions to access content from any other location in the SharePoint host environment. The app web is the only place where an app can access content without requesting permissions that then must be granted by a user.

There is a valuable aspect of the SharePoint app model that deals with uninstalling an app and ensuring that all the app-specific storage is deleted automatically. In particular, the SharePoint host environment will automatically delete the app web for an app whenever the app is uninstalled. This provides a set of cleanup semantics for SharePoint apps that is entirely missing from the development model for SharePoint solutions; when an app is uninstalled, it doesn’t leave a bunch of junk behind.

Understanding the app web-hosting domain

Now, it’s time to focus on the start page for a SharePoint-hosted app. As you have seen, the start page for a SharePoint-hosted app is added to the app web during installation. Consider a scenario in which you have installed a SharePoint app with the name of MyFirstApp in a SharePoint team site, which is accessible through the following URL:

https://intranet.wingtip.com.

During app installation, the SharePoint host environment creates the app web as a child site under the site where the app is being installed. The SharePoint host environment creates a relative URL for the app web based on the app’s Name property. Therefore, in this example, the app web is created with a relative path of MyFirstApp. If the app’s start page named default.aspx is located in the app web within the Pages folder, the relative path to the start page is MyFirstApp/Pages/default.aspx. Your intuition might tell you that the app’s start page will be accessible through a URL that combines the URL of the host web together with the relative path to the app’s start page, as in the following:

https://intranet.wingtip.com/MyFirstApp/Pages/default.aspx

However, this is not the case. The SharePoint host environment does not make the app web or any of its pages accessible through the same domain as the host web that is used to launch the app. Instead, the SharePoint host environment creates a new unique domain on the fly each time it creates a new app web as part of the app installation process. By doing so, the SharePoint host environment can isolate all the pages from an app web in its own private domain. The start page for a SharePoint-hosted app is made accessible through a URL that looks like this:

https://wingtiptenant-ee060af276f95a.apps.wingtip.com/MyFirstApp/Pages/Default.aspx

At this point, it should be clear why you are required to configure the <StartPage> element for a SharePoint-hosted app by using the ~appWebUrl token. The URL to the app web is not known until the SharePoint host environment creates the new domain for the app web during installation. After creating the domain for an app web, the SharePoint host environment can replace the ~appWebUrl token with an actual URL.

Let’s examine the URL that is used to access the app web in greater detail. Consider the following URL, which is used to access an app web in an on-premises farm:

wingtiptenant-ee060af276f95a.apps.wingtip.com/MyFirstApp

The first part of the app web URL (wingtiptenant) is based on the name of the tenancy where the app has been installed. This value is configurable in an on-premises farm. In the Office 365 environment, the tenancy name is established when the customer creates a new account, and it cannot be changed afterward.

The second part of the app web URL (ee060af276f95a) is known as an APPUID. This is a unique 14-character identifier created by the SharePoint host environment when the app is installed. Remember that the APPUID is really an identifier for an installed instance of an app, as opposed to an identifier for the app itself.

The third part of the app web URL (apps.wingtip.com) is the app web hosting domain. You have the ability to configure this in an on-premises farm to whatever value you would like. Just ensure that you have also configured the proper DNS setting for this domain so that it resolves to an IP address pointing to the web server(s) of your on-premises farms. In Office 365 the app web-hosting domain is always sharepoint.com.

Now, ask yourself this fundamental question: why doesn’t the SharePoint host environment serve up pages from the app web by using the same domain as the host web from which the app has been launched? The reasons why the SharePoint host environment serves up pages from the app web in their own isolated domain might not be obvious. There are two primary reasons why the SharePoint app model does this. Both of these reasons are related to security and the enforcement of permissions granted to an app.

The first reason for isolating an app web in its own private domain has to do with preventing direct JavaScript calls from pages in the app web back to the host web. This security protection of the SharePoint app model builds on the browser’s built-in support for prohibiting cross-site scripting (XSS). Because JavaScript code running on pages from an app web originates from a different domain, this code cannot directly call back to the host web. More specifically, calls from JavaScript running on app web pages do not run with the same established user identity as JavaScript code-behind pages in the host web. Therefore, the JavaScript code running on app web pages doesn’t automatically receive the same set of permissions as JavaScript code running on pages from the host web.

The second reason for creating an isolated domain for each app web has to do with processing of JavaScript callbacks that occur on the web server of the SharePoint host environment. Because the SharePoint host environment creates a new unique domain for each app web, it can determine exactly which app is calling when it sees a JavaScript callback originating from a page in an app web.

The key point is that the SharePoint host environment is able to use an internal mechanism to authenticate an app that uses JavaScript callbacks originating from its app web. As a result, the SharePoint host environment can enforce a security policy based on the permissions that have been granted to the app.

Remember that a SharePoint app has a default set of permissions by which it can access its app web but has no other permissions by default to access any other site. The ability of the SharePoint host environment to authenticate an app by inspecting the URL of incoming calls originating from the app web hosting domain is essential to enforcing this default permissions scheme.

Working with app user-interface entry points

Every SharePoint app requires a start page. As you know, the URL to the start pages is used within an app launcher to redirect the user from the host web to the start page. This type of entry into the user interface of the app is known as a full immersion experience because the app takes over the user interface of the browser with a full-page view.

The user interface guidelines of SharePoint app development require the app start page to provide a link back to the host web. This requirement exists so that a user can always return to the host web from which the app has been launched. When you are developing a SharePoint-hosted app, there is a standard master page used in app webs named app.master that automatically adds the required link back to the host web for you.

When developing a cloud-based app with the start page in the remote web, you cannot rely on a SharePoint master page to automatically provide the link on the start page which redirects the user back to the host web. Instead, you must use a technique that involves reading the SPHostUrl parameter which is passed to the start page in the query string. This is one of the key reasons why you always want to follow the practice of adding the {StandardTokens} token to the start page URL of a cloud-hosted app.

There are several different techniques that you can use in the code behind a start page in the remote web to read the SPHostUrl parameter value from the query string and use it to configure the required link back to the host web. For example, you can accomplish this task with server-side C# code or with client-side JavaScript code. In Chapter 4, you can see how to accomplish this task by using a client-side JavaScript component known as the chrome control.

In addition to the required start page, a SharePoint app can optionally provide two other types of entry points known as app parts and UI custom actions. Unlike the start page, you use app parts and UI custom actions to extend the user interface of the host web.

Building app parts

An app part is a user interface element that is surfaced on pages in the host web by using an IFrame. Once an app with an app part has been installed, a user can then add an app part to pages in the host web by using the same user interface experience that is used to add standard web parts.

You implement an app part in Visual Studio 2012 by using a client web part. This makes most developers ask, “What’s the different between an app part and a client web part?” The best way to think about this is that the term “app part” is meant for SharePoint users, whereas the term “client web part” is used by developers to describe the implementation of an app part.

Despite having similar names, client web parts are very different from the standard web parts that are familiar to most SharePoint developers. In particular, a client web part cannot have any server-side code that runs within the SharePoint host environment. The implementation of a client web part must follow the rules of SharePoint app development.

Client web parts are supported under each of the three app hosting models. You implement a client web part in a SharePoint-hosted app by using HTML, CSS, and JavaScript. In a cloud-hosted app, you also have the option of implementing the behavior for a client web part by using server-side code in the remote web.

At first, many developers assume that a client web part is nothing more than an IFrame wrapper around an external web page. However, the client web part provides significant value beyond that. When you configure the URL within a client web part, you can use the same tokens as with the start page, such as ~appWebUrl, ~remoteAppUrl, and {StandardTokens}. Client web parts also support adding custom properties, as well. Furthermore, the page behind a client web part is often passed contextual security information that allows it to call back into the SharePoint host environment with an established app identity. You can think of the client web part as an IFrame on steroids.

When you want to add a new client web part to a SharePoint app project, you use the Add New Item command. The Add New Item dialog box in Visual Studio 2012 provides a Client Web Part item template, as shown in Figure 1-7.

When you add a new project item for a client web part, Visual Studio 2012 adds an elements.xml file to the SharePoint app project that contains a ClientWebPart element. The following code is a simple example of the XML definition for a client web part in a SharePoint-hosted app project that is implemented by using a page inside the app web:

<ClientWebPart Name="MyAppPart" Title="My App Part" Description="My description"
               DefaultWidth="300" DefaultHeight="200" >

  <Content Type="html" Src="~appWebUrl/Pages/AppPart1.aspx" />

</ClientWebPart>

As you can see from this example, the content displayed in a client web part is configured by assigning a URL to the Src attribute of the <Content> element. The web page that is referenced by this URL is usually added to either the app web or to the remote web. However, you can even reference a web page on the Internet that is neither in an app web nor in a remote web. The only important restriction is that the web page cannot be returned with the X-Frame-Options header in the HTTP response. This is a header used by some websites to prevent its pages from being used inside an IFrame with a type of attack known as clickjacking.

Here is something that can catch you off guard when creating a client web part in a SharePoint-hosted app: the default behavior of SharePoint 2013 is to add the X-Frame-Options header with a value of SAMEORIGIN in the HTTP response when it serves up pages from a SharePoint site. The result of this is that a page served up from the app web will not work when you attempt to use it as the page behind a client web part. The way to deal with this problem is to add the following directive to the top of any page in the app web referenced by a client web part to suppress the default behavior of adding the X-Frame-Options header:

<WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

When you develop client web parts, you can add custom properties. The real value of custom properties is that they can be tailored by the user in the browser in the same fashion as a user customizes the properties of standard web parts. You define a custom property by adding a <Properties> element into the <ClientWebPart> element and then adding a <Property> element within that, as illustrated in Listing 1-2.

Listing 1-2 Client Web Part properties

<Properties>
  <Property
    Name="MyProperty"
    Type="string"
    WebBrowsable="true"
    WebDisplayName="My Custom Property"
    WebDescription="Insightful property description"
    WebCategory="Custom Properties"
    DefaultValue="Some default value"
    RequiresDesignerPermission="true" />
</Properties>

Once you have added a custom property, you must then modify the query string at the end of the URL that is assigned to the Src attribute in the <Content> element. You do this by adding a query string parameter and assigning a value based on a pattern by which the property name is given an underscore before it and after it. Thus, for a property named MyProperty, you should create a query string parameter and assign it a value of _MyProperty_. This would result in XML within the <Content> element that looks like the following:

<Content
  Type="html"
  Src="~appWebUrl/Pages/AppPart1.aspx?MyPropertyParameter=_MyProperty_"
/>

Note that you can use any name you want for the query string parameter itself. It’s when you assign a value to the parameter that you have to use actual property name and follow the pattern of adding the underscores both before and after.

Building UI custom actions

A UI custom action is a developer extension in the SharePoint app model with which you can add custom commands to the host site. The command for a UI custom action is surfaced in the user interface of the host site by using either a button on the ribbon or a menu command in the menu associated with items in a list or documents in a document library that is known as the Edit Control Block (ECB) menu. It is the act of installing an app with UI custom actions that automatically extends the user interface of the host site with ribbon buttons and ECB menu commands.

As in the case of the client web part, UI custom actions are supported in each of the three app hosting models. However, a UI custom action is different than the client web part because its purpose is not to display content in the host web. Instead, it provides an executable command for business users with which they can display a page supplied by the app. The page that is referenced by a UI custom action can be in either the app web or the remote web.

As a developer, you have control over what is passed in the query string for a UI custom action. This makes it possible to pass contextual information about the item or the document on which the command was executed. This in turn makes it possible for code inside the app to discover information such as the URL that can be used to access the item or document by using either the Client-Side Object Model (CSOM) or the new Representational State Transfer (REST) API, which is discussed in Chapter 2, “Client-Side Programming.”

Keep in mind that an app will require additional permissions beyond the default permission set in order to access content in the host web. This topic is discussed in Chapter 3, “SharePoint App Security.” This current chapter will only discuss how to create a UI custom action that passes contextual information to a page supplied by the app. Chapter 3 also covers what’s required to actually use this information to call back into the SharePoint host environment.

In the dialog box shown earlier in Figure 1-6, you can see that Visual Studio 2012 provides a project item template named UI Custom Action. When you use this item template to create a new UI custom action, Visual Studio 2012 adds a new elements.xml file to your SharePoint app project. When you look inside the elements.xml file you find a <CustomAction> element that you can modify to define either an ECB menu item or a button on the ribbon.

Many SharePoint developers already have experience working with custom actions in SharePoint 2007 and SharePoint 2010. The good news is that the manner in which you edit the XML within the <CustomAction> element for a SharePoint app project works the same way as it does for a SharePoint solution project. The bad news is that many of the custom actions available when developing farm solutions are not available when developing a SharePoint app.

In particular, a SharePoint app only allows for UI custom actions that create ECB menu commands and ribbon buttons. The SharePoint app model imposes this restriction to provide a balance between functionality and security concerns. Furthermore, you are prohibited from adding any custom JavaScript code when you configure the URL for a UI custom action in a SharePoint app. If this restriction were not enforced, JavaScript code from the app could call into the host site without being granted the proper permissions.

Suppose that you want to create a UI custom action to add a custom ECB menu item to all the items in every Contacts list within the host site. You can structure the <CustomAction> element to look like that presented in Listing 1-3.

Listing 1-3 A Custom Action definition

<CustomAction
  Id="CustomAction1"
  RegistrationType="List"
  RegistrationId="105"
  Location="EditControlBlock"
  Sequence="100"
  Title="Send Contact To App">

    <UrlAction Url="~appWebUrl/Pages/Action1.aspx" />

</CustomAction>

Once you install an app with this UI custom action, it registers an ECB menu command for every item in lists that have a list type ID of 105. This is the ID for the Contacts list type. Once the app is installed, the host web will provide a custom menu item on the ECB menu for each item in any Contacts list. An example of what the ECM menu command looks like is shown in Figure 1-8.

The default action of a UI custom action is to redirect the user to the page referenced by the URL configured within the <UrlAction> element. This makes sense for a scenario in which you want to move the user from the host web into the full immersion experience of the app in order to do some work. However, this default behavior will provide a distracting user interface experience for a scenario in which a user wishes to return to the host web immediately after seeing the page displayed by the app. For these scenarios, you can modify the UI custom action to display the page from the app as a dialog box in the context of the host web. The user interface experience is much better because the user can see a page from the app without ever leaving the host web.

Listing 1-4 demonstrates the technique to display the page referenced by a UI custom action as a dialog box, which involves adding three attributes to the <CustomAction> element. First, you add the HostWebDialog attribute and assign it a value of true. Next, you add the HostWebDialogWidth attribute and the HostWebDialogHeight attribute and assign them values to set the width and height of the dialog box.

Listing 1-4 Displaying a referenced page

<CustomAction
  Id="CustomAction1"
  RegistrationType="List"
  RegistrationId="105"
  Location="EditControlBlock"
  Sequence="100"
  Title="Display more information about this contact"
  HostWebDialog="TRUE"
  HostWebDialogWidth="480"
  HostWebDialogHeight="240" >

    <UrlAction Url="~appWebUrl/Pages/Action1.aspx" />

  </CustomAction>
</Elements>

Now, let’s go into more detail about configuring the Url attribute of the <UrlAction> element. When you configure the URL you can use the same familiar tokens that you use with the start page and with client web parts such as ~appWebUrl, ~remoteAppUrl, and {StandardTokens}, as shown in the following code:

<UrlAction Url="~appWebUrl/Pages/Action1.aspx" />

However, UI custom actions support several additional tokens beyond what is available for start pages and client web parts. These are the tokens that make it possible to pass contextual information about the item or document on which the command was executed. For example, you can pass the site-relative URL to the item or document by using the {ItemURL} token.

<UrlAction Url="~appWebUrl/Pages/Action1.aspx?ItemUrl={ItemURL}" />

In most scenarios, you will also need the absolute URL to the root of the host web, which can be passed by using the {HostUrl} token. Note that the Url is configured by using an XML attribute, so you cannot use the “&” character when combining two or more parameters together. Instead, you must use the XML encoded value, which is &amp, as shown in the following example:

<UrlAction Url="~appWebUrl/Pages/Action1.aspx?HostUrl={HostUrl}&amp;ItemURL={ItemUrl}" />

Note that the SharePoint host environment substitutes values into these tokens by using standard URL encoding. This means that you must write code in the app to use a URL decoding technique before you can use these values to construct a URL that can be used to access the item or document.

Table 1-2 lists the tokens that can be used in UI custom actions, beyond those that are also supported in start pages and client web parts. Note that some of the tokens work equally well regardless of whether the UI custom action is used to create an ECB menu item or a button in the ribbon. However, the {ListID} token and the {ItemID} token work with ECB menu items but not with buttons on the ribbon. Conversely, the {SelectedListId} token and the {SelectedItemId} token work with buttons on the ribbon but not with ECB menu items.

Table 1-2 The extra tokens available when configuring the URL for a UI custom action

Token	Purpose
{HostUrl}	Provides an absolute URL to the root of the host site
{SiteUrl}	Provides an absolute URL to the root of the current site collection
{Source}	Provides a relative URL to the page that hosts the custom action
{ListURLDir}	Provides a site-relative URL to the root folder of the current list
{ListID}	Provides a GUID-based ID of the current list (ECB only)
{ItemURL}	Provides a site-relative URL to the item or document
{ItemID}	Provides an integer-based ID of the item or document (ECB only)
{SelectedListId}	Provides a GUID-based ID of the selected list (ribbon only)
{SelectedItemId}	Provides an integer-based ID of the selected item or document (ribbon only)