August 22, 2023

Tabbed elements in dashboards

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:

Instructions

1. 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:

2. 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>";

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

2 thoughts on “Tabbed elements in dashboards”

Fernando Humanes says:

September 5, 2023 at 12:59 pm

Congratulations!!!

It is a good and beautiful solution.

If possible, it would be an excellent improvement for the next versions.

Greetings,
Fahad says:

November 7, 2023 at 7:23 am

Great solution.
This is working well and nice, but I have problem to add another tab that contains a code snippet element.
Does any body tried to display a code snippet element for one of the tabs.

Regards,

Tabbed elements in dashboards

Instructions

2 thoughts on “Tabbed elements in dashboards”

Leave a Reply

Sign up for the free email newsletter for news about our
database publishing software, tips, and more.

Resources

Company

Instructions

Related posts:

2 thoughts on “Tabbed elements in dashboards”

Leave a Reply