Web App - Google Sheets CRUD - Part 1 - Load Views
Vložit
- čas přidán 21. 07. 2024
- Learn how to make a Web App to Create, Read, Update & Delete data in Google Sheets. We'll be using Bootstrap (getbootstrap.com/) & JavaScript Apps Script.
In this part we'll be creating a view engine to load views.
This is Part 1 from Userform Level 3 Series - Google Sheets CRUD
• Userform Level 3 Serie...
HTML/CSS/JavaScript Fundamentals
• HTML & CSS Crash Cours...
JavaScript Array Methods
• Google Apps Script Int...
Userform Level 1 Series
• Google Sheets - Userform
Userform Level 2 Series
• Google Sheets Userform...
#webapp #googlesheets #crud
You are most likely one of, if not the greatest CZcams teachers in this area. Unbelievable content, thank you!
I'm not English speaking, but it is amazing. Best lessons ever
Yeah. He makes CZcams ads worth it.
@@OneDeed90 He makes CZcams Premium worth it
I know one, it would take ages for person like me who is all hands solely in Front-end to config such environment for further do. Thanks a lot. I am literally kowtowing for hours wasted of yours, and yours saved for us, sharing such cool stuff. I am learning everyday, but this Chicago guy literally knows what he is doing. What ideas of reusability! Wow! Keep it up!
This is what I'm waiting for! I'm very excited for the succeeding part :) great tutorial 👍
I loved your videos about google apps script. Im building exactly one contacts data system and this videos will save me. Thank so much from Brazil.
0.53 secs in and I'm sold! Top job 👍
This is what I have been looking for! Thank you! I can't wait for the following series!
This is just outstanding man! I can't say how gratful I am for your videos, they're really help me! Thanks again!
Excellent. Just what I need to implement after your level 2 playlist.
Thanks for your great job !
As always, great content this series sounds promising, well done, you are an amazing man, thanks!!!!
Presente en esta nueva e interesante serie. Muy útil, adaptable y educativa.... Gracias !!!
I want to say a big Thank You. Your videos helps me a lot.
Big part of mine work i base at information that you give me through CZcams.
So, I want to be a sponsor of your channel.
Pls, add button for that.
I think that action from my side will be a little part of mine gratefulness for your amazing work here.
These are an amazing set of videos. I am so impressed by the things you have taught me to do in Google Sheets
Also what I was waiting for . You are the boss sir !!!! Kudos
you are doing great sir. hope you will help us like this in the future. all of your tutorials are really helpful.
Great, just Cool ! Let's go for the next !
Wow This is Great!!! I'm excited with next part
Awesome can't wait to see next video
I’ve been waiting for this. :-)
😵😵😵@what a video@loved the end result@I appreciate your work!!@difficult programming but the end result is so good that it is worth put all the effort in understand ing that programming..(as i am not from programer background) @keep working like this sir..
Heyyy friend. Thanks for all the knowledge you’ve taught me. Okay now I have constructive feedback : when creating a search engine that searches and retrieved rows in the data table, you taught me to search in columns 2,3,4 etc or whatever. A suggestion to speed up the search engine : concatenation of the columns you’re going to search in in a single column. Search for keywords in this index column. 🚀🚀🚀🚀
I love u beibiiiiii. I am learning a looooot! Thank you so much for this tutorial! God bless youuuu. 😊
You are doing a really great job!!!
I live your videos man because you are always making amazing videos. Wow
Excellent buddy, as always... 👍
bro waiting for your next video. really you are awesome ..
If only you can include the example app script. Love what you do ,
sir, you have helped my life a lot. thank you
am proud for you man, a'm victim of learning this designed but i have fail in one thing of capturing the one who will edit the sheet and his or her sign should be seen in a column that i will suggest
thanks, man, you are a gift from God!👏👏👏👏
This is so good. Pretty powerful stuff. You should add a button for donations. If you do that, allow yourself to take cryptos as well
Woow I have been waiting for this one bruh. U just the best
such great videos! Thank you for the great content!
Great!
A question I would to load automatically the Web App in a sidebar in the sheet without use the menu.
How could I proceed?
Best lesson for learning Thanks.
I agree with Lossless. This is awesome stuff.
Hi, Great series !!!! really helpful in my project.
I have gone through multiple times with this series but I do have just one question how can I just view the rows data without adding the search input box?? please help me with this it would be really great for my project. Thank you :)
is it possible to create separate views for user....like in your tutorial, I would like to have edit and delete customer button for managers only and executives should only be able to search customers?
This might be a very dumb question, but I'm just starting out. I'd like to have my web app outside of Google Sheets and to access it through an url, not as another menu. How would I go about this? Very much appreciated!
Dude, great content!
Thanks for sharing.. great tutorial .. I m a fan of yours... looking for subsequent videos.. when would next video be released.
Sir ! How can I use that form on a separate .html web page on another server and then read,write,delete data from spreadsheet?
I am enjoying your CRUD course, but have run into an issue when adding in the logic for the callback (25:14). I have reviewed my code character by character and it matches your example, but I cannot get the new title to appear, in fact, nothing appears when the tab is clicked. I would appreciate any thoughts on where I might be missing something.
Excellent! Thank you!
You are super. Please make more videos.
I repeatedly watched this video for over 10 times. 🤓
thank you very much.
when i open the form and switch the tab, it have much longer time (5 sec+) for the first load the html in the tab. At the next switch its load much faster. What can i do to fix this?
Hi,
I learned a lot from you. I'm grateful to you.
I designed a web app with what i learned from you, a roster preparation app.
I'd like to use Google Analytics for it, but no data is coming.
I think, the reason for this is that Google runs my codes as an .
Is there a solution for this?
Thank you.
some videos in Userform Level 3 Series playlist are private, are they upcoming videos?
Thank you, great video. You are expert!! 👏👍
Thank you!
It shows problem with form responses sheets. working perfectly with other sheets that are non-form responses. How can i solve this sir?
you are very great man , I have a question : I want to know how many times word repeats in one cell?
thanks for the video, please tell me how can I somehow load the last 5 records before searching so that the table is not empty?
is it possible to create a button that automatically loads the form instead of loading it from the menu bar?
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. Hope there is something easier.
Need advise from anyone, please.
Appsheet vs Web App?
Is it OK to go with google sheet as DB or shud I choose anything else like MySQL (am little good at T-SQL)?
Recently I upgraded many junk of MS EXCELS to Google sheets. Am using this for my Textile factory operation tracking purpose (we do fabric printing as job orders for our customers). I track different departments in my factory. I tried to make an intranet website for this using HTML, Angular, Mongo. But I cudnt get time for learning as I moved from IT to textile industry. Now looking for options to make work easier and make my staff (some are blue collared staffs) to touch the data safely and easily. I saw Appsheets and this Web App. Dont know which one I shud go with. I was in prod support in my IT life, so not good at core coding.
My goal is to make
- Any Layman to update the tracking data
- Need to generate dashboard, reports that shud be visible for management (including me )
- Database and any tech that am gonna use shud be free (my partners are not gonna interest and invest in IT. I need to make use of anything comes for free)
- need to show fabric design images in every job card across every department wise tracking
we dnt have any server running 24 hrs in our factory. Thats why I moved to google sheet for now to have the data access outside the factory too. I have design images in our Google drive, from where I access the thumbnail and display in google sheet for now
I'm very grateful to you.
tqvm for sharing this! really appreciate it!
My favourite youtube channel without any doubt! Any plans to do a crud example like this published deployed as webapp instead of via custom menu in Spreadsheets?
It takes 5 minutes to convert this to a Web App. Check out my other channel for more info czcams.com/video/bwy1TS6If38/video.html
Hi sir,
I wrote the code according to your video and I have evaluated the duration of the video for 3 days only to find out how to move the page to another page but all stuck, can you help me with the matter of switching pages with the code you show in the video series, thx
How will this table with the form open if you use a phone?
super.. thank you
Sir Thanks for the video , but if we have to use Date then all goes Haywire , We can only add Dates but cannot edit Them or search them , can you help
you're unbeliavable amazing. thanks for your tutorial that give so much help
if you don't mind, may i ask you something ?
can we create an auto new table data based on data we choose ?
Amazing video!! Thank you so much!!
I'm just wondering how to deal with an error that says: "cb() is not a function". My form just loads one view at a time. Or it loads search view and then don't load anything else, or it loads Add Customer View and then don't load anything else. What I'm doing wrong? I double checked my code, but I'm benginner. Thank you a lot once more for your amazing videos!!
I'm not on Patreon, but I really want to buy you a coffee...or send a few bucks your way. Your videos are amazing.
Thanks Anthony! You may do so on this page www.chicagocomputerclasses.com/youtube-learn-google-spreadsheets/
Your coffee this morning is on me! Thank you again for posting such awesome content.
Hi, was trying to look for the Starter Template. Turns out, is not the same template anymore. It also has, what it appears to be arabic letters on some of the sample data. Any advice? Are you planning to update this video. I think is one of the most valuvole ones. Thank you so much for your time.
All your series and the way of explaination is just amazing. However, I am receiving and error in console on loadView() function as it says google.script.run.withSuccessHandler(...)[options.func] is not a function.
function loadView(options){
google.script.run.withSuccessHandler(function(htmlAsString){
document.getElementById("mainContent").innerHTML = htmlAsString;
})[options.func]();
}
exact copy of yours, can't figure out why.
Exellent - Very good ! - In an other video, can you explain us, how insert picture in html part ? - Thank you
Definitely the best Google Sheets CZcams channel ! ALL steps are indicated in the 5 CRUD videos ? I'm going to start typing the code so please tell me.
Part 6 is coming up and that should be it.
You are a great teacher. I would like to ask a question why my code have error it says html.evaluate is not a function? Hope I can answers from you and anybody thank you! :)
Great!
Thank you for these videos. Once you switched to Bootstrap I can't seem to make it work any longer. I followed a lot of your older videos and it always worked so far. I also notice that each time I do evaluate(), GAS tells me that it is not a function. Maybe it plays a role in that problem.
Bootstrap has nothing to do with it. It seems like you've already narrowed down your problem. If evaluate is not a function then something went wrong in your HtmlService.createTemplateFromFile part. So check those lines carefully.
@@ExcelGoogleSheets I will, thank you for your hard work !
I am not able to load search page, done everything as you mentioned but still can't do it.
What awesome work! Is the code files available for this project?
Many many thanks
Thank you!!!
mine still can load the view even though i followed all your code. when i inspect the result is "uncaught TypeError: cannot read properties of undefined (reading 'text'). is there any solution? thank you in advance
How can I add the sort option for table.
Hi great tutorial, have you made the source code available? Thanks in advance.
Same here webapp series are best.
My script stopped working when i tried to put params in otherFunc, that didn't work.
I wonder why I don't have the 'Project' option and only Script or HTML under the new button? Has this been dropped since? Oh, and thank you. Thank you, so very much. Your videos have helped me at work so much I'm building my next role thanks to you. If you are in Vancouver I'd buy you lunch once the plague abates!!!
This CRUD is really good but I can't take it in without seeing the code. Would you be willing to sell access to it to a Not For Profit ?
Awesome
Thank you very very very much
I'm facing this error. Uncaught TypeError: Cannot read properties of null (reading 'slice') and Uncaught TypeError: Cannot read properties of undefined (reading 'filter') . could you help me out?
Thank you so much for the video.. however I cant seem to get the Search tab to print the text in the search.html.. please help!
Me too!
GREAT WORK! BUT
I can’t seem to get the Search tab to print the text in the search.html :( help me
me too.
Hi, can’t view both Search, Add Employee and Home. I did follow everything but I'm not really sure what’s going on. If you could help me please…
As much as I would want to watch the next lesson, I can't since I can't fix this problem... :-(
Error:
"The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use "preloadResponse', use waitUntil() or respondWith() to waitfot the promise settle.
Uncaught SyntaxError: Unexpected identifier
message: "There was an error during the transport or processing..."
loadForm.gs
function loadMainForm() {
const htmlServ = HtmlService.createTemplateFromFile("index");
const html = htmlServ.evaluate();
html.setWidth(850).setHeight(600);
const ui = SpreadsheetApp.getUi();
ui.showModalDialog(html, "Edit Employee Data")
}
function createMenu_() {
const ui = SpreadsheetApp.getUi();
const menu = ui.createMenu("Custom Menu");
menu.addItem("Open Form", "loadMainForm");
menu.addToUi();
}
function onOpen() {
createMenu_();
}
Index.html
function loadView(options){
var id = typeOf options.id === "undefined" ? "app" : options.id;
var cb = typeOf options.callback === "undefined" ? function(){} : options.callback;
google.sript.run.withSuccessHandler(function(htmlAsString){
document.getElementById(id).innerHTML = html;
var cb = typeOf options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadSearchView () {
loadView({func: "loadSearchView"});
}
function loadAddEmployeeView () {
loadView({func: "loadAddEmployeesView"});
}
function loadEditEmployeeView() {
loadView({func: "loadAddEmployeesView"});
}
document.getElementById("search-link").addEventListener("click," loadSearchView);
document.getElementById("add-employee-link").addEventListener("click,"
loadAddEmployeesView);
document.getElementById("home-linkk").addEventListener("click," loadEditEmployeesView);
loadPartials.gs
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView() {
return loadPartialHTML_("search");
}
function loadAddEmployeeView() {
return loadPartialHTML_("addEmployee");
}
function loadEditEmployeesView() {
return loadPartialHTML_("editEmployee");
}
Hi, thank you for the great video!
I tried sharing my Google sheets with the custom menu to another user and the other user is unavailable to see/use the custom menu. Is there anyway to do this?
I'm trying to set a user interface for the data stored in my Google sheets to facilitate looking up of data via search bars for the end users.
Menu should work for other users just fine. Not sure why you're having issues.
Cool!
great tutorial, can you please continue this on how to publish it as an web app and also load some images from the table url strings
I would like to know how to publish it as a web app as well, that would be brilliant
mine nav still unclikable, even tough i copy all your code. is there any solustion? thank you in advance
I have problems when clicking on the it sends me to different HTML templates when clicking I can't find the problem in the console
I have the same problem
document.getElementById("link").addEventListener("click",view);
check your points
in the so-called
it worked for me
Can you add print option in this
Love your videos...I'm making a new app based on them. One question...how to make input data persist when changing the views if they constantly reload? For instance a selected checkbox.
Save it some place. You could use PropertiesService.getUserProperties() service.
It's not simple if you're not already comfortable with web development.
google.script.run.withSuccessHandler(function(html){
/* Code */
})[options.func]() ; // I don't understand this. Why [options.func]() can run GAS function
19:10 This didn’t work for me. The loadSearchView doesn’t show when I click on the Search tab. I couldn’t find any errors in my code and followed you exactly. Can you please help me?
same problem here, we have a newer version of bootstrap's template. not sure if that has anything to do with it. Please help!
you need to add "return" into your loadPartialHTML_ function. Whole final line of this function should be "return htmlServ.evaluate().getContent();"
@@maisterPernat I have the same problem. loadSearchView was not showing anything. Please help. Thank you:D
@@maisterPernat Already have that coded in my loadPartials.gs. I'm 100% sure I have followed the tutorial thoroughly.
@@grantdotulong2327 try checking for typing errors then. I was following this tutorial a week ago with latest version of bootstrap and it works for me. The only thing I changed is added this return statement
displaying the search page doesn't work for me either..........................................................
tried out all the tips and double checked my code but it does not run.
it would be awesome if someone could address this
can u share the code? or where can i find it?