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.
This is the best webapp CRUD Form tutorial on RUclips 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.
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.
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
@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!
You absolutely nailed it. no words to Thank you :) THANK YOU VERY MUCH. You made things easy. I have one question, Can we use our own product ID instead of the script generated ID? If yes, can you please give me an indication wherein the code I can play around and get what i want?
Que buen video amigo, pero como personalizo el ID al momento de guardarlo, ya que quiero hacerlo con ID que es el número de identificación de la persona. Gracias 💪🏻
😄This is such a time saver for me! Thank You I am working on some other bootstrap forms that I plan on deploying to a host. Is it possible to have this type of application hosted? I have subscribed, hoping to see more of these very helpful videos. --john
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
I am relatively new to programming and I just want something simple. I want a code in add, update, delete and search responses in my google form. In the google form there is only the submit button, I want all those buttons. Is there an add-on or something similar. Tried to use appsheet and it was even too hard for me.
I cannot authorize the script using Gmail when I try to deploy it as a webapp. App authorization is blocked. I have 2FA enabled. Can you suggest something regarding the authorization error during deployment?
Dear boss, if i click search that result should be show in another screen. Is it possible. Now it's shows in same page. Please reply my request. I am very senior subscriber to your channel.. thankyou.
I have added another field of PHONE, when I click add record I can't get the display of latest entry data below the form as your video. Can you teach me how to solve the problem?
I'm new and trying to make something like this, only I made mine to create, read, alter and populate. It's a real piece of crap. Jokes aside great videos, only helpful explanation of how this all works I can find for a complete beginner.
I replaced an input type=\"text\ of the Display table in the function ar.forEach(function(item, index), with a text area, but I can't get it to read the relative value of the linked google sheet'. Excuse my poor English, I'm Italian. thanks to who helps me displayTable += "
WebAppBoot HTML File Code below:
function AddRow()
{
document.getElementById("add_button").disabled = true;
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zip = document.getElementById("zip").value;
var email = document.getElementById("email").value;
if(firstname != '' && lastname != '' && street != '' && city != '' && state != '' && zip != '' && email != '')
{
google.script.run.withSuccessHandler(function(return_string)
{
SearchRecords();
document.getElementById("add_button").disabled = false;
}).AddRecord(firstname, lastname, street, city, state, zip, email);
}
else
{
document.getElementById("display_error").innerHTML = "Please Enter All Information!";
document.getElementById("add_button").disabled = false;
}
}
function ClearRecord()
{
document.getElementById("firstname").value = '';
document.getElementById("lastname").value = '';
document.getElementById("street").value = '';
document.getElementById("city").value = '';
document.getElementById("state").value = '';
document.getElementById("zip").value = '';
document.getElementById("email").value = '';
document.getElementById("display_error").innerHTML = "";
}
function UpdateRecord(row_number)
{
document.getElementById("update_button"+row_number).disabled = true;
var record_id = document.getElementById("up_record_id"+row_number).value;
var firstname = document.getElementById("up_firstname"+row_number).value;
var lastname = document.getElementById("up_lastname"+row_number).value;
var street = document.getElementById("up_street"+row_number).value;
var city = document.getElementById("up_city"+row_number).value;
var state = document.getElementById("up_state"+row_number).value;
var zip = document.getElementById("up_zip"+row_number).value;
var email = document.getElementById("up_email"+row_number).value;
google.script.run.withSuccessHandler(function(return_string)
{
document.getElementById("update_button"+row_number).disabled = false;
}).UpdateRecord(record_id, firstname, lastname, street, city, state, zip, email);
}
function DeleteRecord(row_number)
{
var record_id = document.getElementById("up_record_id"+row_number).value;
google.script.run.withSuccessHandler(function(return_string)
{
if(return_string == 'SUCCESS')
{
document.getElementById('mainTable').deleteRow(document.getElementById('ROWNUMBER:'+row_number).rowIndex);
}
}).DeleteRecord(record_id);
}
function SearchRecords()
{
var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
var zip = document.getElementById("zip").value;
var email = document.getElementById("email").value;
var row_number = 0;
google.script.run.withSuccessHandler(function(ar)
{
console.log(ar);
var displayTable = '';
displayTable += '';
displayTable += "";
displayTable += "Name";
displayTable += "Address";
displayTable += "Email";
displayTable += "";
displayTable += "";
ar.forEach(function(item, index)
{
displayTable += "";
displayTable += "First ";
displayTable += " ";
displayTable += " ";
displayTable += "Last ";
displayTable += " ";
displayTable += "Street ";
displayTable += " ";
displayTable += "City ";
displayTable += " ";
displayTable += "State ";
displayTable += " ";
displayTable += "Zip ";
displayTable += " ";
displayTable += "Email ";
displayTable += " ";
displayTable += " ";
displayTable += " ";
displayTable += " ";
displayTable += " ";
displayTable += "";
displayTable += "";
row_number++;
});
displayTable += '';
document.getElementById("rowdata").innerHTML = displayTable;
}).searchRecords(firstname, lastname, street, city, state, zip, email);
}
First Name
Last Name
Street
City
State
Zip
Email
@Code With Curt. With displaytable how can i make it appear as a text area as well when they search it?
World's Best Teacher
Best Quality
Learn Easy and Understand
I Love And Like All Video
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.
This is the best webapp CRUD Form tutorial on RUclips 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.
Google Apps Script Code in Video Below:
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('WebAppBoot');
}
function uuid() {
var uuid_array = [];
var ss= SpreadsheetApp.getActiveSpreadsheet();
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++)
{
uuid_array.push(uuid_values[i][0]);
}
var x_count = 0;
do {
var y = 'false';
var uuid_value = Utilities.getUuid();
if(uuid_array.indexOf(uuid_value) == -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= SpreadsheetApp.getActiveSpreadsheet();
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= SpreadsheetApp.getActiveSpreadsheet();
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= SpreadsheetApp.getActiveSpreadsheet();
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= SpreadsheetApp.getActiveSpreadsheet();
var dataSheet = ss.getSheetByName("DATA");
var getLastRow = dataSheet.getLastRow();
for(i = 2; i
thank u sir..in this case sir how
i make a couple spreed sheets using this code?because i have a project in my school lots of attributes
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.
Dude, you're a lifesaver! All your Apps Script articles/videos are super helpful.
I’m jealous you got the new IDE ! Nice video Curt
Awesome video brother. ❤️❤️❤️
*Please Please add another option on this CURD web app, for printing POS invoice with HTML.*
thank you from Srengat, Blitar, Indonesia ....
Great! This is what I've been waiting for so long finally come..
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
Gracias por compartir tus conocimientos, desde Argentina.
Amazing videos. It helped a lot. Why haven't you posted any videos recently? Looking forward more videos from you.
Awesome, Mr.Curt make the function CRUD.
thanks sir.
Thank you for creating practical applications instead of some dumb examples that mean nothing.
@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!
Kurt is awesome I tested this crud Im not done yet with the modification.
Thank you so much! Great video!
You absolutely nailed it. no words to Thank you :)
THANK YOU VERY MUCH. You made things easy.
I have one question, Can we use our own product ID instead of the script generated ID? If yes, can you please give me an indication wherein the code I can play around and get what i want?
great video! thanks for sharing!, how coud i create an exit button?, i need to add a button that exit from the web app
very great tutorial sir. i always watching and waiting your videos post.
Same here :)
very great tutorial sir
How to upload a picture to drive and store its link in the record row?
Thank you very much
Que buen video amigo, pero como personalizo el ID al momento de guardarlo, ya que quiero hacerlo con ID que es el número de identificación de la persona. Gracias 💪🏻
ure the best one
😄This is such a time saver for me! Thank You
I am working on some other bootstrap forms that I plan on deploying to a host. Is it possible to have this type of application hosted? I have subscribed, hoping to see more of these very helpful videos.
--john
Curt nice video! Can we do autocomplete for the search parameters?
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
I want to make form data where user fill the data in table where 1st column and first row is constant text
Great Tutorial! Can you build a script with master/details insert data into sheet?
I have an issue sir.
Can you please tell me how do i add 2-3 boxes more in that portion and run it successfully.
This project can be implement by google forms without using Dynamic html?
Dear sir, in this code search function is not working with date format. Please provide best solution for the same.
How can I improve the UI of the webapp? can I use tailwind?
We thank you heartily for these wonderful videos
Please, how can we get the code to be able to follow the lessons
It is in the comments section below the video.
U R Good ..🎉
how to modification scripts if I replace zip to prices with thousand separator
👌Perfect!
during editing a field may appear inactive so you do not edit ?
Can you also show if I wanted to add date of birth using calendar insted of adding dates as text
Add to html
you can have the code of all your videos very useful thanks
I am relatively new to programming and I just want something simple. I want a code in add, update, delete and search responses in my google form. In the google form there is only the submit button, I want all those buttons. Is there an add-on or something similar. Tried to use appsheet and it was even too hard for me.
Hola estoy en la misma situación, mas que todo un boton de buscar donde ponga el codigo y me muestre los datos
I cannot authorize the script using Gmail when I try to deploy it as a webapp. App authorization is blocked. I have 2FA enabled. Can you suggest something regarding the authorization error during deployment?
awesome
Thanks for this video! It's sometimes necessary to have ability to edit already submitted form. Is it possible to add such feature?
Thanks!
The UPDATE button (after you search for a record) that appears on the right does this for you!
Dear boss, if i click search that result should be show in another screen. Is it possible. Now it's shows in same page. Please reply my request. I am very senior subscriber to your channel.. thankyou.
How can we add a dropdown list for any of header? can anybody please assist.. Thank you very much!!
I have added another field of PHONE, when I click add record I can't get the display of latest entry data below the form as your video. Can you teach me how to solve the problem?
But the record is added in the worksheet.
Your video time 26.01
Great vedeo!! Can you please provide the code..
thanks sir
HOW TO ADD MORE COLLUM?
where can i link to google sheet?
Thanks for this video.
🙏🙏🙏
I'm new and trying to make something like this, only I made mine to create, read, alter and populate.
It's a real piece of crap.
Jokes aside great videos, only helpful explanation of how this all works I can find for a complete beginner.
I replaced an input type=\"text\ of the Display table in the function ar.forEach(function(item, index), with a text area, but I can't get it to read the relative value of the linked google sheet'.
Excuse my poor English, I'm Italian.
thanks to who helps me
displayTable += "
its not workin
can anybody help me
Try to follow the test but haven't bothered you help me. I sent it in your CONTACT US. Thank you very much.
It says, "Script function not found: doGet" any one who can help !!!!
Cambia el nombre del archivo html, generalmente dice index
v v