UX design for apps in SharePoint 2013
Published: July 16, 2012
Learn about the user experience (UX) options that you have when you build apps in SharePoint 2013.
Applies to: apps for SharePoint | Office 365 | SharePoint Foundation 2013 | SharePoint Server 2013
As a developer, you should always give high priority to the user experience (UX) when you are creating apps. The model for apps for SharePoint offers many UX components and mechanisms that help you build a great user experience. The user experience in the app model is also flexible enough to let you use the techniques and platforms that best adapt to the needs of end users.
As the app developer, you have to know the architecture of your app. After you determine how your app will be distributed in remote and SharePoint platforms, you can decide among the available alternatives for building your app UX. You might ask yourself the following questions:
What can I use if I am creating a cloud-hosted app?
What can I use if I am creating a SharePoint-hosted app? For more information, see Hosting options for apps for SharePoint.
How can I connect my UX to the host web? For more information, see Host webs, app webs, and SharePoint components in SharePoint 2013.
The following diagram shows the main scenarios and options to consider when you are designing your app UX.
In choosing your design, you should fundamentally consider which parts of your app are hosted in SharePoint and which are not. You should also consider how your app interacts with the host web.
Suppose that you determine that some of your user experience is not hosted in SharePoint. In these scenarios, it is expected that your end users go back and forth between a SharePoint website and the cloud-hosted app. You can use the techniques and tools in the platform, but SharePoint also provides resources to help you design a smooth experience for users.
The following UX resources are available for cloud-hosted apps in SharePoint 2013:
Chrome control: The chrome control enables you to use the navigation header of a specific SharePoint site in your app without needing to register a server library or use a specific technology or tool. To use this functionality, you must register a SharePoint JavaScript library through standard <script> tags. You can provide a placeholder by using an HTML div element and further customize the control by using the available options. The control inherits its appearance from the specified SharePoint website. For more information, see How to: Use the client chrome control in apps for SharePoint.
Watch the video: SharePoint 2013 chrome control
Stylesheet: You can reference a SharePoint website’s style sheet in your app for SharePoint and use it to style your webpages using the available classes. In addition, if the end users change the SharePoint website’s theme, your app can adopt the new set of styles without modifying the reference in your app. For more information, see How to: Use the SharePoint style sheet in apps for SharePoint.
Figure 2 shows the resources in the model for apps for SharePoint for cloud-hosted apps.
If your app is hosted in SharePoint, the user experience is less likely to change very much when users move back and forth between the host web and the app web. When the app is deployed, the app web takes the style sheet and theme from the host web. You can still use the chrome control and style sheet in a SharePoint-hosted app, but the most significant difference with cloud-hosted scenarios is the availability of the app template.
The following UX resource is available for SharePoint-hosted apps:
App template: The app template includes the app.master masterpage. It is the default option when you create an app web.
SharePoint-hosted apps also benefit themselves from existing resources and technologies in SharePoint such as the Ribbon, web part infrastructure and client-side rendering.
Some of the use cases for your app can be triggered from within the host web. SharePoint provides ways to open your app from a document library or list in addition to ways to show some of your app UX within SharePoint-hosted pages.
The following UX resources are available to connect your app UX to the host web:
Custom actions: You can use custom actions to connect the host web UX with your app. There are two types of custom actions: Ribbon or ECB. A custom action can send parameters such as the list or item on which it was invoked to a remote page. For more information, see How to: Create custom actions to deploy with apps for SharePoint.
App parts: You can include some of your app user experience in the host web by using app parts. The app part is available in the Web Part gallery in the host web when you deploy the app. Users can add the app part to a page by using the Web Part Adder control. For more information, see How to: Create app parts to deploy with apps for SharePoint.
Figure 3 shows the resources in the model for apps for SharePoint to connect your app UX to the host web.
To learn how to use the app UX options in apps for SharePoint, see the following resources:
Three ways to think about design options for apps for SharePoint
Important aspects of the app for SharePoint architecture and development landscape
Host webs, app webs, and SharePoint components in SharePoint 2013
How to: Use the SharePoint style sheet in apps for SharePoint
How to: Use the client chrome control in apps for SharePoint
How to: Create custom actions to deploy with apps for SharePoint
Date | Description |
|---|---|
July 16, 2012 | Initial publication |
