I have created (with a lot of help from Dan) a dashboard widget (see attachment) that has been very helpful to me and I wanted to share it with the community. The purpose of the widget is to display KPI type of data (quick glance) -- on a dashboard. For example: for the 1st KPI ("Primary") -- I created a summary report on a targeted table (filtering the report to aggregate records that are related to my Primary KPI) --- The KPI will always show the totals for the last column of the summary report. I have also added a custom link for each KPI --- (the link does not have to point to the related summary report --- the link can go to a detailed/action report)
Helpful Links from Dan
-
BootStrap-
Grab TotalsQuestion: I would like to make the color of the BootStrap "KPIs" (primary, warning, success, etc) --- dependent on a number variable that I set within the Code Page (current code below). For example -- for the first KPI --- I have set the color/status to Primary -- I would like to have the color/status set to Primary if QBU_Total < 15,000,000 --- I appreciate any help with how to update the code below to accomplish this.......
Thank you!! (let me know if I can answer any questions) *Thank again Dan
Current
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>;
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>;
</head>
<body>
<div class="container">
<h2></h2>
<a href="[DB_TableID]=q&qid=[ReportID]" target="_blank" title="hover text about report"><button type="button" class="btn btn-primary btn-block">Primary <span class="badge"><b id="QBU_Total"></b></span></button></a></br>
<a href="[DB_TableID]=q&qid=[ReportID]" target="_blank" title="hover text about report"><button type="button" class="btn btn-warning btn-block">Warning!! <span class="badge"><b id="QBU_Total1"></b></span></button></br>
<a href="[DB_TableID]=q&qid=[ReportID]" target="_blank" title="hover text about report"><button type="button" class="btn btn-success btn-block">Success!! <span class="badge"><b id="QBU_Total2"></b></span></button></br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>;
<script>
$(function() {
var url = "[DB_TableID]=q&qid=[ReportID]";
$("#QBU_Total").load(url + " #VR_[DB_TableID]_[ReportID] tr:last td:last");
});
</script>
<script>
$(function() {
var url = "bbbbuuf?a=q&qid=7";
$("#QBU_Total1").load(url + " #VR_bbbbuuf_7 tr:last td:last");
});
</script>
<script>
$(function() {
var url = "ou812?a=q&qid=6";
$("#QBU_Total2").load(url + " #VR_ou812_6 tr:last td:last");
});
</script>
</body>
</html>