Customizing Report Wizard to match your Site’s theme

Changing the Report Builder’s theme to match your existing site’s theme is very easy, especially if your site uses Bootstrap for it’s theme or layout.

You can do it in 2 different ways. One is to add your site’s theme css file to the Report Builder’s layout file. The second and most common scenario for existing applications is to use your own site’s layout file for Report Views also.

First Option: Add your site’s theme css file to Report Builder’s layout file:

For the first option, after¬†installing and setting up .Net Report Builder’s Nuget Package, open up Report Builder’s Layout file, which should be in your “Views/Shared” folder. The file name is _Layout.Report.cshtml:

Simply add your site’s theme’s css file to head section, and .Net Report Builder will match your site’s theme below “bootstrap.cs”.

 <link href="/Content/bootstrap.css" rel="stylesheet" />
 <link href="~/Content/themes/mysite/mytheme.css" rel="stylesheet" />

And that should do it.

Second Option:¬†Use your site’s layout file for Report Viewer:

This is what you would really want to do in most existing applications. This option is also very straight forward. .Net Report Builder uses 2 View files:

  1. /DotNetReport/Index.cshtml
  2. /DotNetReport/Report.cshtml

Open each file, and replace the layout in the first lines to your layout file:
@{
ViewBag.Title = “Report Builder”;
Layout = “../shared/_Layout.Report.cshtml”;
}

To:

@{
 ViewBag.Title = "Report Builder";
 Layout = "../shared/_Layout.cshtml";
}

You have to make sure that you include all the script and css files in your layout file that are in Report Builder’s Layout, but not in yours. Usually common files like jQuery and Bootstrap will already be included.

Next add the route to .Net Report Builder to your application’s menu, and you should be ready to test the layout.

Once you run your your application, .Net Report Builder should look and feel like part of your application.

Here is an example: