Learn more about SQL Server tools

mssqltips logo
 

Tutorials          DBA          Dev          BI          Career          Categories          Webcasts          Whitepapers          Today's Tip          Join

Tutorials      DBA      Dev      BI      Categories      Webcasts

DBA    Dev    BI    Categories

 
SQL Server Transparent Data Encryption Alternative - Free Webinar
 

SQL Server 2016 Reporting Services Custom Branding Example


By:   |   Last Updated: 2016-12-08   |   Comments (1)   |   Related Tips: > Reporting Services Configuration

Problem

Branding is an essential aspect of an organization. It differentiates the company from its competitors and reflects an organization's image. Some of the important aspects of branding are the organization's logo and design templates (color scheme).  SQL Server 2016 provides several enhancements to Reporting Services and the Reporting Services web portal is a new, updated, modern portal, which incorporates KPIs, Mobile Reports, Paginated Reports, Excel, and Power BI Desktop files. The Reporting Services web portal now supports branding for organizations and in this tip we will cover what can be done with branding.

Solution

Before we move on, let's look at the Reporting Services web service portal in SQL Server 2014. We do not have any functionality available in this version to customize the web portal with a custom logo, colors, or themes.

SQL Server 2014 Reporting Services Portal

In SQL Server 2016, the Reporting Services web portal looks like below. One of the significant enhancements to SQL Server 2016 Reporting Services is that it now supports branding of the web portal with a logo and custom colors.

SQL Server 2016 Reporting Services Portal

SQL Server 2016 Reporting Services Branding Overview

To brand the Reporting Services web portal, we need to create a brand package. A brand package consists of the following files:

  • metadata.xml
  • logo.png
  • colors.json
Files for the SQL Server Reporting Services Branding Package

We can download a sample brand package from this link.

Metadata.xml

The metadata.xml file is used to set the name of the brand package that we want to see in the Reporting Services web portal. It is also references an entry for the colors.json and logo.png files.

Below is the code for the Metadata.xml.

Below is the code for the Metadata.xml

To change the name of your brand package, we need to modify the name attribute of the SystemResourcePackage element.  We can see here that this file has a reference to colors.json and logo.png files in contents. If we want to use a logo, the logo file format should be .png. The logo file dimensions will be scaled once uploaded to the server.

modify the name attribute of the SystemResourcePackage element

It's optional to use a logo in the branding package, so if we do not want to use a logo the contents section is as below.

optional to use a logo in the branding package

Colors.json

As per MSDN, 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. This LESS file is then processed and the resulting CSS file is served to the client. All colors in the stylesheet follow the six-character hexadecimal representation of a color.  We can use this link to check the hex color codes.

The colors.json file looks like below:

The colors.json file

The colors.json file has two main categories for Reporting Service web portal:

  • Interface
  • Theme

Interface Section for colors.json

The interface section includes items that are particular to the Reporting Services web portal.  The interface section further breaks down to the following items under the interface section.

  • Primary
  • Secondary
  • Neutral Primary
  • Neutral Secondary
  • Neutral Tertiary
  • Danger/Warning/Success
  • KPIs

The primary section represents button and hover colors.  Below is the code in colors.json for the primary section:

overview

In the below screenshot of the Reporting Services web portal, we can see the mapping of color codes with its look.

Reporting Services web portal mapping of color codes

Primary and Secondary Color Codes in SQL Server Reporting Services

The secondary section provides colors for title bar, search bar, left-hand menu and text color for those items.  Below is the code in colors.json for the secondary section:

overview

Secondary Contrast Colors in SQL Server Reporting Services

Color Mapping for Branding in SQL Server Reporting Services

The neutral primary section is for the home and report area backgrounds.  The neutral secondary section is for text boxes, folder backgrounds and setting menu. The neutral tertiary section provides site background settings.  Below is the code in colors.json for these items:

overview

The neutral primary section is for the home and report area backgrounds

The neutral secondary section is for text boxes, folder backgrounds and setting menu.

There is also a color section for danger, warning and success messages.

The KPI section controls the colors for a good (1), neutral (0), neutral (-1) and none.

Below is the code in colors.json for messages and KPIs:

overview
Code in colors.json for messages and KPIs

Theme Section for colors.json

This group contains the themes for the SQL Server Mobile Report Publisher.

We can see the color palette contains the below items:

  • Background color
  • Data points (twelve colors lines at the bottom) with options for good (green), bad (red), and neutral (yellow).
  • Accent, maps, colors, panel backgrounds

In the SQL Server Mobile Report Publisher, we can see the themes as below:

SQL Server Mobile Report Publisher Themes

Customize Branding with Logo

To customize branding for the SQL Server 2016 Reporting Services web portal, we have to modify the metadata.xml and colors.json files. For this demo purpose, I included the MSSQLTips logo for our Reporting Services web portal. We will be looking at each file to do the customization.

You can find the customized branding package in the attachment section.

Metadata.xml

