Personalizzazione del portale WebBranding the web portal

QUESTO ARGOMENTO SI APPLICA A:THIS TOPIC APPLIES TO: sìSQL Server Reporting Services (2016 e successive)SQL Server Reporting Services (2016 and later) sìServer di report di Power BIPower BI Report Server sìSQL Server Reporting Services (2016 e successive)SQL Server Reporting Services (2016 and later) sìServer di report di Power BIPower BI Report Server

È possibile modificare l'aspetto del portale Web personalizzandolo in base all'azienda.You can alter the appearance of the web portal by branding it to your business. Questa operazione viene eseguita tramite un pacchetto del marchio.This is done through a brand package. Il pacchetto del marchio è stato progettato in modo non sia necessaria una conoscenza approfondita dei fogli di stile CSS per poterlo creare.The brand package has been designed so you don’t need deep cascading style sheet (CSS) knowledge to create it.

Creazione del pacchetto del marchioCreating the brand package

Un pacchetto del marchio per Reporting Services consiste di tre elementi e presenta la forma di un file ZIP.A brand package for Reporting Services consists of three items and is packaged as a zip file.

  • color.jsoncolor.json
  • metadata.xmlmetadata.xml
  • logo.png (facoltativo)logo.png (optional)

I file devono avere i nomi elencati sopra.The files must have the names listed above. Al file ZIP è possibile assegnare il nome che si vuole.The zip file can be named however you like.

metadata.xmlmetadata.xml

Il file metadata.xml consente di impostare il nome del pacchetto del marchio e ha una voce di riferimento sia per il file colors.json che per il file logo.png.The metadata.xml file allows you to set the name of the brand package, and has a reference entry for both your colors.json and logo.png files.

Per cambiare il nome del pacchetto del marchio, modificare l'attributo name dell'elemento SystemResourcePackage.To change the name of your brand package, change the name attribute of the SystemResourcePackage element.

name="Multicolored example brand"  

Nel pacchetto del marchio è possibile includere facoltativamente l'immagine del logo.You can optionally include a logo picture in your brand package. Questo elemento sarà elencato all'interno dell'elemento Contents.This item would be listed within the Contents element.

Esempio senza un file del logo.Example without a logo file.

<Contents>  
  <Item key="colors" path="colors.json" />  
</Contents>  

Esempio con un file del logo.Example with a logo file.

<Contents>  
  <Item key="colors" path="colors.json" />  
  <Item key="logo" path="logo.png" />  
</Contents>  

Colors.jsonColors.json

Quando viene caricato il pacchetto del marchio, il server estrae le coppie nome/valore appropriate dal file colors.json e le unisce con il foglio di stile LESS master, brand.less.When the brand package is uploaded, the server extracts the appropriate name/value pairs from the colors.json file and merges them with the master LESS stylesheet, brand.less. Questo file LESS viene quindi elaborato e il file CSS risultante viene servito al client.This LESS file is then processed and the resulting CSS file is served to the client. Tutti i colori del foglio di stile sono indicati nel formato esadecimale e sei caratteri.All colors in the stylesheet follow the six-character hexadecimal representation of a color.

Il foglio di stile LESS contiene blocchi che fanno riferimento ad alcune variabili LESS predefinite come le seguenti.The LESS stylesheet contains blocks that reference some predefined LESS variables like the following.

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

Nonostante la sintassi sia simile a quella di CSS, i valori colore, che presentano il prefisso @symbol, sono esclusivi di LESS.While this resembles CSS syntax, the color values, prefixed with the @symbol, are unique to LESS. Si tratta di variabili i cui valori sono impostati dal file json.They are variables whose values are set by the json file.

Ad esempio, se il file colors.json avesse i valori seguenti.For example, if the colors.json file had the following values.

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

