The boards excel to show a multitude of valuable information on a single page. However, there are cases where a basic dashboard design is not reduced to the desired data volume on one screen. In this article, we will demonstrate a method to amplify the presentation of information by using a card component. It is important to keep in mind that this is not an integrated one and we will have to write a little code.

This is what later:

Instructions

1. Create a board

The arrangement of the board must form the following structure. The first row must have a single cell with the fragment of the code. All other objects that you want to appear in a tab element should occupy rows below the code fragment. No matter how many items are in each row, they will be moved inside the tab element. In our example, we will show three grids, a unique record, a graph and a report within the tab element.

Here is a sample design:

2.

The idea of this code is to show an empty eyelash panel. Nothing special here, only an HTML code based on BOOTSRAP BASIC. The only important thing here is the identifier of this panel that is Dashtabs. We will use this identifier in both JavaScript and CSS code.

PHP

$header = "Tabs";
echo "";

C#

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

3. JavaScript Dance Board

This code is built through the range of elements of the board and transfers one by one to the cardboard. Please refer to online comments 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. Personalized CSS

This code goes to Style publisher -> Modify CSS Section. Just hide unnecessary decoration and make the tabs look more beautiful.

[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!