Freigeben über

Webportal mit einem Branding versehen

  • Artikel

Gilt für: SQL Server 2016 (13.x) Reporting Services und höher Power BI-Berichtsserver

Erfahren Sie, wie Sie Ihr SQL Server Reporting Services (SSRS) oder Power BI-Berichtsserver Webportal an das Branding Ihres Unternehmens anpassen. Mithilfe eines hochgeladenen Markenpakets können Sie Farben, Logos und andere Formatierungselemente in Ihrem Webportal ändern. Ein Markenpaket besteht aus drei Elementen, die Sie als ZIP-Datei verpacken. In den folgenden Abschnitten werden die Elemente im Markenpaket beschrieben und Beispiele für den Inhalt bereitgestellt.

Voraussetzungen

  • SQL Server Reporting Services (SSRS) oder Power BI-Berichtsserver installiert und konfiguriert.
  • Zugriff auf das Reporting Services Webportal.
  • Verbindung zu einer Berichtsserver-Datenbank.

Erstellen des Markenpakets

Um das Markenpaket zu erstellen, können Sie Dateien von Grund auf neu erstellen oder sich Beispiele von der GitHub-Website herunterladen.

Wenn Sie bei Null anfangen, beginnen Sie mit der Erstellung jeder Datei und benennen Sie die Dateien in Ihrem Markenpaket wie folgt:

  • metadata.xml
  • colors.json
  • logo.png (optionale Datei)

Diese Datei kann einen beliebigen Namen haben.

Wenn Sie sich für ein Beispiel-Branding-Paket entscheiden, laden Sie die Zip-Datei herunter und entpacken Sie die Dateien, damit Sie sie nach Ihren Wünschen bearbeiten können.

Definieren von Markenmetadaten (metadata.xml)

Die metadata.xml-Datei gibt den Namen des Markenpakets an und verweist auf die Dateien colors.json und logo.png.

Um den Namen des Markenpakets zu ändern, ändern Sie das Attribut Name des Elements SystemResourcePackage .

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
</SystemResourcePackage>

Sie können ein Logo in Ihr Markenpaket einschließen. Dieses Element ist im Element Inhalt enthalten.

Das folgende Beispiel enthält keine Logodatei:

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
    </Contents>
</SystemResourcePackage>

Das folgende Beispiel enthält eine Logodatei:

<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
    type="UniversalBrand"
    version="2.0.2"
    name="Multicolored example brand"
    >
    <Contents>
        <Item key="colors" path="colors.json" />
        <Item key="logo" path="logo.png" />
    </Contents>
</SystemResourcePackage>

Definieren des Farbschemas (colors.json)

Die colors.json-Datei definiert das Farbschema für Ihr Markenpaket. Wenn Sie das Markenpaket hochladen, extrahiert der Server die Name/Wert-Paare aus dieser Datei und fügt sie mit dem primären LESS-Stylesheet zusammen, brand.less. Es verarbeitet das Stylesheet und stellt die resultierende CSS-Datei dem Client zur Verfügung. Alle Farben im Stylesheet folgen der hexadezimalen Darstellung einer Farbe mit sechs Zeichen.

Das folgende Beispiel zeigt eine colors.json-Datei:

{
    "name": "Multicolored example brand",
    "version": "1.0",
    "interface": {
        "primary": "#009900",
        "primaryContrast": "#ffffff",
        "secondary": "#042200",
        "neutralPrimary": "#d8edff",
        "neutralSecondary": "#e9d8eb",
        "danger": "#ff0000",
        "success": "#00ff00",
        "warning": "#ff8800"
    },
    "theme": {
        "dataPoints": ["#0072c6", "#f68c1f", "#269657"],
        "good": "#85ba00",
        "bad": "#e90000",
        "neutral": "#edb327"
    }
}

Funktionsweise von LESS-Variablen

Das LESS-Stylesheet enthält Blöcke, die auf vordefinierte LESS-Variablen verweisen. Das folgende Beispiel zeigt, wie das Stylesheet LESS-Variablen verwendet:

/* primary buttons */
.btn-primary {
    color:@primaryButtonColor;
    background-color:@primaryButtonBg;
}

Obwohl diese Syntax der CSS-Syntax ähnelt, sind die Farbwerte, denen das Symbol @ vorangestellt ist, für LESS eindeutig. Die colors.json-Datei legt diese Variablen fest.

Die Datei colors.json kann z. B die folgenden Werte enthalten:

"primary":"#009900",
"primaryContrast":"#ffffff"

