Template Partials & Passing Objects - Google Apps Script Web App Tutorial - Part 2
Вставка
- Опубліковано 20 лип 2024
- Learn how to pass multiple values from your Web App to Google Apps Script functions; separate HTML, CSS & JavaScript by creating template partials.
#webapp #google #spreadsheet
Awesome! :) It seems you’re helping me get started with HTML for the first time that feels understandable and connected to a ‘back end’ I feel familiar with.
Muchas gracias por sus tutoriales, los he retomado con mayor atención pues anteriormente no los comprendía ya que nos tenía conocimientos básicos de html, css y javascript. Es grandioso su trabajo y lo aprecio mucho.
helped me a lot...Great tutorial...finally had a video that could in-depth explain scripts by google
Best Tutorials I have found. Thanks so much. I would love to watch an html tutorial by you as well as css.
I'll watch any videos you make, top notch
Excelentes tutoriales, mi ingles no es bueno, pero logre entender la mayor parte de tu contenido, ¡muchas gracias!
Great video - a pleasure to have an expert explain it - with just the right speed and just the right amount of explanation - hat off to you Sir!
Many thanks!
greatly explained! TY! well done mate!
Nice one Both part 1 & 2 I found it very useful for my development
Thanks so much, my man !!!
you the man
amazing video so much usefull info
You are really amazing man... I really learn a lot from your videos.... Thanks ...
amazingly helpful, thank you so much
Great tutorial. Thanks! Subscribed your channel.
Great tutorial. Thank you so much
Lovely! Your tutorials helped me to build my own web app for my organisation. Thanks a lot.
Wow nice to hear that am working on the same project to build my own Web app
I thought I was with you - and learned a ton, thank you! - until the last two minutes beginning with defining the function include(). There MUST be a simpler way to do that.
Thanks. Great tutorials.
Thanks, Great Tutorial
Amazing video!! Thank you so much!!
Hello, thank You very much, great lessons) How about moving cursor between textboxes after update values?
hey dude, thanks for the great videos, I know its a long shot but (in the beginning of the previous video you mentioned about parameters and how we can access them but you didn't explain how!) will you make a videos about how to use parameters and dynamically add them in the sheet? after I watched your videos, I though of if it is possible to build an extension and do the same thing as this web app but instead, use an extension!
Thank you! You are perfect explaining. i am from Argentina :)
Thank you! 😃
I would watch html javascript videos. Thanks again.
Thank you so much!
It was really great help for me
Insane I love it.
Please make a video about the Google website form regarding delivery and maps when filling in customer data
Hi, first of all, you helped me a lot! I followed 3 video from you about sidebar. But in non of them i get the value from a select or label back to a var in my script... i looks like my script in the html is not running.
thanx best coding vedio
This is great! What do I need to do to enter and null or no value if a field is not filled out?
awesome, thanks!
Great !
In the structure presented, how can we improved both page-js.html and code.gs include() function to receive and sent the original e paramaters values in doGet() function?
Nice video
Amazing, Thank you
Thank you for the useful video. May I ask for the results of the Google Apps Script Web App. thank you for your kindness.
Thanks for the great job. Now if I need to include a multiple selector to the form, what changes do I have to make to post all the selected values separated by comma into the cell instead of just posting the first selected one? Thanks again!
In your example I added this modification to enable the user to select multiple values at once but I only get the first selected value in the cell. Help please!
Great tutorial, but how would you avoid that the „include“ function would be called from another script, passing some other file names as parameters?
Having this would lead to access other files on the GDrive and „printing“ its content.
Add underscore in the end to make it a private function. include_
Learn Google Spreadsheets Thank you for your answer!
Hi, thanks your video. I want to learn how to return variable to html file. I mean passing variables between gs.code and html file mutually ?
Thank you so much for these tutorials. Have basically learned how to make a web app from you during quarantine - something I have always wanted to do. I am having a problem making the include js file work. My page, input data capture and write to spreadsheet work great - until I move the js to a different file (which I would love to do). I've triple checked the code and everything seems in order. Logic would dictate that the problem is in the include function of the call to use it in the secrtion of the page body. But, after a few hours of trial and error and triple checking I can't find any problems... Any ideas? (btw, I never got Materialize to initialize properly so I am using Bootstrap instead. any issues there???) Thanks!
You can't use skriptlets within include file, if that's what you're asking.
I also had the same issue until after multiple checks I found I had missed to add getContent() at the end of include function.It worked fine for me after that.
Thanks a million! very thorough! Question for you if don't mind: passing a 2-d array at once to app script, how does it work? thanks.
I ahve an example of passing arrays in these series ua-cam.com/play/PLv9Pf9aNgemu4fJqo-amyint-YXpSFIkn.html
Hi, Thanks form great tutorial, Wanted to check possible to get code from anywhere?
Thank you for your video. How about if I want to use checkbox, and I want to send all the selected item in a single click, and in a single column in the Googlesheet. Thank you
🙏🏻
I can't seem to call the server side function even after redoing everything.
It doesn't even show on the stackdriver logs unlike the last video. I'm not sure what's wrong.
EDIT: Yeah I figured it out I missed a variable. Can we somewhat use VS code for Google Apps Script?
Great tutorial.
Thank you.
However, the style is not being applied, that is, it is not including the margins in each .
I've gone over the code several times and it's just like in the video.
Has it happened to anyone else?
Who could help me?
i had this glitch when I missed to inlude in the css file.
Hello kind sir! Thank you very much for your time spent teaching a wonderful series. I watched video and now attempting to do things on my own.
I have a question: Why is the addEventListener doesn't work now?
Not sure what it is, but it's definitely not addEventListener.
Thanks
Hello, thanks for your videos, they are really amazing.
however i have a small question, hopefully you get back to me.
is this google app scripts supporting of preprocessors ? like CSS LESS for example ?
if so can you please tell me how ? if not, it's okey. thank you either ways.
No, it does not.
Great tutorial! But why are the js and css code inside .html file? why can we not create files of .css and .js extensions and link them to our main html file by using and tag?
I've watched many, many of your tutorials. So first off, thank you very much. Second, I am having an issues with separating the scripts into their own file. If I leave them in the scripts section at the bottom, all is well and good. When I move them to their own file, and do the include(Which is working just fine for my CSS) I get: " Uncaught SyntaxError: Unexpected token '
I assume you mean front end JavaScript only. Do you have script tags around your JS code? When you move it to a separate file you need to enclose the script in tags since it's in HTML file.
And make sure it's in html file, not a script file. Script files are for backend apps script only.
@@ExcelGoogleSheets Thank you for responding so soon! I did include the script tags, and it is an html file. I think the problem may be because I'm trying to use items that were passed to the page in scripts . Does that make sense, and if so, any recommendations on how to change my methods?
@@PeacefulEasyWheelin That would not work. include is a different function & HtmlService scope, your variables would not be available there. You should be able to modify include function to accept parameters and use createTemplateFromFile to accept those parameters. But I guess more important question is why do you use script tags within your front end JavaScript code?
@@ExcelGoogleSheets This is why sleep is essential when programming. Thanks for the confirmation. I spent the day rewriting everything that called the page params in the script. The world is now a happy place with all of the respective script files separated from their HTML counterparts.
great tutorial. keep it up bro.. how to get current logged user name.
can I use a Data validation in web page base on data in spreadsheet??
Thanks a lot. Do you have a video on how can we pass form data to global variables in Code.gs?
Thanks! now I know how to use multiple .html pages in Script Editor. Could you demostrate any example of case that uses two .gs page in script editor?
Multiple .gs files act as a single file. If your .gs file gets too large to manage you can simply open another one and work in it as if you were in the first one.
Hello,
I`m doing a password checking before doing the forms, but im having trouble when changing between html files.. how can I do it ? change from a html file to another after a password check. Thank you
nice and thanks,can we integrate google chat and google spreadsheet
Thanks!
Thank You!
Sir ji,
i am thinking that google sheet header according create a web app with dependant dropdown list
please create a script and html with prompt
I have been utilizing this playlist to build my first app but I keep getting error for the include function. As such it does not appear that my javascripts are loading to enable materialize features. I get the error "Exception: Bad value". When I click on link to identify the location of the error, the cursor is placed after "HtmlService.". I troubleshooting tips to suggest. Currently my form dropdown or modal window does not work.
As a troubleshooting step I created 2 function without passing variables to insert the css and js html files. In doing so I still have the odd behaviour. I did inspect element in the browser and see the data inserted so no issue there. Not sure why the features won't work. I did notice 2 errors and few warnings in the inspector. The warning were related to userCodeAppPanel.
Uncaught ReferenceError: options is not defined at HTMLDocument. (userCodeAppPanel:4:45)
Uncaught ReferenceError: options is not defined at HTMLDocument. (userCodeAppPanel:9:48)
hii..i need help..im making a web app that sent data to different sheet depending on which option from radio button they chose...it works but when the other radio button is chosen, the input box did not clear and js pop up doesnt work..please help
I am very begginer in coding and I have a doubt here. To combine stylesheet and javascript file in html we have used php inline code (example in line 5). So can't we use javascript code instead?
I have tried to write this code in script tag but didn't work.
Please reply it will be very helpful.
Try to watch part 1 through part 3 again. Part 3 should make it more clear.
Not sure if you'll be able to read this and respond but I am hoping that you do. After watching this video, I was wondering if there's a way to get the user data from the webapp into a Google Doc template instead of a Google Sheet?
How to create unique validation, so name only can be input once. Maybe you can create new tutorial.
Hi! Can you create like a product catalog web app? Like your inputs are from google sheet and then it also changes the info from the web app? Just like awesome table
Check out Userform Level 3 CRUD series.
@@ExcelGoogleSheets thank you for your reply man but what I meant is that... I would like to make an online shop and I found that you need to pay for website plugins (cost a lot)... what I'm trying to make is a product catalog in which it shows the list of products with names, images, descriptions, and hyperlinks and it could be filtered through categories, prices, and etc. Before I was using plugins from Awesome-tables but then I found out that there is a viewer limit if you don't purchase their plans... how Awesome-table works is that from spread sheet I list all the name of products, descriptions, prices, links of images, and links to the buy. And from that data it would magically turn into an app.
I was searching about this on how it works and you are the only perfectly doing it (almost the same) and I watched your videos but still the function I was looking for, I couldn't find it. Please can you help me.
Honestly, I don't think this is good for a full blown online shop. I'd suggest looking at Wordpress and Woocommerce as a solution.
Can anyone just explain differece between script tag and
@@ExcelGoogleSheets my code is not working. I did like the video but when i wrote it, it dind´t change colors (didn´t assume) what could be wrong?
Hi, I tried to copy the scripts but I can't tranfer the values to my ws... Then after hitting submit button, the page went blank... Pls help 😟... Thanks
I'm new in this subject and it's great,
trying to do the same as in your video,
I got Error message when I came min. 09:31;
TypeError : Cannot read property '****' of undefined at userInfo
How can i handle it?
Thanks
Hi bro, have you gotten the solution? I am having the same issue. Thank you
@@mINGzTH 😁😁 i just started over from the begining and now it's work 😁, but i don't know what the problem for the error.
@@mblothong Thank you so much, For my project, I change from object to 1-dimension array. It works like a charm.
Does this mean that everyone using this web app example can add data to the same google sheet? Or is there a new instance of the google sheet for each person that uses this web app example?
"Does this mean that everyone using this web app example can add data to the same google sheet?" Depends on how you deploy it. If you deploy to run as you and available to everyone, then yes.
Hi, this is good stuff. But is not working for me. Do I need to change some setting in my project?
Remove the ";" before ?>
Same prblm
@@golammusabbir914 not work
Great video! I have a question...How to pass variables to partial files? I can only send by the doGet() function
When you create the function to include partial, use createTemplateFromFile method. That will allow you to use scriptlets in the partial files.
That being said, it's probably best to find a better architectural solution and load the content with JavaScript. I never needed to pass variables to partials.
Thanks a lot for the help...excellent answer. In my case, I made a side menu and would switch between pages passing variables according to each page.
How if I want to format zipcode output to string in spreadsheet programatically Sir?
I add something to your code but it still didn't work:
userInfo.zip = document.getElementById("zip").value.toString();
The issue is appendRow() function. It automatically interprets anything that looks like a number as a number.
Thank's Sir...
I keep getting a Invalid or unexpected token error at the evaluate() line. What am I doing wrong?
Given the include function is in the code.gs, how come you can call it from html without doing google.script.run, as you do to call the userClicked function ?Thanks :)
I also wanna know too. Do you have the answer now?
@@KanYatKin unfortunately not, let’s see if the master sees this and answer the question
@@saderick52 somehow I seem to figure it out. google.script.run is used within the area, where javascript can be typed straightforward, while is used in the other parts in the html, where javascript cannot be typed straightforward.
@@KanYatKin I think that makes sense. Thanks for sharing !
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
yes, it will add a new row similar to Google Forms
@@ExcelGoogleSheets Thank you for your reply. Really appreciate it. Is there any way I can use the script and formula simultaneously?
Yea, you just have to make sure your formulas are not getting on the way of the script. So don't put your formulas in columns where data is being added.
@@ExcelGoogleSheets I have figure it out. Your video is really helpful. Thanks a million. You have no idea how much it helps me.
Thank you for nice tutorial, where can I get copy for this script?
Send me your email address I will send you
not working for me
function doGet(e){
return HtmlService.createTemplateFromFile('page').evaluate();
}
and it worked after removing ";" from ""
Boss How to append multi-row data in one click? please make a video on thereof !
I was able to use .getRawContent() and it worked
function doGet(e){
Logger.log(e.parameter);
return HtmlService.createHtmlOutputFromFile("page");
its not working for me, there is an error "TypeError: Cannot read property 'parameter' of undefined "
Please Help.
You are not supposed to manually run this function.
@@ExcelGoogleSheets Thank you Sir
Hi sir. My include is not working
same here
The makes disappear all my body content when i reload the page. Why is that? What did i do wrong?
maybe a mistake in your page-css file?
yeah usually u need to pay attention your css make sure u close the with
why my include not work??
same here
Brother, is showing as a string, not working properly, But why?
Make sure you use createTemplateFromFile method in your backend.
I get undefined from userInfo array, any ideas?
Having the same problem. Any answers?
Nicolas I also get undefined from userInfo array, any ideas?
bro, have you gotten a solution? I am having the same problem.
Sir ji,
Please rely to me this type possible web APP
I have replicated what u have done, but finally leaving it unfinished due to error. I have done the same but I get an Error and data are not posted to sheets. this ruined my entire day
Here is the code - just before splitting the file
Note: You have to look at executions (side menu) rather than the Execution Log in the new UI
V2 Mar 3 2022 20:00
file: page.html
.form-row {
margin-bottom:15px;
}
Hello World 6
First Name:
Last Name:
Application:
Google Sheets
Excel
Numbers
Run It!
document.getElementById("btn").addEventListener("click", doStuff);
function doStuff(){
// google.script.run.test1();
var userInfo = {};
// var uname = document.getElementById("fn").value;
userInfo.firstName=document.getElementById("fn").value;
userInfo.lastName= document.getElementById("ln").value;
userInfo.app= document.getElementById("app").value;
google.script.run.userClicked(userInfo);
document.getElementById("fn").value="";
document.getElementById("ln").value="";
document.getElementById("app").value="";
}
file: code.gs
function doGet(event) {
Logger.log(event.parameter);
return HtmlService.createHtmlOutputFromFile("page");
}
function userClicked(userInfo){
var url = "docs.google.com/spreadsheets/d/16p5vomoX_vVgMjVQkKfM6LH4HLY6lE8wcwEnlDuMJ50/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([userInfo.firstName, userInfo.lastName, userInfo.app, new Date()]);
}
Thank you
function afterAdd (){
var item = document.getElementById("item-name");
var qty = document.getElementById("qty-recieved");
var rowData = {item: item.value,qty: qty.value};
google.script.run.addNewRow(rowData);
}
var button = document.getElementById("add-item").addEventListener("click",afterAdd);
MY button does not work :-(
does anybody knows? why this problem (Uncaught SyntaxError: Unexpected token '.' )
code:
document.getElementById("btn").addEventListener("click",sendValueTosheet);
function sendValueTosheet(){
var passDataTovariable ={};
var passDataTovariable.userName = document.getElementById("user-name").value;
var passDataTovariable.password = document.getElementById("pass").value;
google.script.run.goData(passDataTovariable);
}
Great tutorial, but how would you avoid that the „include“ function would be called from another script, passing some other file names as parameters?
Having this would lead to access multiple other files on the GDrive and „printing“ its content.
It won't be able to print GDrive content because it's accessing files in the project only.
Add an underscore to the end of the function make and it will make it private function include_( ){ }. This way it won't be accessible with external calls.
Good question BTW.