Discussions

Expand all | Collapse all

BootStrap Widget - Tip/Trick & Question

  • 1.  BootStrap Widget - Tip/Trick & Question

    Posted 10-31-2018 18:15
    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>





  • 2.  RE: BootStrap Widget - Tip/Trick & Question

    Posted 11-01-2018 16:28
    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: