Verwenden des Stylesheets einer SharePoint-Website in SharePoint-Add-Ins

Artikel
04/08/2023

Sie können in einer SharePoint-Add-In auf das Stylesheet einer SharePoint-Website verweisen und Ihre Webseiten damit gestalten, indem Sie das Stylesheet in SharePoint verwenden. Wird das Stylesheet oder Design der SharePoint-Website geändert, können Sie die neuen Formatvorlagen in Ihrer App übernehmen, ohne den Verweis auf das Stylesheet in der App zu ändern.

Wichtig

Wenn Sie für Ihre Webseiten das Chromsteuerelement oder die App-Masterseite verwenden, sind die Formatvorlagen für Sie bereits verfügbar. Sie müssen dann nicht manuell auf das Stylesheet verweisen, indem Sie das in diesem Artikel beschriebene Verfahren nutzen.

Voraussetzungen für die Verwendung der Beispiele in diesem Artikel

Sie benötigen eine Entwicklungsumgebung, wie unter Zwei Arten von SharePoint-Add-Ins: von SharePoint-gehostet und vom Anbieter gehostet erläutert.

Kernkonzepte, die Ihnen vor der Verwendung des SharePoint-Stylesheets in einem SharePoint-Add-In bekannt sein sollten

In der folgenden Tabelle sind Artikel aufgeführt, die Ihnen das Verständnis der relevanten Konzepte in einem Szenario mit Verwendung des SharePoint-Stylesheets erleichtern.

Titel des Artikels	Beschreibung
SharePoint-Add-Ins	Hier finden Sie Informationen über das neue Add-In-Modell in SharePoint, das es Ihnen ermöglicht, Add-Ins als kompakte, einfach zu verwendende Lösungen für Endbenutzer zu erstellen.
UX-Design für SharePoint-Add-Ins	Erfahren Sie mehr über UX-Optionen (User eXperience, Benutzerumgebung) und Alternativen beim Erstellen von SharePoint-Add-Ins.
Hostwebsites, Add-In-Websites und SharePoint-Komponenten in SharePoint	Lernen Sie den Unterschied zwischen Hostwebs und App-Webs kennen. Erfahren Sie, welche SharePoint-Komponenten in eine SharePoint-Add-In eingeschlossen werden können, welche Komponenten im Hostweb und welche im App-Web bereitgestellt werden und wie das App-Web in einer isolierten Domäne bereitgestellt wird.

Codebeispiel: Verwenden des Stylesheets einer SharePoint-Website in einem SharePoint-Add-In

In diesem Codebeispiel wird veranschaulicht, wie das Stylesheet der SharePoint-Website verwendet wird. Auf diese Weise können Ihre Remotewebanwendungsseiten die Darstellung der Seiten im SharePoint-Hostweb übernehmen.

So verwenden Sie das Stylesheet in einem SharePoint-Add-In

Erstellen Sie das vom Anbieter gehostete SharePoint-Add-In.
Erzwingen Sie die Add-In-Webbereitstellung, indem Sie eine leere Seite erstellen.
Fügen Sie dem Webprojekt eine Webseite hinzu, und verweisen Sie auf das Stylesheet.
Bearbeiten Sie das Element im Add-In-Manifest.

In der folgenden Abbildung1 ist eine SharePoint-Webseite dargestellt, die das Stylesheet verwendet.

Webseite, die das Stylesheet verwendet

Eine Webseite, die das Stylesheet-Steuerelement verwendet

So erstellen Sie die Projekte für das SharePoint-Add-In und das Remoteweb

Öffnen Sie Visual Studio als Administrator. (Klicken Sie dazu im Menü Start mit der rechten Maustaste auf das Symbol für Visual Studio, und wählen Sie Als Administrator ausführen aus.)
Erstellen Sie das von einem Anbieter gehostete SharePoint-Add-In wie unter Erste Schritte beim Erstellen von von einem Anbieter gehosteten SharePoint-Add-Ins erläutert, und nennen Sie es StylesheetAdd-In.

So erzwingen Sie die Add-In-Webbereitstellung, indem Sie eine leere Seite erstellen

