Dashboards excel at presenting a wealth of valuable information on a single page. However, sometimes a basic dashboard layout fails to accommodate the desired volume of data on a single screen. In this article, we will demonstrate a method to amplify the presentation of information 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 some code.

Here’s what we’re looking for:

Instructions

1. Create a dashboard

The layout of the dashboard should conform to the following structure. The first line should have a single cell with the code snippet. Any other objects you want to appear in a tabbed item must occupy lines below the snippet. No matter how many items are in each row, they will be moved inside the tabbed item anyway. In our example, we’ll display three grids, a single record, a chart, and a report inside the tabbed item.

Here is an example layout:

2. Code snippet

The idea of ​​this code is to display an empty tabbed panel. Nothing special here, just basic Bootstrap-based HTML. The only important thing here is the ID of this panel which is dashtabs. We will use this identifier in Javascript and CSS code.

PHP

$header = "Tabs";
echo "";

C#

header = new XVar("Tabs");
MVCFunctions.Echo("");

3. Dashboard Javascript OnLoad event

This code goes through the array of dashboard items and moves them one by one to the tabbed panel. See online reviews for more information.

// an array with all the dashboard element that we want to display in individual tabs
var 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">" + this.table + " " + this.page + "</li>");
    $(".tab-content", "#dashTabs").append("");

    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 -> Edit CSS section. Just hide unnecessary decoration and make the tabs 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!