How to: Use a SharePoint website's style sheet in apps for SharePoint

apps for SharePoint

Learn how to use a SharePoint 2013 website’s style sheet in an app for SharePoint.

Last modified: June 25, 2014

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

You can reference the style sheet of a SharePoint website in your app for SharePoint and use it to style your webpages by using the style sheet in SharePoint 2013. In addition, if someone changes the SharePoint website’s style sheet or theme, you can adopt the new set of styles in your app without modifying the style sheet reference in your app.

Important note Important

If your webpages use the chrome control or the app master page, the styles are already available for you to use, and you don’t have to reference the style sheet manually by using the procedure in this article.

To follow the steps in this example, the following are required:

  • Microsoft Visual Studio 2012

  • Office Developer Tools for Visual Studio 2012

  • A SharePoint 2013 development environment (app isolation required for on-premises scenarios)

For guidance on how to set up a development environment that fits your needs, see Start building apps for Office and SharePoint.

Core concepts to know before using the SharePoint style sheet in an app for SharePoint

The following table lists useful articles that can help you understand the concepts involved in a scenario that uses the SharePoint style sheet.

Table 1. Core concepts before using the style sheet

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.

UX design for apps in SharePoint 2013

Learn about the user experience (UX) options and alternatives that you have when building apps for SharePoint.

Host webs, app webs, and SharePoint components in SharePoint 2013

Learn about the difference between host webs and app webs. Find out which SharePoint 2013 components can be included in an app for SharePoint, which components are deployed to the host web, which components are deployed to the app web, and how the app web is deployed in an isolated domain.

This code example shows you how to use the SharePoint website’s stylesheet.

To use the style sheet in an app for SharePoint, follow these steps:

  1. Create the app for SharePoint and remote web projects.

  2. Force the app web provisioning by creating a blank page.

  3. Add a webpage to the web project, and reference the style sheet.

  4. Edit the StartPage element in the app manifest.

Figure 1 shows a SharePoint webpage that is using the style sheet.

Figure 1. Webpage using the style sheet

A web page using the stylesheet control

To create the app for SharePoint and remote web projects

  1. Open Visual Studio 2012 as administrator. (To do this, right-click the Visual Studio 2012 icon on the Start menu, and choose Run as administrator.)

  2. Create a new project using the App for SharePoint 2013 template.

    Figure 2 shows the location of the App for SharePoint 2013 template in Visual Studio 2012, under Templates, Visual C#, Office/SharePoint, Apps.

    Figure 2. App for SharePoint 2013 Visual Studio template

    App for SharePoint 2013 Visual Studio template
  3. Provide the SharePoint website’s URL that you want to use for debugging.

  4. Choose Provider-hosted as the hosting option for your app.

    After the wizard finishes, you should have a structure in Solution Explorer that resembles Figure 3.

    Figure 3. App for SharePoint projects in Solution Explorer

    App for SharePoint projects in Solution Explorer

To force the app web provisioning by creating a blank page

  1. Right-click the app for SharePoint project, and add a new module.

  2. Right-click the new module, and add a new item.

  3. Under Visual C# items, Web, choose HTML Page. Rename the page to blank.html.

  4. Delete the contents of blank.html.

