I'm really enjoying your tutorials. I had no idea Google Docs could be so powerful and you could even do all this. This is a very under-rated resource that needs a lot more attention. The possibilities are limitless.
The world needs more tutorials like this. There's lots of stuff out there but (I think) this is the most current GAS tutorial. Very easy to follow and use!
great tutorial for startups, thank you for this series, but i would like to know a few more things here 1) how to make field required ( just as in Google Forms) 2) Creating another section or page ( just as in Google Forms) 3) on selecting from multiple choices and submit the form link to the selected page ( just as in Google Forms) 4) Adding Location Api json 5) Suggest as you type 6) Log in with email again thanks a lot for this helpful series, waiting for your reply
hi @inshaA inc~ If you want to make a field required for a user, it is as simple as adding the text, "require", right before the ending html tag for the input element. for example, if you wanted to require that a user populate their last name, it would look something like this:
I think Google Sheets is a great tool for teaching programming basics. I really enjoy your videos, everything is well explained and you go step by step. Didn't even know this shit is possible.
Really good tutorial. I'm building a registration form for the volunteer organization that I am with. Just need to dig in to find out how to adjust the formatting so that it looks good on different devices (phone, tablet, computer browser).
I think there are a few things that could be great to have in this set of tutorials related to web app developing: 1. User login validation. 2. Retrieve data from a spreadsheet to the web app, i.e.: let suppose you want to select data from a spreadsheet and pull it to a drop-down list: state, city, course, etc. 3. Populate fields with data from the spreadsheet, i.e.: you want to replace a register or fix a mistake in the registered data. Can you teach us how to do that?
@@kinestheticlearningHi. In fact there are two or three more excellent videos in this channel where you will get the answers to the points 2 and 3. I haven't found a login validation system for google apps script, i know you can use Google Login but i haven't been able to run it. Let us know if you manage to make it work. You can find excellent information in this channel 👍
2:55 You add the meta tag - but according to the apps script documentation, meta tags directly in the HTML file are ignored. I had to change my doGet to this in order for the meta tags to work: function doGet(e) { var tmp = HtmlService.createTemplateFromFile("page").evaluate(); var output = HtmlService.createHtmlOutput(tmp); output.addMetaTag('viewport', 'width=device-width, initial-scale=1'); return output; }
If you are wanting to use your own CSS or another CDN.css for your webform and trying to use the browser input checker "required" , you find it doesn't work properly and submits empty input stuff try using tags and then inside your button tag use onclick=dostuff() .[ Submit ],
couldn't get the dropdown to initilialize on chrome for some reason?.. try adding class="browser-default" to the select tag. that did it for me although I won't get my hair back.
last part where initialising select option back to index zero not working for me. have no idea why although I followed your codes step by step. thanks for the tutorials, they have helped me learn quickly.
Hi.. Being following your videos and I've managed to put a modest web app together that we're launching soon, So thank you for sharing your knowledge, it's been fun and I'm not planning to stop. One suggestion.. Could you make a video on Modals. it seems to be that js alert and prompts and confirmations might have some issues and I could use Modals in my application.. will have to research than one on my one but I think it would be a nice addition to your series.. Thank you again!
thank you very much - great stuff. hope you go on with this Web App Serie and show us how we push variable to the othe side anf show how to edit a spreadsheet completly in a html template with all type of fields
Nice tutorial, but needs more cowbell Just kidding, thanks , I am learning a lot. Some instructions are confusing, but I guess with practice they start to make more sense. Cheers!
Good day sir, first of all, thank you for your videos, they are awesome! I am a person who never learned to code, and not an English speaker either, can easily follow your lessons. I came across a little problem while making this example, if you are so kind to help me: selection works fine in windows browser, but won't work in chrome on android (android 10). It does not fill in what I choose. Is there any way to fix it? Thanks again for your great work.
I've done a lot of Web Dev tutorials but I apparently have a very bad memory.. I am wondering if I may do better to re do some of my tutorials and copy and paste from VS code into this google web app stuff?
Awesome video. Just wanted to ask a silly question. What are the benefits of using web app over google form as we can do almost same thing in google form like all the response will be collected in spreadsheet. I really enjoyed all your videos and learned lot many things. I am asking this kind of question to enhance my knowledge on this. Thanks
Excellent videos Thank you for teaching us all about this new world, little explored, but very useful. I would like to know for this example, to place validations that allow for example that to click on the button, the text fields are full, otherwise show a validation message and return to the field where it is not full. Thanks again.
Another great video! I'm curious if you've looked into Google App Maker? It's supposed to be a no/low code app making solution but when I look at their examples there's a ton of client and server side code that has to be developed. Your video has me wondering if I should go this route of using HTML/CSS and Google Sheets or if I should keep trying to get the hang of Google App Maker. Please let me know if you have any thoughts on that. Thanks again for sharing all of your great videos. They've helped me out so many times.
Haven't used Google App Maker. Didn't even know it existed. Seems like it's only available with paid accounts. I'm pretty sure you will still need to you apps script stuff to communicate with other Google services.
@@ExcelGoogleSheets You're correct, it is only available on GApps paid accounts. I was a little shocked that you hadn't even heard of Google App Maker. I'm not judging, in fact just the opposite, sometimes I'm find myself thinking everyone who does development like this has heard of all of the same stuff. Which of course is a laughable idea. I'm sure there are tons of things you know of and use that I've never heard of. Anyway, I've been following along with this series of videos and having a blast building a webapp. Thanks again for sharing your work. It's always very helpful and clearly presented.
hi, i find your tutorials very helpful, thanks. i wanna ask u how to use "required" on input fields, i failed to prevent blanks form sub mission. thanks
Is this like Google form? once we submit the data it will make a new row? The reason I ask because if it does, then I will not be able to use the formula for the cell
great video. I sis get lost on a few steps. You just seem to jump around to much. I know this is things that are very hard to explain. You see a mistake and then you fix and you explaining this and if it is someone that really don't understand what is going on like me we get lost. But this was something I have been wanting to do for a long time. I know this is just the first step
Can you create a video: A file upload form (image) with image crop and post to drive. When image name and image link (image link as like Google form) display on spreadsheet.... I tried that video but I can't to find same that
Permitte me Sir.. If I choolse select mutiple form which is this script:
Choose your option Option 1 Option 2 Option 3
Materialize Multiple Select What script should I write to get that selected (or not 1 value even selected) to append it to my Spreadsheet? I can't figure the right script with this materialize CSS or even without it. Thanks Sir.
Had the same issue, but discovered at the very end where we added M.FormSelect.init(elems); to the bottom of that last block... make sure you also change it to M.FormSelect.init(myApp); -- it's very easy to miss crucial final step at 24:08 because he does this edit very fast in the video - blink and you'll miss it !! The hint gets back to why we created var myApp = document.getElementById("app"); a couple of lines prior in the first place... which at first for me didn't make much sense until I realised that final (myApp) edit also had to be done, hence saving retyping the whole thing.
I got a problem using this materialize CSS...the problem is on jump menu options, it didn't work in android web browser. When I chose one of the options, it returned default value. do you know how to solve this?
Thanks for posted amazing videos, i had one issue, i hope you still check comments, i did following your tutorial but when i open web app on mobile, select can't work normally. i searched on google for this issue but it seem like materializecss bug yet?
try adding meta tag through .addMetaTag('viewport', 'width=device-width, initial-scale=1'); to your HtmlService variable. See example here developers.google.com/apps-script/reference/html/html-output-meta-tag
Can you paste here the full codes?cause in my work we can't access other non-work related sites. Apparently, I can't acces the materialize website to get codes, so I was hoping if you can paste here the full code for css, script and html? Thankyousomuch!
Thank you! Can you please explain this phenomenon: I used your code from this video in my Google sheet and it worked. Then I customize it for other sheets - almost identical!!! I deleted only select and renamed швы (and "for" accordingly of course) and I get elements inactive! The button does nothing, the whole function doesn't work from the beginning. So I guess this line doesn't get executed: document.getElementById("btn").addEventListener("click",addRecord); What's happening? It works in one place, and does not in another.
12:47 What should I do if the options of the 'select' populate dynamically with js. In the Initialization section it says "In addition, you will need a separate call for any dynamically generated select elements your page generates."
Add the option to the select box, destroy the old Materialize object and initialize again. Which mean you need a global variable var mySelectBox; and later in code function some(){ mySelectBox = M.init(blahblah) } later you can destroy mySelectBox using whatever the method is called in their docs and then run mySelectBox = M.init(blahblah) again.
@@ExcelGoogleSheets Thanks for the answer, but I don't get it! I would love to understand why it doesn't work. I'm using a function that takes an array and with a For Loop creates and add an to the element, for each element in the array. It was working before using Materialize. If the HTML is created, why materialize doesn't let it show?
@@manuelnacer2258 Because to make it look pretty materialize hides the HTML select box and replaces it with an unordered list. You are changing the select box, but the unordered list that was generated with Materialize won't reload by itself. If you use it will most likely work.
@@ExcelGoogleSheets Thanks, for the answer. Now it is clearer why it doesn't work. class="browser-default" worked. I will try to get the solution for to make it work and look pretty
So followed the exact same process. A couple of things for screwed up after 1st submission. 1. After submitting the form goes blank. 2. after reloading the entire dropdown got vanished.
Hello, my problem is that i have a dynamic form, the first part that are fixed field are respected by MATERIALIZE links, but the field create on JS with option buttons depending text field in a sheet are deleted or didn't appear when i add the Link Rel from MATERIALIZA..any idea how to fix it? thanks
I assume you mean new input elements created or modified by script don't show up properly. You'll need to rerender those elements with materialize for them to show up. Watch the next part, you'll see an example of rerendering materialize elements.
TIP: u lose 54k likes, say "remember click like and suscribe" on mid of the video, i surprice u have alot of views and low likes cuz the tutorials are excellent and i forget like parts 2,3,4+++.
I'm really enjoying your tutorials. I had no idea Google Docs could be so powerful and you could even do all this. This is a very under-rated resource that needs a lot more attention. The possibilities are limitless.
The world needs more tutorials like this. There's lots of stuff out there but (I think) this is the most current GAS tutorial. Very easy to follow and use!
baru ngikutin dari part 1 sampe ini, keren banget buat pemula, dan ngejelasinnya mudah dipahami :) thanks
great tutorial for startups, thank you for this series, but i would like to know a few more things here
1) how to make field required ( just as in Google Forms)
2) Creating another section or page ( just as in Google Forms)
3) on selecting from multiple choices and submit the form link to the selected page ( just as in Google Forms)
4) Adding Location Api json
5) Suggest as you type
6) Log in with email
again thanks a lot for this helpful series, waiting for your reply
hi @inshaA inc~ If you want to make a field required for a user, it is as simple as adding the text, "require", right before the ending html tag for the input element.
for example,
if you wanted to require that a user populate their last name, it would look something like this:
Last name
Thank you very much, for the first time I get a touch on the concept of GAS, it is great, and your passion on coding impressed me. Thank you
I think Google Sheets is a great tool for teaching programming basics. I really enjoy your videos, everything is well explained and you go step by step. Didn't even know this shit is possible.
insted "Tab" you can use "Ctrl+[" or "Ctrl+]"
Buddy, GREAT video... this kind of tutorials should get more attention. In fact, you really do great videos and help people. Cheers to you...
Really good tutorial. I'm building a registration form for the volunteer organization that I am with. Just need to dig in to find out how to adjust the formatting so that it looks good on different devices (phone, tablet, computer browser).
This is lifesaving. Can you also show me how to use materialize css Checkboxes and to send multiple values from the checkboxes to the spreadsheet?
ты так объясняешь что я не зная английского все понимаю)) спасибо!!!
Tab works if you uncheck the setting to the left of the save "disk" button
I think there are a few things that could be great to have in this set of tutorials related to web app developing:
1. User login validation.
2. Retrieve data from a spreadsheet to the web app, i.e.: let suppose you want to select data from a spreadsheet and pull it to a drop-down list: state, city, course, etc.
3. Populate fields with data from the spreadsheet, i.e.: you want to replace a register or fix a mistake in the registered data.
Can you teach us how to do that?
I'd like to see some answers to the very same questions and wonder if you have found any good tutorials on them yet? Thanks.
@@kinestheticlearningHi. In fact there are two or three more excellent videos in this channel where you will get the answers to the points 2 and 3. I haven't found a login validation system for google apps script, i know you can use Google Login but i haven't been able to run it. Let us know if you manage to make it work.
You can find excellent information in this channel 👍
to use tab to indent, you can toggle the "INDENT" button beside the "SAVE" button to toggle the function on.
2:55 You add the meta tag - but according to the apps script documentation, meta tags directly in the HTML file are ignored.
I had to change my doGet to this in order for the meta tags to work:
function doGet(e) {
var tmp = HtmlService.createTemplateFromFile("page").evaluate();
var output = HtmlService.createHtmlOutput(tmp);
output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return output;
}
Thanks, didn't realize that.
thx man, lack of responsiveness on mobile was driving me crazy
@@ExcelGoogleSheets you could possibly edit the video description with @Wictor solution to save users some time and frustration
Perfect! thx!
If you are wanting to use your own CSS or another CDN.css for your webform and trying to use the browser input checker "required" , you find it doesn't work properly and submits empty input stuff try using tags and then inside your button tag use onclick=dostuff() .[ Submit ],
amazing video is so usefull
More videos on web app series please.
couldn't get the dropdown to initilialize on chrome for some reason?.. try adding class="browser-default" to the select tag. that did it for me although I won't get my hair back.
it worked but it somewhat overlapped the label.
Thank youuu sooo much 🥺 . I can't say how much I'm in need of these
I've found out how to use "Tab". It aligns to bottom element. So, you can make position for one element, then choose bottom elements and press Tab
last part where initialising select option back to index zero not working for me. have no idea why although I followed your codes step by step. thanks for the tutorials, they have helped me learn quickly.
For me too
deselect the indent button from the above tool bar for the shift to work
yo ! I subscribed to your channel and watching all your playlists even for "fun". We learn new stuff everyday! Thanks so much !
you the man!
Hi.. Being following your videos and I've managed to put a modest web app together that we're launching soon, So thank you for sharing your knowledge, it's been fun and I'm not planning to stop. One suggestion.. Could you make a video on Modals. it seems to be that js alert and prompts and confirmations might have some issues and I could use Modals in my application.. will have to research than one on my one but I think it would be a nice addition to your series.. Thank you again!
thank you very much - great stuff. hope you go on with this Web App Serie and show us how we push variable to the othe side anf show how to edit a spreadsheet completly in a html template with all type of fields
I really enjoy learning this !!!, After Clicking on Run It button My page display blank ... what is the reason of it?
Nice tutorial, but needs more cowbell
Just kidding, thanks , I am learning a lot. Some instructions are confusing, but I guess with practice they start to make more sense. Cheers!
Good day sir, first of all, thank you for your videos, they are awesome! I am a person who never learned to code, and not an English speaker either, can easily follow your lessons. I came across a little problem while making this example, if you are so kind to help me: selection works fine in windows browser, but won't work in chrome on android (android 10). It does not fill in what I choose. Is there any way to fix it?
Thanks again for your great work.
I've done a lot of Web Dev tutorials but I apparently have a very bad memory.. I am wondering if I may do better to re do some of my tutorials and copy and paste from VS code into this google web app stuff?
Awesome video.
Just wanted to ask a silly question.
What are the benefits of using web app over google form as we can do almost same thing in google form like all the response will be collected in spreadsheet.
I really enjoyed all your videos and learned lot many things. I am asking this kind of question to enhance my knowledge on this.
Thanks
Excellent videos Thank you for teaching us all about this new world, little explored, but very useful.
I would like to know for this example, to place validations that allow for example that to click on the button, the text fields are full, otherwise show a validation message and return to the field where it is not full.
Thanks again.
tab works, you just have to deactivate the button left to the save disk
Wao! Its really nice 😍j
Another great video! I'm curious if you've looked into Google App Maker? It's supposed to be a no/low code app making solution but when I look at their examples there's a ton of client and server side code that has to be developed. Your video has me wondering if I should go this route of using HTML/CSS and Google Sheets or if I should keep trying to get the hang of Google App Maker. Please let me know if you have any thoughts on that. Thanks again for sharing all of your great videos. They've helped me out so many times.
Haven't used Google App Maker. Didn't even know it existed. Seems like it's only available with paid accounts. I'm pretty sure you will still need to you apps script stuff to communicate with other Google services.
@@ExcelGoogleSheets You're correct, it is only available on GApps paid accounts. I was a little shocked that you hadn't even heard of Google App Maker. I'm not judging, in fact just the opposite, sometimes I'm find myself thinking everyone who does development like this has heard of all of the same stuff. Which of course is a laughable idea. I'm sure there are tons of things you know of and use that I've never heard of. Anyway, I've been following along with this series of videos and having a blast building a webapp. Thanks again for sharing your work. It's always very helpful and clearly presented.
Thank you,very cool! Please share code text.
hi, i find your tutorials very helpful, thanks. i wanna ask u how to use "required" on input fields, i failed to prevent blanks form sub mission. thanks
Great video and works perfectly, but not for working on mobile device browser. Any suggestions? Seems like materialize css issue
Add viewport metatag to your HTML output developers.google.com/apps-script/reference/html/html-output#addMetaTag(String,String)
Amazing tutorial! I have tried to repeat an include example but got an error "ReferenceError: include is not defined". Where I can be mistaken.
Awesome, keep going
Is this like Google form? once we submit the data it will make a new row? The reason I ask because if it does, then I will not be able to use the formula for the cell
great video. I sis get lost on a few steps. You just seem to jump around to much. I know this is things that are very hard to explain. You see a mistake and then you fix and you explaining this and if it is someone that really don't understand what is going on like me we get lost. But this was something I have been wanting to do for a long time. I know this is just the first step
How to make a responsive email html template which changes style of an element depending upon the device/app the email is viewed on?
Simplemente, GENIAL!
Thanks
the initialize option for JS wasn't there.. only JSquery
I tried to type it in manually, but also didnt work..
at 12:55 in the tutorial.
Wow works awesome
Muchas gracias. ¡Excelente!
Hey! use some editor like Visual Studio or Notepad ++ for code indentation.
How to get options dynamically in dropdown
I tried to add a date picker, everything works on the html side but it is passing an "undefined" result to the sheet. Any suggestions?
Good Job!!!!
Can you create a video:
A file upload form (image) with image crop and post to drive. When image name and image link (image link as like Google form) display on spreadsheet....
I tried that video but I can't to find same that
Just a random question, are you doing there tutorials as a solo entrepreneur?
Yes
Permitte me Sir.. If I choolse select mutiple form which is this script:
Choose your option
Option 1
Option 2
Option 3
Materialize Multiple Select
What script should I write to get that selected (or not 1 value even selected) to append it to my Spreadsheet? I can't figure the right script with this materialize CSS or even without it. Thanks Sir.
the last thing you did reset the dropdown it doesn't work for me
Had the same issue, but discovered at the very end where we added M.FormSelect.init(elems); to the bottom of that last block... make sure you also change it to M.FormSelect.init(myApp); -- it's very easy to miss crucial final step at 24:08 because he does this edit very fast in the video - blink and you'll miss it !!
The hint gets back to why we created var myApp = document.getElementById("app"); a couple of lines prior in the first place... which at first for me didn't make much sense until I realised that final (myApp) edit also had to be done, hence saving retyping the whole thing.
@@benjohnson5897 I already did that. bt no use. here is may code:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
document.getElementById("btn").addEventListener("click",doStuff);
function doStuff() {
var userInfo = {};
userInfo.MobileNumber = document.getElementById("MobileNumber").value;
userInfo.AccountName = document.getElementById("AccountName").value;
userInfo.AccountHolderName = document.getElementById("AccountHolderName").value;
userInfo.AccountType = document.getElementById("AccountType").value;
google.script.run.userClicked(userInfo);
document.getElementById("MobileNumber").value = "";
document.getElementById("AccountName").value = "";
document.getElementById("AccountHolderName").value = "";
var myApp = document.getElementById("AccountType");
myApp.selecetedIndex = 0;
M.FormSelect.init(myApp);
}
Tab works in the next line before you spaced
I got a problem using this materialize CSS...the problem is on jump menu options, it didn't work in android web browser. When I chose one of the options, it returned default value. do you know how to solve this?
Thanks for posted amazing videos, i had one issue, i hope you still check comments, i did following your tutorial but when i open web app on mobile, select can't work normally. i searched on google for this issue but it seem like materializecss bug yet?
try adding meta tag through .addMetaTag('viewport', 'width=device-width, initial-scale=1'); to your HtmlService variable.
See example here
developers.google.com/apps-script/reference/html/html-output-meta-tag
I put a "directions_run" icon on the "Run it!" button! Looks fun! АААхахахаха ААА!!! :D
amazing video!! however i got stuck where i can't initialize my "select" even i add the JS of initialization T.T, what's the problem
Can you paste here the full codes?cause in my work we can't access other non-work related sites. Apparently, I can't acces the materialize website to get codes, so I was hoping if you can paste here the full code for css, script and html? Thankyousomuch!
thanks much!
Thank you! Can you please explain this phenomenon: I used your code from this video in my Google sheet and it worked. Then I customize it for other sheets - almost identical!!! I deleted only select and renamed швы (and "for" accordingly of course) and I get elements inactive! The button does nothing, the whole function doesn't work from the beginning. So I guess this line doesn't get executed: document.getElementById("btn").addEventListener("click",addRecord); What's happening? It works in one place, and does not in another.
Sorry, I can't tell by looking at this.
Thanks !
wow no sabia que eso se podia hacer genial
Muy bueno, se agradece, de que forma se puede colaborar con el canal? $
🙏🏻
Can webapp work in mobile
Can I use these Materialize links and CSS icons in commercial apps?
I believe it's MIT license, but not sure 100%. You can read license terms on their website.
12:47 What should I do if the options of the 'select' populate dynamically with js. In the Initialization section it says "In addition, you will need a separate call for any dynamically generated select elements your page generates."
Add the option to the select box, destroy the old Materialize object and initialize again.
Which mean you need a global variable
var mySelectBox;
and later in code
function some(){
mySelectBox = M.init(blahblah)
}
later you can destroy mySelectBox using whatever the method is called in their docs and then run mySelectBox = M.init(blahblah) again.
@@ExcelGoogleSheets Thanks for the answer, but I don't get it! I would love to understand why it doesn't work. I'm using a function that takes an array and with a For Loop creates and add an to the element, for each element in the array. It was working before using Materialize. If the HTML is created, why materialize doesn't let it show?
@@manuelnacer2258 Because to make it look pretty materialize hides the HTML select box and replaces it with an unordered list. You are changing the select box, but the unordered list that was generated with Materialize won't reload by itself.
If you use it will most likely work.
@@ExcelGoogleSheets Thanks, for the answer. Now it is clearer why it doesn't work. class="browser-default" worked. I will try to get the solution for to make it work and look pretty
@@manuelnacer2258 I managed to have the same problem, it works but only with class="browser-default". I don't get it why
So followed the exact same process. A couple of things for screwed up after 1st submission. 1. After submitting the form goes blank. 2. after reloading the entire dropdown got vanished.
It seems like you're using the form tag, which I have removed.
Great stuff man, but i'm stuck where i have to create cascading select inputs on the userform using materialize select elements. pls help.
use the content of the tag here: www.tutorialspoint.com/materialize/materialize_selects.htm
Hello, my problem is that i have a dynamic form, the first part that are fixed field are respected by MATERIALIZE links, but the field create on JS with option buttons depending text field in a sheet are deleted or didn't appear when i add the Link Rel from MATERIALIZA..any idea how to fix it? thanks
You'll have to provide an example. Use codepen or something to share the code that doesn't work.
I assume you mean new input elements created or modified by script don't show up properly. You'll need to rerender those elements with materialize for them to show up. Watch the next part, you'll see an example of rerendering materialize elements.
Why my selecor didn't show up
Where to find code ?
hi, not mobile friendly sir
Do you have any suggestions ?
Source codes plz!!!!!!!!!!!????!!!!!
13:34
TIP: u lose 54k likes, say "remember click like and suscribe" on mid of the video, i surprice u have alot of views and low likes cuz the tutorials are excellent and i forget like parts 2,3,4+++.