Dear Team,
We need to develop a dashboard with multiple tabs. Please see below screenshot:
Can you please let us know the steps to achieve this?
Regards
Pushpal
Dear Team,
Any updates on this?
Regards
Pushpal
Dear Team,
Any updates on this?
Regards
Pushpal
Hi,
Go to the dashboard designer and right click. You will get placeholders to add HTML, CSS and JS.
In HTML you will add code to define the tabbed view divs as well as the links which will get triggered. CSS will have the look and feel of the tabs. JS will have on click action defined.
Refer to the below code
HTML: In the data-src will come the URLs of the actual dashboards/reports which will get triggered when clicked.
<div class="grid-stack-wrapper hi-custom-component">
<div class="component-container" id="czb0ni4atbg">
<div style="width:100%">
<ul class="nav nav-tabs" id="tabs">
<li class="active" ><a href="#district">District</a></li>
<li><a href="#teacher">Teacher</a></li>
<li><a href="#student">Student</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="district">
<iframe id="districtIFrame" data-src="http://localhost:8085/hi-ee/hi.html?dir=1463377807724/1463983915686/1463838054907&file=d1560c88-be0d-4380-8225-8a8df4eb53bf.report&mode=open"> </iframe>
</div>
<div class="tab-pane" id="teacher">
<iframe id="teacherIFrame" data-src="http://localhost:8085/hi-ee/hi.html?dir=1463377807724/1463378012748&file=63a8d04b-5910-4fbf-8452-4bf0f585881d.report&mode=open"></iframe>
</div>
<div class="tab-pane" id="student">
<iframe id="studentIFrame" data-src="http://localhost:8085/hi-ee/hi.html?dir=1463377807724/1463384004492&file=16d9efc6-7d84-461e-80c7-a59e1ca7d44a.report&mode=open"></iframe>
</div>
</div>
</div>
</div>
</div>
CSS: Refer to the below code for giving it a better look and feel. You can change the CSS suiting your requirements.
.grid-stack .grid-stack-item .grid-stack-wrapper {
margin: 0 10px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
border-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #ccc;
height: 100%;
width: calc(100% - 20px);
background: #fff;
position: relative;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.grid-stack .grid-stack-item .component-container {
display: -webkit-box;
display: flex;
height: calc(100% - 30px);
}
.nav {
margin-bottom: 0;
padding-left: 0;
list-style: none;
list-style-type: none;
list-style-position: initial;
list-style-image: initial;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(221, 221, 221);
}
#tabs{
width: 100%;
}
.tab-pane{
padding: 0;
}
#districtIFrame, #teacherIFrame, #studentIFrame{
width: 100%;
border: none;
height: 590px;
}
a{
text-decoration: none;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav>li>a {
padding: 10px 15px;
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
.nav>li, .nav>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-top-color: transparent;
border-top-style: solid;
border-top-width: 1px;
border-right-color: transparent;
border-right-style: solid;
border-right-width: 1px;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: transparent;
border-left-style: solid;
border-left-width: 1px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 4px 4px 0 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
a {
overflow: hidden;
vertical-align: middle;
}
#hi-cache-fileTitle, .column-alias, a {
text-overflow: ellipsis;
}
a {
background-color: transparent;
color: #337ab7;
text-decoration: none;
text-decoration-line: none;
text-decoration-style: initial;
text-decoration-color: initial;
}
*, :after, :before {
box-sizing: border-box;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
ul{
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
JS: In the JS we are writing on click event.
$( document ).ready(function() {
$("ul#tabs a").click(function(e){
e.preventDefault();
$(this).tab("show");
}).on("shown.bs.tab", function(e) {
var elem = $(e.target),
frame = $(elem.attr("href")).find("iframe");
if (frame.length && !frame.attr("src")) {
frame.attr("src", frame.attr("data-src"));
}
});
var f = $("iframe").eq(0);
f.attr("src", f.attr("data-src"));
});
Once done click on refresh at the top and save it. View the read only mode to understand if its working fine.
Thanks Team !
We will try this and let you know the results.
Regards
Pushpal