To add a webpage that references the style sheet in the web project

  1. Right-click the web project, and add a new Web Form. Rename the Web Form to StyleConsumer.aspx.

  2. Replace the contents of the Web Form .aspx file with the following code. The code performs the following tasks:

    • Loads the blank.html page from the app web in an invisible IFrame.

    • Loads the defaultcss.ashx file from the app web.

    • Uses the available styles.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StyleConsumer.aspx.cs" Inherits="StylesheetAppWeb.StyleConsumer" %>
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>App using stylesheet</title>
    </head>
    <body>
    
        <!-- The main page title -->
        <h1 class="ms-core-pageTitle">Stylesheet app</h1>
    
        <!-- Some subtitle -->
        <h1 class="ms-accentText">For people</h1>
    
        <!-- Subtitle comments -->
        <h2 class="ms-accentText">who care about the style in their apps</h2>
        <p></p>
        <div>
            <h2 class="ms-webpart-titleText">Get started with style in your app... </h2>
            <a class="ms-commandLink" href="#">some command</a>
            <br />
            This sample shows you how to use some of the classes defined in the SharePoint website's style sheet.
        </div>
    
        <!-- Script to load SharePoint resources
            and load the blank.html page in
            the invisible iframe
            -->
        <script type="text/javascript">
            "use strict";
            var appweburl;
    
            (function () {
                var ctag;
    
                // Get the URI decoded app web URL.
                appweburl =
                    decodeURIComponent(
                        getQueryStringParameter("SPAppWebUrl")
                );
                // Get the ctag from the SPClientTag token.
                ctag =
                    decodeURIComponent(
                        getQueryStringParameter("SPClientTag")
                );
    
                // The resource files are in a URL in the form:
                // web_url/_layouts/15/Resource.ashx
                var scriptbase = appweburl + "/_layouts/15/";
    
                // Dynamically create the invisible iframe.
                var blankiframe;
                var blankurl;
                var body;
                blankurl = appweburl + "/Pages/blank.html";
                blankiframe = document.createElement("iframe");
                blankiframe.setAttribute("src", blankurl);
                blankiframe.setAttribute("style", "display: none");
                body = document.getElementsByTagName("body");
                body[0].appendChild(blankiframe);
    
                // Dynamically create the link element.
                var dclink;
                var head;
                dclink = document.createElement("link");
                dclink.setAttribute("rel", "stylesheet");
                dclink.setAttribute("href", scriptbase + "defaultcss.ashx?ctag=" + ctag);
                head = document.getElementsByTagName("head");
                head[0].appendChild(dclink);
            })();
    
            // Function to retrieve a query string value.
            // For production purposes you may want to use
            //  a library to handle the query string.
            function getQueryStringParameter(paramToRetrieve) {
                var params;
                var strParams;
    
                params = document.URL.split("?")[1].split("&");
                strParams = "";
                for (var i = 0; i < params.length; i = i + 1) {
                    var singleParam = params[i].split("=");
                    if (singleParam[0] == paramToRetrieve)
                        return singleParam[1];
                }
            }
        </script>
    </body>
    </html>
    
    

    In some cases, the user has to be authenticated to SharePoint before your page will be able to download the CSS and images for styling. Link tags do not automatically authenticate a user who is not already signed in. Consider loading a page resource from the app web in your webpage to force the user’s authentication before linking to the CSS file. In this example, the blank.html page is loaded in an invisible IFrame.

To edit the StartPage element in the app manifest

  1. Double-click the AppManifest.xml file in Solution Explorer.

  2. On the Start page drop-down menu, choose the webpage that uses the style sheet.

To build and run the solution

  1. Make sure that the app for SharePoint project is set as the startup project.

  2. Press the F5 key.

    Note Note

    When you press F5, Visual Studio builds the solution, deploys the app, and opens the permissions page for the app.

  3. Choose the Trust It button.

  4. Click the StylesheetBasic app icon.

  5. Figure 4 shows the resulting webpage using the SharePoint styles.

    Figure 4. Style sheet used in the page

    Stylesheet control used in a web page
  6. You can also go to the host web and change the theme. Then reload the app webpage to use the new styles.

Table 2. Troubleshooting the solution

Problem

Solution

Visual Studio does not open the browser after you press the F5 key.

Set the app for SharePoint project as the startup project.

Certificate error.

Set the SSL Enabled property of your web project to false. In the app for SharePoint project, set the Web Project property to None, and then set the property back to your web project’s name.

This article demonstrated how to use the style sheet in an app for SharePoint. As a next step, you can learn about other UX components that are available for apps for SharePoint. To learn more, see the following:

Show:
© 2014 Microsoft