Below is the metadata.xml for my branding package. I have specified the name in metadata.xml as MSSQLTips.

overview

Colors.Json

I have modified the hex code of colors in the colors.json files for different items.

{
 "name":"MSSQLTIPS",
 "version":"1.0",
 "interface":{
  "primary":"#e0893c",
  "primaryAlt":"#6a8c99",
  "primaryAlt2":"#621013",
  "primaryAlt3":"#e40000",
  "primaryAlt4":"#e14e50",
  "primaryContrast":"#fff",

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

  "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":"#321e94",
  "kpiBad":"#883a30",
  "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"
 }
}

Once we have all these files ready, zip all the files into a single zip file. We need to follow these things when creating the zip of the branding files.

  • All three files should be in a folder.
  • There should not be any subfolders.

We might get the below error when applying the brand package if all files are not contained in a zip file.

error when applying the brand package if all files are not contained in a zip file

When we unzip and then re-zip the folder, it will create a subfolder in the package. Therefore, this does not work when we upload the branding package.

To create a zip package, select the files:

Create a zip package to overcome the error

Right click and add to zip folder:

Add the Files to the Branding Package.zip

Upload Branding Package into SSRS

Open Reporting Services web portal: http://localhost/Reports_SQL2016/

SQL Server Reporting Services Web Portal

Go to Site Settings:

SQL Server Reporting Services Site Settings

From left-hand menu, click on the Branding menu item:

Upload the branding package in SQL Server Reporting Services

Click on Upload brand package and browse to the path where the zip file exists.

Select the branding package for SQL Server Reporting Services

Select the zip file and click open. At this point the Reporting Services web portal will refresh automatically. It will display the new branding look for the Reporting Services web portal as per defined in the files.

Updated SQL Server Reporting Services Interface with Branding

If we hover the mouse over 'Upload Branding Package' its color also changes:

hover the mouse over 'Upload Branding Package' its color also changes

The Reports home page looks like this:

SQL Server Reporting Services Reports home page

We can see the below changes in the Reporting Services web portal:

  • MSSQLTIPS logo
  • The new color format for background, text, menu, etc...

We can see below the Reporting Services web portal before and after applying the branding package.

SQL Server Reporting Services web portal before and after applying the branding package

In my color.json file, I modified color codes for KPI also.

"kpiGood":"#321e94",
"kpiBad":"#883a30",

Therefore, we can see that KPIs also reflect the new color format.

KPIs also reflect the new color format

Customize Branding without a Logo

If we do not wish to include logo in the branding package, remove the logo option from the metadata.xml file.

overview

The package folder should look like the below image without a logo file.

package folder should look like the below image without a logo file

Zip the files (colors.json and metadata.xml) into a single file. Apply the branding package as we did above and we can see that the Reporting Services web portal colors have been set and there is no logo on the site.

Reporting Services web portal colors have been set and there is no logo on the site

If we want to modify the text header from SQL Server Reporting Services, go to Site Settings > General tab:

modify the text header from SQL Server Reporting Services

Change the Name. For example, I want it to display MSSQLTIPS, so make the change and click Apply.

Display MSSQLTIPS in the SQL Server Reporting Services Header

We can see the header displays MSSQLTIPS.

MSSQLTIPS in the header of the SQL Server Reporting Services Portal

Download and Remove Custom Branding in SQL Server Reporting Services

If we want to download the branding package or remove it, we can do it from the branding menu in the site settings page.

Go to Branding menu from SSRS site settings menu:

Download and Remove Custom Branding

Here we can see it shows the name of the currently installed brand package. To download the package click on download and provide the location. If we want to remove the branding package, click on Remove.

Remove Brand Package in SQL Server Reporting Services

Click yes, as we want to remove this brand package and revert to the default and the Reporting Services web portal will return to the default settings as shown below.

Default Reporting Services web portal

SQL Server 2016 Reporting Services branding is a great enhancement to customize as needed, explore further and customize your SSRS portal.

Next Steps


Last Updated: 2016-12-08


next webcast button


next tip button



About the author
MSSQLTips author Rajendra Gupta Rajendra is a Consultant DBA with 9+ years of extensive experience in database administration including large critical OLAP, OLTP, Reporting and SharePoint databases.

View all my tips





Post a comment or let the author know this tip helped.

All comments are reviewed, so stay on subject or we may delete your comment. Note: your email address is not published. Required fields are marked with an asterisk (*).

*Name    *Email    Email me updates 


Signup for our newsletter
 I agree by submitting my data to receive communications, account updates and/or special offers about SQL Server from MSSQLTips and/or its Sponsors. I have read the privacy statement and understand I may unsubscribe at any time.



    



Monday, December 25, 2017 - 1:38:59 PM - Frank Geisler Back To Top

Hi Rajendra!

Great article. To ease this process I wrote an Application called SSRS Styler which can be downloaded here for free https://github.com/Frank-Geisler/SSRS_Styler

 

have a nice day

 

Frank


Learn more about SQL Server tools