Bei der Verarbeitung werden die LESS-Variablen den entsprechenden Werten in der colors.json Datei zugeordnet. Das resultierende CSS sieht wie das folgende Beispiel aus:

.btn-primary {
    color: #ffffff;
    background-color: #009900;
}

Alle primären Schaltflächen werden dann dunkelgrün mit weißem Text gerendert.

Objekte in colors.json

Die colors.json Datei enthält zwei Hauptobjekte:

  • Schnittstelle: Eigenschaften, die für das Webportal spezifisch sind.
  • Thema: Eigenschaften, die für die von Ihnen erstellten mobilen Berichte spezifisch sind.

Das interface-Objekt wird in die folgenden Eigenschaften unterteilt:

Abschnitt BESCHREIBUNG
Primär Schaltflächen- und Hoverfarben.
Secondary Titelleiste, Suchleiste, linkes Menü (sofern angezeigt) und die Textfarbe für diese Elemente.
Neutral Primary Hintergründe für Startseiten- und Berichtsbereich.
Neutral Secondary Hintergründe für Textfeld- und Ordneroptionen sowie das Menü „Einstellungen“.
Neutral Tertiary Hintergründe für Siteeinstellungen.
Gefahr-/Warn-/Erfolgsmeldungen Farben für diese Meldungen.
KPI Steuert die Farben für eine gute (1), neutrale (0), neutrale (-1) und keine.

Das theme-Objekt wird in die folgenden Eigenschaften unterteilt:

Abschnitt Beschreibung
Datenpunkte Farben für Datenpunkte in Diagrammen und Visualisierungen.
Gut/Schlecht/Neutral Farben, die den Status angeben.
Hintergrund Allgemeine Hintergrundfarbe.
Vordergrund Vordergrundfarbe insgesamt.
Kartenbasis Basisfarbe für Karten.
Hintergrund/Vordergrund/Akzent des Bereichs Farben für Bereiche.
Tabellenakzente Akzentfarben für Tabellen.

Wenn Sie zum ersten Mal eine Verbindung zu einem Server mit einem Mobile Report Publisher herstellen, auf dem ein Markenpaket installiert ist, fügt der Publisher das Thema zur Liste der verfügbaren Themen hinzu.

Screenshot des Dialogs „Farbpalette auswählen“

Dann können Sie dieses Design für alle mobilen Berichte verwenden, die Sie erstellen, auch wenn sie nicht für den gleichen Server vorgesehen sind, auf dem Sie das Design bereitgestellt haben.

Verwenden eines Logos (logo.png)

Wenn Sie ein Logo mit Ihrem Markenpaket einschließen, wird es im Webportal anstelle des Namens angezeigt, den Sie für das Webportal festgelegt haben.

Achten Sie darauf, dass das Logo im PNG-Dateiformat vorliegt. Die Dateidimensionen werden skaliert, sobald sie auf den Server hochgeladen werden. Das Logo wird auf ca. 290 x 60 Pixel skaliert.

Anwenden des Markenpakets auf das Webportal

  1. Greifen Sie auf das Webportal zu.

  2. Klicken Sie auf das Zahnradsymbol oben rechts und wählen Sie dann Site-Einstellungen.

    Screenshot der Liste Einstellungen mit hervorgehobener Option Website-Einstellungen.

  3. Wählen Sie Branding aus.

    Screenshot der Seite der Website-Einstellungen mit hervorgehobener Registerkarte

    Zurzeit installiertes Markenpaket zeigt entweder den Namen des hochgeladenen Pakets an, oder es zeigt Keines an.

  4. Wählen Sie Brandingpaket hochladen aus. Das Markenpaket wird auf den Berichtsserver hochgeladen, und das Webportal zeigt das aktualisierte Branding sofort an.

Markenpaket hinzufügen, herunterladen oder entfernen

Wenn ein Markenpaket im Feld Aktuell installiertes Markenpaket aufgeführt ist, können Sie das Paket herunterladen oder entfernen. Sie sollten das Paket herunterladen, wenn Sie Anpassungen an dem vorhandenen Paket vornehmen und diese Änderungen übernehmen möchten. Wenn Sie das Paket entfernen, wird das Webportal sofort auf das Standardbranding zurückgesetzt. Wählen Sie entweder Herunterladen oder Entfernen aus, je nachdem, welche Aktion Sie ausführen möchten.

Weitere Fragen? Stellen Sie eine Frage im Reporting Services-Forum.