Bootstrap Modal on Google Web App

Показать описание

In this video, I demonstrate how to use Bootstrap Modal on a Google Web App. Video,

Bootstrap Modal Documentation

Bootstrap / jQuery Libraries

Apps Script (Script Editor) is now located under tab ‘Extensions’ instead of ‘Tools’ on Google Sheets

Code With Curt

Рекомендации по теме

Комментарии

WebAppBoot.html Code in Video Below:

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
$( document ).ready(function() {
getData();
});
function getData()
{

{

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 += " /></td>";
displayTable += "</tr>";
}
});

displayTable += '</table>';
= displayTable;

}).getRegions();

}
function showStates(region)
{

{

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\" "+ region + "</h5>";
displayTable += "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">";
displayTable += "<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
displayTable += "<div
displayTable += "</div>";
});

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

$("#myModal").modal();

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

CodeWithCurt

Hey Curt! Is it possible to do it if onclicked on table it will show the dialog box instead of clicking the button. Hoping for a Part 2 on this with that features. Thanks a lot. More power.

gsheetssolutions

Google Apps Script Code in Video Below:

function doGet(e) {
return
}

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

}

function getStates(region)
{
var returnData = [];
var ss=
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;
}

CodeWithCurt

hard to search some data in multiple condition, have any sample ?

iArthurTou

How to add 2 conditions in Google script to display module data

mohamedaatif

At the top of the site there are signs to access information that I would like you to remove. I am a beginner in programming. Can you remove the first two lines of the page because it is not beautiful

fttx

Great job; thanks for sharing; greetings from México

filibertodurangarcia

How can i add edit and search? Thanks.

raymartbulauan

can use bootstrap mobile to write some mobile apps ?

iArthurTou

would it be possible to see this with a pagination? :) thank you in advance

perrysantos

Bootstrap Modal on Google Web App

Bootstrap Modal on Google Web App

Modal - Bootstrap 5 Alpha Responsive Web Development and Design

HTML : How to open bootstrap modal without button-click?

Bootstrap Modals - Popups made easy on your website!

How to create pop up window in website using Bootstrap Modal Component

HTML : How to use Bootstrap modal using the anchor tag for Register?

Google Web App - Bootstrap CRUD

Google Like Image Gallery using Bootstrap Modal and Jquery Part- 3

How to use bootstrap modal popup in website Hindi/English

Remake Google Homepage Using Bootstrap 5

Create Sidebar Bootstrap Form on Google Sheets

modal-backdrop scrolling behind Bootstrap modal

jQuery : Autocomplete issue into bootstrap modal

Bootstrap Modal Pop up Window in React

CSS : Bootstrap Modal sitting behind Backdrop in Chrome

Google Like Image Gallery using Bootstrap Modal and Jquery Part-2

Load Dynamic Content in Bootstrap Modal

HTML : Bootstrap modal only showing backdrop

FIXED: Bootstrap Modal Not Working | jQuery Hack😱 | by Oshan X Techbay

HTML : Multiple Bootstrap modals in a single page

Cómo crear un loading con Bootstrap modal y apps script | Apps Script 84

HTML : How to call bootstrap modal in php

Google Web App - Bootstrap CRUD | Google Sheet CRUD | Google Appscript CRUD | 4081

Angular 10 Google Column Chart inside Bootstrap Modal