Klicken Sie mit der rechten Maustaste auf das SharePoint-Add-In-Projekt, und fügen Sie ein neues Modul hinzu.
Klicken Sie mit der rechten Maustaste auf das neue Modul, und fügen Sie ein neues Element hinzu.
Klicken Sie unter Visual C#-Elemente und Web auf HTML-Seite. Benennen Sie die Seite in blank.html um.
Löschen Sie den Inhalt der Datei "blank.html".

So fügen Sie im Webprojekt eine Webseite hinzu, die auf das Stylesheet verweist

Klicken Sie mit der rechten Maustaste auf das Webprojekt, und fügen Sie ein neues Web Form hinzu. Benennen Sie das Web Form in StyleConsumer.aspx um.

Ersetzen Sie den Inhalt der Web Form-ASPX-Datei durch den folgenden Code. Mit dem Code werden die folgenden Aufgaben durchgeführt:

Laden der Seite "blank.html" aus dem App-Web in ein unsichtbares IFrame-Element.
Laden der Datei "defaultcss.ashx" aus dem App-Web.
Verwenden der verfügbaren StyleSheets.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StyleConsumer.aspx.cs" Inherits="StylesheetAppWeb.StyleConsumer" %>

    <!DOCTYPE html>
    <html>
    <head>
        <title>Add-in using stylesheet</title>
    </head>
    <body>

        <!-- The main page title -->
        <h1 class="ms-core-pageTitle">Stylesheet add-in</h1>

        <!-- Some subtitle -->
        <h1 class="ms-accentText">For people</h1>

        <!-- Subtitle comments -->
        <h2 class="ms-accentText">who care about the style in their add-ins</h2>
        <p></p>
        <div>
            <h2 class="ms-webpart-titleText">Get started with style in your add-in... </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 add-in 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("&amp;");
                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 einigen Fällen muss der Benutzer in SharePoint authentifiziert werden, bevor die Seite die CSS und Bilder für die Formatierung herunterladen kann. Durch Linktags wird ein Benutzer, der nicht bereits angemeldet ist, nicht automatisch authentifiziert. Sie können eine Seitenressource aus dem App-Web für die Webseite laden, um die Authentifizierung des Benutzers zu erzwingen, bevor Sie eine Verknüpfung mit der CSS-Datei erstellen. In diesem Beispiel wird die Seite "blank.html" in ein unsichtbares IFrame-Element geladen.

So bearbeiten Sie das StartPage-Element im Add-In-Manifest

Doppelklicken Sie im Projektmappen-Explorer auf die Datei AppManifest.xml.
Wählen Sie im Dropdownmenü Startseite die Webseite aus, auf der das Stylesheet verwendet wird.

So erstellen Sie die Lösung und führen Sie sie aus

Stellen Sie sicher, dass das "SharePoint-Add-In"-Projekt als Startprojekt festgelegt ist.
Wählen Sie die F5-Taste.

Hinweis

Wenn Sie F5 drücken, erstellt Visual Studio die Lösung, stellt das Add-In bereit und öffnet die Berechtigungsseite für das Add-In.
Wählen Sie die Schaltfläche Vertrauen.
Klicken Sie auf das Add-In-Symbol StylesheetBasic.
Die folgende Abbildung zeigt die resultierende Webseite unter Verwendung der SharePoint-Stylesheets.

Auf der Seite verwendetes Stylesheet
Sie können auch zum Hostweb wechseln und das Design ändern. Laden Sie die Add-In-Webseite neu, um die neuen Stile zu verwenden.

Problembehandlung für die Lösung

Problem	Lösung
Der Browser wird nicht geöffnet, nachdem Sie F5 gedrückt haben.	Legen Sie das SharePoint-Add-In-Projekt als Startprojekt fest.
Zertifikatfehler	Legen Sie die Ssl-Aktiviert-Eigenschaft Ihres Webprojekts auf false fest. Legen Sie im SharePoint-Add-In-Projekt die Eigenschaft Webprojekt auf Keine fest, und legen Sie die Eigenschaft dann wieder auf den Namen Ihres Webprojekts fest.