Posted on by

Using Bootstrap Modal on Google Web App

In this post, I demonstrate how to use Bootstrap Modal on a Google Web Application to show Nested Data.

How to Video:

Video Notes:

Code in Video:

function doGet(e) {
  return HtmlService.createTemplateFromFile('WebAppBoot').evaluate();
}

function getRegions()
{
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var regionSheet = ss.getSheetByName("REGION");
  var regionRange = regionSheet.getDataRange();
  var regionValues = regionRange.getValues();  
  return regionValues;

}

function getStates(region)
{
  var returnData = [];
  var ss= SpreadsheetApp.getActiveSpreadsheet();
  var statesSheet = ss.getSheetByName("STATES");
  var getLastRow = statesSheet.getLastRow();
  for(i = 2; i <= getLastRow; i++)
  {
    if(region == statesSheet.getRange(i, 1).getValue())
    {
      returnData.push([statesSheet.getRange(i,2).getValue(),statesSheet.getRange(i,3).getValue()])
    }
  }  
  return returnData;
}
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" >
    <script>
    $( document ).ready(function() {
      getData();
    });
    function getData() 
    {

      google.script.run.withSuccessHandler(function(ar) 
      {

        console.log(ar);
        var displayTable = '';
        displayTable += '<table class=\"table\" id=\"mainTable\" >';
        displayTable += "<tr>";
        displayTable += "<th>Region</th>";
        displayTable += "<th>Area</th>";
        displayTable += "<th>Name</th>";
        displayTable += "<th></th>";
        displayTable += "</tr>";

        ar.forEach(function(item, index) 
        {
          if(index > 0)
          {
            displayTable += "<tr>";
            displayTable += "<td>"+item[0]+"</td>";
            displayTable += "<td>"+item[1]+"</td>";
            displayTable += "<td>"+item[2]+"</td>";
            displayTable += "<td><input type=\"button\" value=\"States\" class=\"btn btn-primary\" ";
            displayTable += " onclick=\"showStates('"+item[0]+"')\" /></td>";
            displayTable += "</tr>";
          }    
        });

        displayTable += '</table>';     
        document.getElementById("rowdata").innerHTML = displayTable;

      }).getRegions();
      
    }
    function showStates(region)
    {
      google.script.run.withSuccessHandler(function(ar) 
      {

        console.log(ar); 
        var displayTable = "<div class=\"modal\" tabindex=\"-1\" role=\"dialog\" id=\"myModal\">";
        displayTable += "<div class=\"modal-dialog\" role=\"document\">";
        displayTable += "<div class=\"modal-content\" >";
        displayTable += "<div class=\"modal-header\">";
        displayTable += "<h5 class=\"modal-title\" id=\"exampleModalLongTitle\">Region: "+ region + "</h5>";
        displayTable += "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">";
        displayTable += "<span aria-hidden=\"true\">×</span>";
        displayTable += "</button>";
        displayTable += "</div>";
        displayTable += "<div class=\"modal-body\">";
        displayTable += "<div class=\"container-fluid\">";
        displayTable += "<div class=\"row\">";
        displayTable += "<div class=\"col\" style=\"font-weight: bold\" >States</div>";
        displayTable += "<div class=\"col\" style=\"font-weight: bold\" >Tax Rate</div>";
        displayTable += "</div>";

        ar.forEach(function(item, index) 
        {
          displayTable += "<div class=\"row\">";
          displayTable += "<div class=\"col\">"+item[0]+"</div>";
          displayTable += "<div class=\"col\">"+item[1]+"</div>";
          displayTable += "</div>";
        });

        displayTable += "</div>";
        displayTable += "</div>";
        displayTable += "</div>";
        displayTable += "</div>";
        displayTable += "</div>";

        $("#statesModal").html(displayTable);
        $("#myModal").modal();

      }).getStates(region);
    }  
    </script>
  </head>
  <body>
  <div id="rowdata"></div>
  <div id="statesModal"></div>
  </body>
</html>

Related Posts

Login Google Web App Google Sheets Create Login Google Web App using Google Account - In this video, I demonstrate how to log in to a Google Web App using a Google Account but also control who has editor access through the Google Sheets Share.
Bootstrap Sidebar Form Google Sheets How to Create a Bootstrap Sidebar Form on Google Sheets - In this post, I demonstrate how to create a Bootstrap sidebar HTML Form on Google Sheets.
CRUD Google Web App Create a Bootstrap CRUD Google Web App using Google Sheets - In this post, I demonstrate how to create a Bootstrap CRUD application using Google Web App and Google Sheets
Google Web App Bootstrap Create a Bootstrap Google Web Application Form on Google Sheets - In this post, I demonstrate how to create a Bootstrap Google Web Application Form on Google Sheets using Google Apps Script.

Published by codewithcurt

Leave a Reply