{"id":2977,"date":"2023-08-22T19:55:30","date_gmt":"2023-08-23T00:55:30","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=2977"},"modified":"2024-04-13T11:59:54","modified_gmt":"2024-04-13T16:59:54","slug":"tabbed-elements-in-dashboards","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2023\/08\/22\/tabbed-elements-in-dashboards\/","title":{"rendered":"Tabbed elements in dashboards"},"content":{"rendered":"

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. <\/p>\n

Here is what we after:<\/p>\n

\"\"<\/a>
\n<\/p>\n

Instructions<\/h3>\n

1. Create a dashboard<\/p>\n

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. <\/p>\n

Here is a sample layout:
\n\"\"<\/a><\/p>\n

2. Code snippet <\/p>\n

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<\/strong>. We are going to use this ID in both Javascript and CSS code. <\/p>\n

PHP<\/strong><\/p>\n

\n