Google Web App - Bootstrap CRUD

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

In this video, I demonstrate how to create a Bootstrap CRUD application using Google Web App and Google Sheets.

Bootstrap Documentation:

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

Code With Curt

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

Комментарии

WebAppBoot HTML File Code below:

<!DOCTYPE html>
<html>
<head>
<base target="_top">
crossorigin="anonymous">
<script>
function AddRow()
{
= true;
var firstname =
var lastname =
var street =
var city =
var state =
var zip =
var email =
if(firstname != '' && lastname != '' && street != '' && city != '' && state != '' && zip != '' && email != '')
{

{
SearchRecords();
= false;
}).AddRecord(firstname, lastname, street, city, state, zip, email);
}
else
{
= "Please Enter All Information!";
= false;
}
}

function ClearRecord()
{
= '';
= '';
= '';
= '';
= '';
= '';
= '';
= "";
}

function UpdateRecord(row_number)
{
= true;
var record_id =
var firstname =
var lastname =
var street =
var city =
var state =
var zip =
var email =

{
= false;
}).UpdateRecord(record_id, firstname, lastname, street, city, state, zip, email);
}

function DeleteRecord(row_number)
{

var record_id =

{
if(return_string == 'SUCCESS')
{

}
}).DeleteRecord(record_id);
}

function SearchRecords()
{
var firstname =
var lastname =
var street =
var city =
var state =
var zip =
var email =
var row_number = 0;

{

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

ar.forEach(function(item, index)
{
displayTable += "<tr id=\"ROWNUMBER:"+ row_number +"\" >";
displayTable += "<td><div class=\"form-row\"><div class=\"form-group col-md-12\" ><label ";
displayTable += "<input type=\"text\" id=\"up_firstname"+ row_number +"\" value=\""+item[1]+"\" class=\"form-control\" /> ";
displayTable += "<input type=\"hidden\" id=\"up_record_id"+ row_number +"\" value=\""+item[0]+"\" /></div></div> ";
displayTable += "<div class=\"form-row\"><div class=\"form-group col-md-12\"><label ";
displayTable += "<input type=\"text\" id=\"up_lastname"+ row_number +"\" value=\""+item[2]+"\" class=\"form-control\" /></div></div></td> ";
displayTable += "<td><div class=\"form-row\"><div class=\"form-group col-md-12\"><label ";
displayTable += "<input type=\"text\" id=\"up_street"+ row_number +"\" value=\""+item[3]+"\" class=\"form-control\" /></div></div> ";
displayTable += "<div class=\"form-row\"><div class=\"form-group col-md-6\"><label for=\"up_city\">City</label> ";
displayTable += "<input type=\"text\" id=\"up_city"+ row_number +"\" value=\""+item[4]+"\" class=\"form-control\" /></div> ";
displayTable += "<div class=\"form-group col-md-4\"><label ";
displayTable += "<input type=\"text\" id=\"up_state"+ row_number +"\" value=\""+item[5]+"\" class=\"form-control\" /></div> ";
displayTable += "<div class=\"form-group col-md-2\"><label for=\"up_zip\">Zip</label> ";
displayTable += "<input type=\"text\" id=\"up_zip"+ row_number +"\" value=\""+item[6]+"\" class=\"form-control\" /></div></div> ";
displayTable += "<td><div class=\"form-row\"><div class=\"form-group col-md-12\" ><label ";
displayTable += "<input type=\"text\" id=\"up_email"+ row_number +"\" value=\""+item[7]+"\" class=\"form-control\" /></div></div></td> ";
displayTable += "<td><div style=\"padding: 5px\"> ";
displayTable += "<input type=\"button\" id=\"update_button"+ row_number +"\" value=\"Update\" class=\"btn btn-primary\" ";
displayTable += /></div> ";
displayTable += "<div style=\"padding: 5px\" > ";
displayTable += "<input type=\"button\" value=\"Delete\" id=\"delete_button"+ row_number +"\" class=\"btn btn-primary\" ";
displayTable += /></div> ";
displayTable += "</td>";
displayTable += "</tr>";
row_number++;
});

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

}).searchRecords(firstname, lastname, street, city, state, zip, email);

}
</script>
</head>
<body>
<div style="padding: 10px;" >
<form>
<div class="form-row">
<div class="form-group col-md-3">
<label for="firstname">First Name</label>
<input type="text" id="firstname" class="form-control" />
</div>
<div class="form-group col-md-3">
<label for="lastname">Last Name</label>
<input type="text" id="lastname" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="street">Street</label>
<input type="text" id="street" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="city">City</label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group col-md-2">
<label for="state">State</label>
<input type="text" id="state" class="form-control" />
</div>
<div class="form-group col-md-1">
<label for="zip" >Zip</label>
<input type="text" id="zip" class="form-control" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="email" >Email</label>
<input type="text" id="email" class="form-control "/>
</div>
</div>
<div class="form-group col-md-6">
<input type="button" value="Search" class="btn btn-primary" onclick="SearchRecords()" />
<input type="button" value="Add Record" class="btn btn-primary" onclick="AddRow()" id="add_button" />
<input type="button" value="Clear Record" class="btn btn-primary" onclick="ClearRecord()" />
<div id="display_error" style="color: red" ></div>
</div>
</form>
<div id="rowdata"></div>
</div>
</body>
</html>

CodeWithCurt

World's Best Teacher
Best Quality
Learn Easy and Understand
I Love And Like All Video

tanveerhussain

Curt you are a great instructor and lifesaver. I'm so glad I found you. You are very detailed just like myself. This is a refresher for me. Thank you so much.

eeefriendlife

This is the best webapp CRUD Form tutorial on YouTube which I was trying to search from many times. Thank you very much for sharing such a valuable webapp tutorial. I have humble suggestions to take this to a new level if we may log user ID and timestamp to know which user updated/created which record. Awesome script for a novice like me. I'm working with Directorate of Animal Husbandry, Gujarat State, India in planning and co-ordination branch. This would help me a lot in creating adhoc webapps for receiving information from the field.

tjpurohit

Dude, you're a lifesaver! All your Apps Script articles/videos are super helpful.

RyanCreagh

Finally i have received my requirement by you bro. Thank you so much. If you may provide some drop-down coloum in add record that would have superb. Good bro. Keep post.

jayasri-ft

Google Apps Script Code in Video Below:

function doGet(e) {
return
}

function uuid() {
var uuid_array = [];
var ss=
var dataSheet = ss.getSheetByName("DATA");
var getLastRow = dataSheet.getLastRow();
if(getLastRow > 1) {
var uuid_values = dataSheet.getRange(2, 1, getLastRow - 1, 1).getValues();
for(i = 0; i < uuid_values.length; i++)
{

}
var x_count = 0;
do {
var y = 'false';
var uuid_value = Utilities.getUuid();

== -1.0)
{
y = 'true';
Logger.log(uuid_value);
return uuid_value;
}
x_count++;
} while (y == 'false' && x_count < 5);
} else {
return Utilities.getUuid();
}
}

function UpdateRecord(record_id, firstname, lastname, street, city, state, zip, email) {
var ss=
var dataSheet = ss.getSheetByName("DATA");
var getLastRow = dataSheet.getLastRow();
var table_values = dataSheet.getRange(2, 1, getLastRow - 1, 8).getValues();
for(i = 0; i < table_values.length; i++)
{
if(table_values[i][0] == record_id)
{
dataSheet.getRange(i+2, 2).setValue(firstname);
dataSheet.getRange(i+2, 3).setValue(lastname);
dataSheet.getRange(i+2, 4).setValue(street);
dataSheet.getRange(i+2, 5).setValue(city);
dataSheet.getRange(i+2, 6).setValue(state);
dataSheet.getRange(i+2, 7).setValue(zip);
dataSheet.getRange(i+2, 8).setValue(email);
}

}
return 'SUCCESS';
}

function DeleteRecord(record_id)
{
var ss=
var dataSheet = ss.getSheetByName("DATA");
var getLastRow = dataSheet.getLastRow();
var table_values = dataSheet.getRange(2, 1, getLastRow - 1, 8).getValues();
for(i = 0; i < table_values.length; i++)
{
if(table_values[i][0] == record_id)
{
var rowNumber = i+2;
dataSheet.getRange('A' + rowNumber +':I' + rowNumber).clearContent();

}
}
return 'SUCCESS';
}

function AddRecord(firstname, lastname, street, city, state, zip, email) {
var uniqueID = uuid();
var found_record = false;
var ss=
var dataSheet = ss.getSheetByName("DATA");
var getLastRow = dataSheet.getLastRow();
for(i = 2; i < getLastRow; i++)
{
if(dataSheet.getRange(i, 1).getValue() == '')
{
dataSheet.getRange('A' + i + ':I' + i).setValues([[uniqueID, firstname, lastname, street, city, state, zip, email, new Date()]]);
found_record = true;
break;
}
}
if(found_record == false)
{
dataSheet.appendRow([uniqueID, firstname, lastname, street, city, state, zip, email, new Date()]);
}
return 'SUCCESS';

}

function searchRecords(firstname, lastname, street, city, state, zip, email)
{

var returnRows = [];
var allRecords = getRecords();

allRecords.forEach(function(value, index) {

var evalRows = [];
if(firstname != '')
{
if(value[1].toUpperCase() == firstname.toUpperCase()) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(lastname != '')
{
if(value[2].toUpperCase() == lastname.toUpperCase()) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(street != '')
{
if(value[3].toUpperCase() == street.toUpperCase()) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(city != '')
{
if(value[4].toUpperCase() == city.toUpperCase()) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(state != '')
{
if(value[5].toUpperCase() == state.toUpperCase()) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(zip != '')
{
if(value[6] == zip) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(email != '')
{
if(value[7].toUpperCase() == email.toUpperCase()) {
evalRows.push('true');
} else {
evalRows.push('false');
}
}
else
{
evalRows.push('true');
}

if(evalRows.indexOf("false") == -1)
{
returnRows.push(value);
}

});

return returnRows;
}

function getRecords() {
var return_Array = [];
var ss=
var dataSheet = ss.getSheetByName("DATA");
var getLastRow = dataSheet.getLastRow();
for(i = 2; i <= getLastRow; i++)
{
if(dataSheet.getRange(i, 1).getValue() != '')
{
return_Array.push([dataSheet.getRange(i, 1).getValue(),
dataSheet.getRange(i, 2).getValue(),
dataSheet.getRange(i, 3).getValue(),
dataSheet.getRange(i, 4).getValue(),
dataSheet.getRange(i, 5).getValue(),
dataSheet.getRange(i, 6).getValue(),
dataSheet.getRange(i, 7).getValue(),
dataSheet.getRange(i, 8).getValue()]);
}
}
return return_Array;
}

CodeWithCurt

Can you make the results of a search, [0:45]; to be shown in an only line; I mean, not in two lines the same record, so we can see an entire record in the same line: [First name, Last name, Street, city, state, zip, email, etc]; and the Update and Delete Buttons, alligned at the same row; And here i have another sugestion for you; can we set a dependant drop down list?, for example:
CONTINENT>COUNTRY>STATE>CITY; Etc.
Thanks a lot for your great videos. Greetings from México

filibertodurangarcia

I’m jealous you got the new IDE ! Nice video Curt

aboudezoa

Great! This is what I've been waiting for so long finally come..

PenaChannel

Awesome video brother. ❤️❤️❤️
*Please Please add another option on this CURD web app, for printing POS invoice with HTML.*

raihannewaz

@Code With Curt - I found a bug. When you enter in date in any field (Ex: 01/02/2020) it breaks the search feature until you delete the date in the Google Sheet.
I suspect this is because once the date is recorded in Google Sheets, it reformats the cell from [text] to [date]. Once its formatted into a date, the search feature breaks. This issue also happens when you type "123" into the form. I tried to disable automatic formatting, but as soon as a new form is submitted it reformates to a date breaking the search. How would I update your code to fix this the correct way?
Thanks! ps. I love your tutorials!

Brandon-ufkb

thank you from Srengat, Blitar, Indonesia ....

burhansrengat

Gracias por compartir tus conocimientos, desde Argentina.

carlosmolina

may I get help? do we need 1 .gs for all HTML or every HTML has is own .gs? which one the best if I want to make a medical webapp? thank you in advance

AnggitNuraulia

Amazing videos. It helped a lot. Why haven't you posted any videos recently? Looking forward more videos from you.

MuhammedAadhil

Awesome, Mr.Curt make the function CRUD.
thanks sir.

QUNTOL

This project can be implement by google forms without using Dynamic html?

organickrishi

how to modification scripts if I replace zip to prices with thousand separator

BraveHeart-htzf

Thank you for this... Sorry but may I ask, is there a WYSIWYG IDE for making something like this? coming from PASCAL, to MS access, VISUAL foxpro and Visual basic 6 more than two decades ago and haven't coded for more than one decades, scripting and html is really hard for me, my only experience with HTML was with Macromedia Dreamwever and flash but only for static webpages, no records and databases or server side stuffs, I really want to learn to do this but I'm lost without visually seeing what I'm doing and designing... Right now my workaround is using google forms for the input and using arrayformula to populate all the fields I need and the use datastudio for the reports and output, but I want to do the upadating and deleting and searching using a webpage or dashboard... Hope you can point me to something more suitable for me, or am I really toast?, thanks

JSinc

Google Web App - Bootstrap CRUD

Google Web App - Bootstrap CRUD

Create Bootstrap Web App Form on Google Sheets using Google Apps Script

Bootstrap Modal on Google Web App

Google Sheets - UserForm Web App using HTML5 & Bootstrap 4

Bootstrap 5 + Google Sheet | Javascript Mini Projects

Login Form with Google Apps Script - Part 10: Bootstrap Preloader

How To Host A Bootstrap Website In Google Drive

Create Sidebar Bootstrap Form on Google Sheets

Autocomplete Field on Google Web App

Visualize Google Sheets Data in HTML Charts - bpwebs.com

Web App - Google Sheets CRUD - Part 1 - Load Views

Places to get 100% FREE website templates

How to Download & Install Bootstrap and Use it in Websites | Bootstrap | 2022

Deploy Google Web App

02 Top 6 Free Websites for HTML & CSS templates

Intro to using Bootstrap and jQuery with AppEngine web apps

App Script Login Multi Level User Menu | Customize Menu with Sidebar Bootstrap

Remake Google Homepage Using Bootstrap 5

Tablesorter on Google Web App

Bootstrap 5 table from a Google Sheet - JSON TUTORIAL [2021]

4 Free Stunning Admin Templates that you can download for free right now!

How to do More with Google Sites and use Advanced embed features!

5 Popular and Free Dashboards to use with Bootstrap

Google Sheets - Search DataTable using Bootstrap, DataTables, JavaScript with Sorting & Paginati...