L'output elaborato ricercherebbe la variabile LESS @primaryButtonBg e riscontrerebbe che è mappata alla proprietà json denominata primary, che in questo esempio è #009900.The processed output would look up the @primaryButtonBg LESS variable and see that it maps to the json property called primary, which in this example is #009900. Pertanto genererebbe il CSS corretto.It would therefore output the proper CSS.

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

Tutti i pulsanti con la proprietà primary sarebbero mostrati in verde scuro con testo bianco.All of the primary buttons would be rendered dark green with white text.

Il file colors.json, per Reporting Services, ha due categorie principali i cui elementi sono raggruppati.The colors.json file, for Reporting Services, has two main categories which items are grouped.

  • Interfaccia: include gli elementi che sono specifici del portale Web di Reporting Services.Interface: includes items that are specific to the Reporting Services web portal.
  • Tema: include gli elementi che sono specifici dei report mobili creati dall'utente.Theme: includes items that are specific to mobile reports that you create.

La sezione dell'interfaccia è suddivisa nei raggruppamenti seguenti.The interface section is broken down into the following groupings.

SezioneSection DescriptionDescription
primaryPrimary Colori dei pulsanti e colori mostrati al passaggio del mouse.Button and hover colors.
SecondariaSecondary Colore della barra del titolo, della barra di ricerca, del menu del lato sinistro (se mostrato) e del testo per questi elementiTitle bar, search bar, left hand menu (if displayed) and text color for those items
Neutro primarioNeutral Primary Sfondi dell'area home e report.Home and report area backgrounds.
Neutro secondarioNeutral Secondary Sfondi delle caselle di testo e delle opzioni di cartella, menu delle impostazioni.Text box and folder options backgrounds, and the settings menu.
Neutro terziarioNeutral Tertiary Sfondi delle impostazioni del sito.Site settings backgrounds.
Messaggi di pericolo/avviso/operazione riuscitaDanger/Warning/Success messages Colori per questi messaggi.Colors for those messages.
Indicatore KPIKPI Controlla i colori che rappresentano un valore positivo (1), neutro (0), negativo (-1) e nessuno.Controls the colors for a good (1), neutral (0), neutral (-1) and none.

La prima volta che ci si connette a un server con Mobile Report Publisher dove è distribuito un pacchetto del marchio, il tema verrà aggiunto a quelli disponibili e utilizzabili, nel menu in alto a destra dell'applicazione.The first time you connect to a server with the Mobile Report Publisher, that has a brand package deployed, the theme will be added to the available themes you can use in the upper right-hand menu of the app.

ssRSBrandingMobileReportPublisher

È quindi possibile usare quel tema nei report per dispositivi mobili che verranno creati, anche se non sono per lo stesso server su cui il tema è distribuito.You can then use that theme for any mobile reports that you create, even if they aren’t for the same server that you have the theme deployed on.

Se si include un logo nel pacchetto del marchio, esso apparirà nel portale Web al posto del nome che è stato specificato per il portale Web nel menu Impostazioni sito.If you include a logo with your brand package, it will appear in the web portal in place of the name you set for the web portal in the Site Settings menu.

Il file che si include per il logo deve usare il formato di file PNG.The file you include for the logo must use the PNG file format. Le dimensioni del file saranno scalate dopo il caricamento sul server.The file dimensions will be scaled once uploaded to the server. Dovrebbe essere scalato a circa 290 x 60 px.It should scale to around 290px x 60px.

Applicazione del pacchetto del marchio al portale WebApplying the brand package to the web portal

Per aggiungere, scaricare o rimuovere un pacchetto del marchio, è possibile eseguire le operazioni seguenti.To add, download, or remove a brand package, you can do the following.

  1. Selezionare l'ingranaggio in alto a destra.Select the gear in the upper right.

  2. Selezionare Impostazioni sito.Select Site Settings.

    ssRSGearMenu

  3. Selezionare Personalizzazione.Select Branding.

    ssRSBranding

Pacchetto del marchio attualmente installato mostrerà il nome del pacchetto che è stato caricato o mostrerà Nessuno.Currently installed brand package will either display the name of the package that has been uploaded, or it will display None.

