Forum Discussion

GeorgeGeorge's avatar
GeorgeGeorge
Qrew Cadet
7 years ago

BootStrap Widget - Tip/Trick & Question

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 Totals

Question:  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>



Formulas and functions
reports and charts
  • _anomDiebolt_'s avatar
    _anomDiebolt_
    Qrew Elite
    7 years ago
    You could add a callback to the load method with something like this:
    var urlLoad = url + " #VR_[DB_TableID]_[ReportID] tr:last td:last"
    $("#QBU_Total").load(urlLoad, function() {
      var total = parseFloat($("#QBU_Total").text());
      if (total > 15000000) {
        $(this).wrap("<span style='color:red'></span>");
      } else {
        $(this).wrap("<span style='color:blue'></span>");
      }
    });

    Bear in mind that when injecting code into a QuickBase page it is very desirable to use as use as little code as possible if for no other reason then to reduce the cognitive load involved. This is why I used the $().load() method as it makes the task of extracting a fragment of HTML from a URL and slapping it into the DOM very simple. But you want to also modify the fragment of HTML slapped into the page so to build on using $().load() you have to grab the injected total, wrap it in a span that sets the color and slap it back into the DOM. Like this: