Brandowanie portalu internetowego

Dotyczy: SQL Server 2016 (13.x) Reporting Services i nowsze wersje Power BI Report Server

Dowiedz się, jak dostosować portal internetowy usług SQL Server Reporting Services (SSRS) lub serwera raportów usługi Power BI w celu dopasowania do znakowania firmy. Korzystając z przekazanego pakietu marki, można zmienić kolory, logo i inne elementy stylów w portalu internetowym. Pakiet marki składa się z trzech elementów, które pakujesz jako plik zip. W poniższych sekcjach opisano elementy w pakiecie marki i podano przykłady zawartości.

Wymagania wstępne

• Usługi SQL Server Reporting Services (SSRS) lub Power BI Report Server zostały zainstalowane i skonfigurowane.
• Dostęp do portalu sieciowego Reporting Services.
• Połączenie z bazą danych serwera raportów.

Tworzenie pakietu marki

Aby utworzyć pakiet marki, możesz użyć tworzenia plików od podstaw lub pobierania przykładów z witryny GitHub.

Jeśli zaczynasz od podstaw, zacznij od utworzenia każdego pliku i nazewnictwa plików w pakiecie marki w następujący sposób:

• metadata.xml
• colors.json
• logo.png (plik opcjonalny)

Plik zip może mieć dowolną nazwę.

Jeśli zdecydujesz się użyć przykładowego pakietu znakowania, pobierz plik zip i wyodrębnij pliki, aby można je było edytować zgodnie z potrzebami.

Definiowanie metadanych marki (metadata.xml)

Plik metadata.xml określa nazwę pakietu marki i odnosi się do pliku colors.json oraz logo.png.

Aby zmienić nazwę pakietu marki, zmień atrybut name elementu 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>

Możesz dołączyć logo do pakietu marki. Ten element jest zawarty w elemencie Contents .

Poniższy przykład nie zawiera pliku logo:

<?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>

Poniższy przykład zawiera plik logo:

<?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>

Definiowanie schematu kolorów (colors.json)

Plik colors.json definiuje schemat kolorów pakietu marki. Podczas przekazywania pakietu marki serwer wyodrębnia pary nazwa/wartość z tego pliku i scala je z podstawowym arkuszem stylów LESS. brand.less Przetwarza arkusz stylów i udostępnia wynikowy plik CSS klientowi. Wszystkie kolory w arkuszu stylów są zgodne z sześcioznakową reprezentacją koloru szesnastkowego.

Oto przykład pliku colors.json:

{
    "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"
    }
}

Jak działają zmienne LESS

Arkusz stylów LESS zawiera bloki odwołujące się do wstępnie zdefiniowanych zmiennych LESS. W poniższym przykładzie pokazano, jak arkusz stylów używa zmiennych LESS:

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

Chociaż ta składnia przypomina CSS, wartości kolorów z symbolem @ są unikatowe dla LESS. Plik colors.json ustawia te zmienne.

Na przykład colors.json plik może zawierać następujące wartości:

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

Zmienne LESS są mapowane na odpowiednie wartości w pliku colors.json po przetworzeniu. Wynikowy kod CSS wygląda podobnie do następującego przykładu:

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

Wszystkie podstawowe przyciski wyświetlają się w ciemnozielonym kolorze z białym tekstem.

Obiekty w colors.json

Plik colors.json zawiera dwa główne obiekty:

• Interfejs: właściwości specyficzne dla portalu internetowego.
• Motyw: Właściwości specyficzne dla raportów mobilnych, które tworzysz.

Obiekt interface jest podzielony na następujące właściwości:

Obiekt theme jest podzielony na następujące właściwości:

Użyj logo (logo.png)

Jeśli dołączysz logo do pakietu marki, pojawi się on w portalu internetowym zamiast nazwy, która została pierwotnie ustawiona dla portalu internetowego.

Upewnij się, że logo ma format pliku PNG. Wymiary pliku są skalowane po przesłaniu na serwer. Logo skaluje się do około 290 x 60 pikseli.

Zastosuj pakiet brandingowy na portalu internetowym

1. Uzyskaj dostęp do portalu internetowego.

2. Wybierz ikonę koła zębatego w prawym górnym rogu, a następnie wybierz pozycję Ustawienia witryny.

   

3. Wybierz Branding.

   

   Obecnie zainstalowany pakiet brandingu wyświetla nazwę przesłanego pakietu lub wyświetla Brak.

4. Wybierz Prześlij pakiet marki. Pakiet identyfikacji marki jest przesyłany na serwer raportów, a portal internetowy natychmiast renderuje zaktualizowaną identyfikację.

Pobieranie lub usuwanie pakietu marki

Jeśli w polu Aktualnie zainstalowany pakiet marki zostanie wyświetlony pakiet marki, możesz pobrać lub usunąć pakiet. Możesz pobrać pakiet, jeśli chcesz wprowadzić zmiany w istniejącym pakiecie i zastosować te zmiany. Jeśli usuniesz pakiet, portal internetowy zostanie natychmiast zresetowany do domyślnej marki. Wybierz pozycję Pobierz lub Usuń w zależności od akcji, którą chcesz wykonać.

Więcej pytań? Spróbuj zadać pytanie na forum usług Reporting Services.