Carica pacchetto del marchio applicherà il pacchetto al portale Web.Upload brand package will apply the package to the web portal. Le modifiche saranno visibili immediatamente.You will see it take effect immediately.

È anche possibile scaricare o rimuovere il pacchetto.You can also Download or Remove the package. Rimuovendo il pacchetto, il portale Web sarà reimpostato immediatamente sul marchio predefinito.Removing the package will reset the web portal to the default brand immediately.

Esempio metadata.xmlmetadata.xml example

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

Esempio colors.jsonColors.json example

{  
    "name":"Multicolored example brand",  
    "version":"1.0",  
    "interface":{  
        "primary":"#b31e1e",  
        "primaryAlt":"#ca0806",  
        "primaryAlt2":"#621013",  
        "primaryAlt3":"#e40000",  
        "primaryAlt4":"#e14e50",  
        "primaryContrast":"#fff",  

        "secondary":"#042200",  
        "secondaryAlt":"#0f4400",  
        "secondaryAlt2":"#155500",  
        "secondaryAlt3":"#217700",  
        "secondaryContrast":"#49e63c",  

        "neutralPrimary":"#d8edff",  
        "neutralPrimaryAlt":"#c9e6ff",  
        "neutralPrimaryAlt2":"#aedaff",  
        "neutralPrimaryAlt3":"#88c8ff",  
        "neutralPrimaryContrast":"#0a2b4c",  

        "neutralSecondary":"#e9d8eb",  
        "neutralSecondaryAlt":"#d9badc",  
        "neutralSecondaryAlt2":"#b06cb5",  
        "neutralSecondaryAlt3":"#a75bac",  
        "neutralSecondaryContrast":"#250a26",  

        "neutralTertiary":"#f79220",  
        "neutralTertiaryAlt":"#f8a54b",  
        "neutralTertiaryAlt2":"#facc9b",  
        "neutralTertiaryAlt3":"#fce3c7",  
        "neutralTertiaryContrast":"#391d00",  

        "danger":"#ff0000",  
        "success":"#00ff00",  
        "warning":"#ff8800",  
        "info":"#00ff",  
        "dangerContrast":"#fff",  
        "successContrast":"#fff",  
        "warningContrast":"#fff",  
        "infoContrast":"#fff",  

        "kpiGood":"#4fb443",  
        "kpiBad":"#de061a",  
        "kpiNeutral":"#d9b42c",  
        "kpiNone":"#333",  
        "kpiGoodContrast":"#fff",  
        "kpiBadContrast":"#fff",  
        "kpiNeutralContrast":"#fff",  
        "kpiNoneContrast":"#fff"  
       },  
       "theme":{  
        "dataPoints":[  
            "#0072c6",  
            "#f68c1f",  
            "#269657",  
            "#dd5900",  
            "#5b3573",  
            "#22bdef",  
            "#b4009e",  
            "#008274",  
            "#fdc336",  
            "#ea3c00",  
            "#00188f",  
            "#9f9f9f"  
        ],  

        "good":"#85ba00",  
        "bad":"#e90000",  
        "neutral":"#edb327",  
        "none":"#333",  

        "background":"#fff",  
        "foreground":"#222",  
        "mapBase":"#00aeef",  
        "panelBackground":"#f6f6f6",  
        "panelForeground":"#222",  
        "panelAccent":"#00aeef",  
        "tableAccent":"#00aeef",  

        "altBackground":"#f6f6f6",  
        "altForeground":"#000",  
        "altMapBase":"#f68c1f",  
        "altPanelBackground":"#235378",  
        "altPanelForeground":"#fff",  
        "altPanelAccent":"#fdc336",  
        "altTableAccent":"#fdc336"  
    }  
}  

Altre domande?More questions? Visitare il forum su Reporting ServicesTry asking the Reporting Services forum