Part 3 - Apps Hosting and Branding
This post is in continuation to my previous posts about SharePoint 2013 App Model. You can see the previous posts here:
Before we get into the details of building useful apps using SharePoint 2013, we need to go over the app model architectural overview.
Apps for SharePoint hosting options
The SharePoint 2013 app model provides two broad approaches to hosting your apps for SharePoint:
Within the cloud-hosted approach there are two important subcategories:
These are not exclusive categories: An app for SharePoint can have both SharePoint-hosted and remotely hosted components. Each approach has key features you should consider when deciding how to host your apps.
SharePoint Hosted App
Figure 1: SharePoint-hosted apps
Figure 2: Cloud-hosted apps
In cloud hosted apps, the logic resides outside of SharePoint. The logic can reside either on IIS server OR Windows Azure OR some other cloud solution and it is going to talk to SharePoint using client side object model (CSOM) or REST services and have to be granted permission to SharePoint using OAuth.
Within this category there are two types of apps:
- Provider hosted
Provider-hosted apps for SharePoint includes components that are deployed and hosted outside of the SharePoint farm, usually by the developer. The provider-hosted app for SharePoint interacts with a SharePoint 2013 site but also uses resources and services that reside on the remote site.This approach enables you to use any hosting service you want, but it places the responsibility for creating the installation, upgrade, and uninstallation logic of the remote components on the developer.
Apps that include a Windows Azure Web Site, and possibly also a SQL Azure database, that are automatically installed when the app is installed. The Windows Azure web site and optional SQL Azure database can be included in app package, such that when you provision the app, it automatically creates Windows Azure web site and optional SQL Azure database in Azure. If you are using auto hosting for your app, each installation of the app provisions its own Windows Azure web site. The Windows Azure web sites infrastructure handles load balancing, multi-tenancy, and other important maintenance tasks for you.
Note: Cloud-hosted app is the most preferred hosting model for almost all apps. You can get full power of the web, you can choose your infrastructure and technology, you can run in IIS or in Windows Azure or even on other non-Microsoft infrastructure. Whereas SharePoint hosted apps is good for smaller apps with limited resource storage.
App Shape and Branding
When you build SharePoint apps, one of the design decision is how apps are going to look like and be presented to the user. To design the user experience of the app, you need to understand the following:
- App Shape
Apps for SharePoint fit seamlessly into the SharePoint website where they are installed.
Figure 3: App Shapes option
As shown in figure above, the apps can have three possible type of shapes:
Immersive: An app for SharePoint provides a fully immersive experience and optionally can extend some of the existing UI, such as in menus, or by providing embeddable parts for other pages. Immersive apps will take entire browser experience.
App Part: App parts surface an IFrame element that contains content from your app. Imagine these apps as the ones which add something like a web part to the SharePoint site e.g. weather monitor app. An App Part is nothing but a type of Web Part that is represented by the ClientWebPart class. This kind of Web Part is essentially a wrapper for an IFrame that would host a page of the app.
Extension App: You need to use extension app when you create new actions for documents or list items. Ribbon or context menu extensions make your app available on list items, documents, or anywhere else a ribbon is shown. An app can add links like ribbon, custom actions or ECB menu to the host web. When user will click on the link, user will be redirected to the app web.
Figure 4: Chrome control in a web page
Microsoft has recommended design process as well as basic guidelines for developing quality user experiences for apps. Refer to this link UX design for apps in SharePoint 2013 to understand the recommended UX design process for apps for SharePoint.
Developers are going to primarily use three different types of branding:
App Template: The app template is the default branding option in Visual Studio when you create an app web and pages within that web. The app template can be used only for SharePoint-hosted ASPX pages. The template includes the app.master master page.
Custom Branding: If, instead of aligning to the host site’s theme and fitting into the SharePoint site where your app is installed, you want to use your own brand inside your app, you will have to build your chrome from scratch. However, you should still have a "back to site" link in the upper-left corner of the page that redirects the user back to the site where the app is installed.
In the next post, I will mention about details around SharePoint Hosted apps.