Tabbed Element in Dashboard – Blog Xlinesoft

The Excel dashboard when displaying a lot of valuable information on one page. However, there is an example when the basic dashboard layout fails to accommodate the desired data volume on one screen. In this article, we will show a method for strengthening information presentations through the use of tab components. It is important to note that this is not innate and we need to write a little code.

This is what we are after:

Instruction

1. Create a dashboard

The dashboard layout needs to adjust the following structure. The first row must have a single cell with a code footage. All other objects that you want to display in the tab element must occupy rows under the code piece. No matter how many elements in each line, they will be moved in the tab element. In our example, we will display three lattice, one note, chart and report in the tab element.

The following are the layout samples:

2. Code snippets

The idea of ​​this code is to display an empty tab panel. There is nothing special here, only the basic bootstrap -based HTML code. The only important thing here is the ID of this panel Dashtabs. We will use this ID in the Javascript and CSS code.

PHP

$header = "Tabs";
echo "";

C#

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

3. Javascript dashboard onload event

This code repeats the array of the dashboard element and moves it one by one to the tab panel. See inline comments for more info.

// 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. SPECIAL CSS

This code goes to Style Editor -> Change CSS part. Only hide a few unnecessary decorations and make the tab 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!