Dashboards excel at showcasing a multitude of valuable information on a single page. However, there are instances when a basic dashboard layout falls short in accommodating the desired volume of data on a single screen. In this article, we will demonstrate a method for amplifying information presentation through the use of a tabbed component. It’s important to note that this is not a built-in and we will need to write a bit of code.

Here is what we after:

Instructions1. Create a dashboard

Dashboard layout needs to conform the following structure. The first row needs to have a single cell with the code snippet. All other objects that you want to appear in a tabbed element should occupy rows below the code snippet. It doesn’t matter how many elements are in each row, they will be moved inside the tabbed element anyway. In our example we are going to display three grids, a single record, a chart and a report inside the tabbed element.

Here is a sample layout:

1. Code snippet

The idea of this code is to display an empty tabbed panel. Nothing special here, just a basic Bootstrap-based HTML code. The only important thing here is the ID of this panel which is dashTabs. We are going to use this ID in both Javascript and CSS code.

PHP

$header = "Tabs";echo "<div class='panel with-tabs panel-default form-tabs' id='dashTabs'><div class='panel-heading'><ul class='nav nav-tabs' role='tablist'></ul></div><div class='panel-body'><div class='tab-content'></div></div></div>"; C#

header = new XVar("Tabs");MVCFunctions.Echo("<div class='panel with-tabs panel-default form-tabs' id='dashTabs'>\r\n<div class='panel-heading'>\r\n<ul class='nav nav-tabs' role='tablist'>\r\n</ul>\r\n</div>\r\n<div class='panel-body'>\r\n<div class='tab-content'>\r\n</div>\r\n</div>\r\n</div>"); 3. Dashboard Javascript OnLoad event

This code loops through the array of dashboard elements and moves them one by one to the tabbed panel. See inline comments for more info.

// an array with all the dashboard element that we want to display in individual tabsvar tabs\_pages = [ { table: "employees", page: "grid" }, { table: "customers", page: "grid" }, { table: "customers", page: "record" }, { table: "Bar Chart", page: "chart" }, { table: "order details", page: "grid" }, { table: "categories Report", page: "report" }];$.each(tabs\_pages, function () { var goodTableName = Runner.goodFieldName(this.table); var tabId = goodTableName + "\_" + this.page; // adding a new tab $(".nav", "#dashTabs").append("<li role='presentation'><a aria-controls='settings' role='tab' data-toggle='tab' href='#" + tabId + "'>" + this.table + " " + this.page + "</a></li>"); $(".tab-content", "#dashTabs").append("<div role='tabpanel' class='tab-pane' id='" + tabId + "'></div>"); var pageDashElement = $("#dashelement\_"+goodTableName+"\_"+this.page+pageid);// adding a CSS class for the new tab element pageDashElement.addClass("tabelement");// adding this new element to the tab $("#" + tabId).append(pageDashElement);});// make sure that the first tab is selected$("li[role='presentation']", "#dashTabs").first().find("a").click(); 4. Custom CSS

This code goes to Style Editor -> Modify CSS section. Just hiding some unnecessary decoration and making tabs look prettier.

[data-itemtype="dashboard-item"].tabelement .panel-heading{ background: none; border: none;}[data-itemtype="dashboard-item"].tabelement .panel-heading .rnr-dbebrick{ color:#337ab7;}[data-itemtype="dashboard-item"].tabelement .panel-heading .rnr-dbebrick .btn{ background: #337AB7; color: white;} Happy coding!