Hi,
You can check out the widgets in the status report page. Not sure if this matches your requirements or not.
Not sure if you have plugin activated for this already, if not then activate the plugin.
You can refer an of the widgets in the status report page since all of them use tabs to display records based on states mostly.The widgets uses widget-data-table with filters based on states to get the data and then display them in tabs.
I will paste the code of the widget below:
<div class="panel panel-{{::c.options.color}} b">
<div class="panel-heading">
<div class="panel-title">${Actions}</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li ng-class="{'active': isPending == true}"><a href="" ng-click="setPending(true)">${Pending}</a></li>
<li ng-class="{'active': isPending == false}"><a href="" ng-click="setPending(false)">${Completed}</a></li>
</ul>
<span ng-if="isPending" class="overflow-override">
<sp-widget widget="data.pending_issues" />
</span>
<span ng-if="!isPending" class="overflow-override">
<sp-widget widget="data.closed_issues" />
</span>
</div>
</div>
</div>.nav-tabs li a {
border-bottom: 3px solid transparent !important;
background: transparent;
border:none;
margin-left: 20px;
color: rgb(113, 113, 113);
padding: 10px 15px;
margin:0px;
position: relative !important;
bottom: -1px !important;
}
.nav-tabs > li > a:hover {
border-bottom: 3px solid $color-light !important;
color: $color-light;
background: transparent;
border:none;
}
.nav-tabs > li > a:active {
border-bottom: 3px solid #278efc !important;
color: #278efc;
opacity : 0.5;
background: transparent;
border:none;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #278efc;
background-color: #ffffff;
cursor:default;
border-bottom: 3px solid #278efc !important;
border:none;
margin:0px;
padding: 10px 15px;
}
span.overflow-override .panel-body {
overflow: hidden !important;
}
span.overflow-override .panel {
border: 0 !important;
}
span.overflow-override .table th div {
color: #717171;
}
.alert-info {
text-align: center;
padding: 30px;
font-size: 16px;
margin-bottom: 20px;
color: none;
color: #343d47;
border: none;
}
td.selected {
color: inherit !important;
background-color: inherit !important;
}
td {
cursor: default !important;
}Client script:
function($scope) {
// widget controller
var c = this;
$scope.isPending = true;
$scope.setPending=function(value) {
$scope.isPending = value;
}
}Server script:
(function() {
p = {table: 'project_action', fields: 'short_description,priority,state,assigned_to'};
p.hide_header = true;
p.hide_footer = true;
p.filter = "^active=true^parent=" + $sp.getParameter('sysparm_sys_id');
data.pending_issues = $sp.getWidget('widget-data-table', p);
p.filter = "^active=false^parent=" + $sp.getParameter('sysparm_sys_id');
data.closed_issues = $sp.getWidget('widget-data-table', p);
})();
Note: Please mark the answer as correct/helpful it works!
