Web App - Google Sheets - Form Example
Build a Web App in Google Sheets. We'll create a Form using Metro UI metroui.org.ua/intro.html and then connect it to Google Sheets as backend.
00:00:00 Google Sheets Web App Example
00:02:50 Google Web App Form with Metro UI
00:27.39 Send HTML Form Data to Google Sheets
00:43:22 Reset HTML Form
00:50:54 Confirmation Message
00:57:35 Web Form Validation
01:07:53 Add Progress/Loading Spinner
01:14:18 Populate Dropdown in Form Using Spreadsheet Data
#webapp #googlesheets
Пікірлер: 72
This video was very helpful and informative. I learned a lot from it and was able to create my own web app form using Google sheets. You explained everything clearly and patiently, and the Metro UI design was awesome. Thank you for sharing this amazing tutorial! 💖💖💖
Thanks great content.
Excellent as usual! I’m going to be making a scheduler project for a barber shop that will look super similar to this. I’m planning to feed the drop down with the available times that will update as other times get taken away by other users. The list of available times will remove those that have been taken for that day.
@getitdonetube
Жыл бұрын
Fantastic!
Great tutorial as always! Also, you can format the document with Shift+Option+F or right-click a blank spot in the code editor and select 'Format Document'
@getitdonetube
Жыл бұрын
Somehow those auto-formatters never worked for me, like for example beatify in vscode. I would have to probably grab one of them and modify them to the exact way I like things formatted in order to be satisfied with the results. This is just "me" problem though, I'm sure those tools work great for most people.
Hi I started learnt from you and now I have done 100s of projects including advance web apps and add-ons too Thanks man
@getitdonetube
Жыл бұрын
Great 👍
Thanks a lot
great.
Muchas gracias por su gran ayuda, que mi Dios lo bendiga 🙏 por siempre.
@getitdonetube
Жыл бұрын
👍
Thank you for sharing this
@getitdonetube
Жыл бұрын
👍
excellent i wish if you make more vedio about google sheet script
Fantastic video. Is there a way to make the results page of the Google sheet where you collect the data to display as a data table on the web. Maybe have them as a list of times and dates. Like a TV guide type list where the time would show in in increments of an hour each? Thanks
Thanks bro! I'm waiting for a way to display that data in webapps with tables
Hi sir Get_it Done! Thank you iit very clear and clean tutorial.. i have one request please make a tutorial regarding FILE INPUT to upload files direct to Google Drive. using Metro UI.. thank yoyu
👍
@getitdonetube
Жыл бұрын
👍
Hi. I've made a form following this example and it works just fine. Can you tell me how i can add an automatic ID for each record i get when i click the submit button? Thank you.
Hi. I have made one form using google sheets and metro ui and it works really nice. In the form i have 2 droplist fields: a worker name and its ID. This data is obtained through a google sheet named "workname". This sheet have 2 columns: one with worker name and other with its id. Its possible to add on the form the possibility to, when i select a name, the field for ID to be automatically filled with worker ID? Thank you for your help. Keep going with nice job!
Hi. I finished my form and its works just fine. I would like to use data stored in google sheet to deploy it in a datatable, to consult and search results. Can i do this two tasks in same google sheet and same script? I can i do it to after deploy diferent web pages? Is already any video that goes over this? Thank you.
Great! But I integrate the Choice file form is not working. Why?
How did you get the value of the Categories Select Menu with the option value being set?
Great video, not a programmer but able to recreate what I need with this!! I do have a problem I need help with. I am trying to create a button that will allow for multiple additional drop boxes to be created which will appear as a "Add Product" box. I also will need to be able to have this data submit to the google sheet. Can someone help me with this?
Awesome as usual. Thank you for this! One question: I have a similar "notes" field that is used as an email body. Any way to keep the line breaks inside my GS code? Thanks again, love your work. Learned so much from you! Keep it up!
@getitdonetube
Жыл бұрын
Line breaks should be included when you get the value from textarea. I assume how you later use that is the issue.
@lapneto
Жыл бұрын
@@getitdonetube Exactly. I put it into a variable, but all I get is a string that concatenates the line breaks... any thoughts? Thanks!
@getitdonetube
Жыл бұрын
If you're emailing HTML then you probably need to replace with
@getitdonetube
Жыл бұрын
something like this const htmlTextareaValue = textareaValue.replace(/(?: | | )/g, '')
@lapneto
Жыл бұрын
@@getitdonetube Worked like a charm! Thank you for this, much appreciated! Love your work!
Great tutorial! How can i make adependent dropdown with metro ui?
Howt to put upload file function in the form as well
Is this possible to show user picture with data by ID number?
Hi sir, how do I create a dependent drop-down? Like you share here.
How to create two independent groups of radio buttons?
Good day.. How about if instead of resetting the form, I want the user to be redirected to another site after Clicking the submit button? How would I do that?
Hi. I already finish myy app with multipages using this example and it just works fine. I want to deploy it to a google sites but it doesn´t allow to run it by security reasons. Can you show how we can deploy this exemple (multipages with buttons) on google sites? Another question is how can i make a donation? Thank you.
@nunomarques6106
Жыл бұрын
Help Please :)
thanks, can you help why the doesn't work for me. the {} are in Red
I have Google Apps Script Web App. Need a login function with Google means Google OAuth 2, authorised user will open app with app link & app ask to login with Google, dont want to give them sheets access
How could I add a favicon to my web app using an image from my google drive?
Thanx I need script for copying defind range from sheet 1 to paste in defind range in sheet 2 in every new blank row I am making weather date time data project from live feeding link
@netboy1102
Жыл бұрын
.getRange("").getValue() - sheet1 .getRange(sheet2.getLastRow(), 1).setValue() Something like that. If you have watched previous videos from the channel you should know how to do it
Hi. I completed my web app sucessfully. I just want to take away google banner on header. Can you help to do that in this example? Thank you.
@getitdonetube
Жыл бұрын
Try this kzread.info/dash/bejne/hH6ow6-DhM-4mKg.html
@nunomarques6106
Жыл бұрын
@@getitdonetube Hi. Thanks for your kindly answer. To apply this do i have to create render function? Since the code for dropdowns is a little bit diferent than this example, can you help me to apply it on this form? Thanks.
Can't connect to google sheet, why?
Please share your code, thank you.
@getitdonetube
Жыл бұрын
Code is available for Patrons
What's your donation link? Possibly PayPal
@getitdonetube
Жыл бұрын
www.paypal.com/donate/?hosted_button_id=SAH4HWG6M7G86 Thank You!
@boredomindex3353
Жыл бұрын
@@getitdonetube I learn a lot from you. I wish I could contribute more. Just a note: you should add the donation link to your video descriptions.
@boredomindex3353
Жыл бұрын
@@getitdonetube It says "donations to this recipient aren't supported in this country" ☹️
@getitdonetube
Жыл бұрын
I asked them to change some settings. Could you try again?
@boredomindex3353
Жыл бұрын
@@getitdonetube Sadly, it didn't work. Do you have any active classes I can buy?
Hello can you help me? I got 2 error in console: 1. Unchecked runtime.lastError: The message port closed before a response was received 2. Third-party cookie will be blocked. Learn more in the Issues tab And when I debug acceptData Function there is info undefined My code below
@mypulsatermurah-ys8qu
28 күн бұрын
const basokaForm = document.getElementById("basoka-form") basokaForm.addEventListener("submit",submitData) function submitData(e){ e.preventDefault() console.log("Form Anda Telah Terkirim") console.log(this) google.script.run.acceptData(this) }
@mypulsatermurah-ys8qu
28 күн бұрын
function doGet() { const htmlService = HtmlService.createTemplateFromFile("index") const html = htmlService.evaluate().addMetaTag("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no") return html } function acceptData(formData){ console.log(formData) }
Hi. I have finished my form with success. Now i want to add a button at right of "web form" to return to my home page. I already had the button but by some reason i am not abble to put "webform" on left and home button align to right. Here is the code: EPI Webform
Hi. I've followed your steps but when i reach reset form, it doen´t work for me and after click submit button form desapear and data doen't save on sheet. const epiForm = document.getElementById("epi-form") epiForm.addEventListener("submit",submitData) function submitData(e){ e.preventDefault() console.log("Form Submitted") console.log(this) google.script.run.withSuccessHandler(() => { epiForm.reset() }).withFailureHandler(() => { })collectData(this) } Can you help me to see whats wrong? Thanks
@getitdonetube
Жыл бұрын
.collectData(this)
@nunomarques6106
Жыл бұрын
@@getitdonetube Thank you
@netboy1102
Жыл бұрын
Dot dot dot
Getting SyntaxError: Unexpected identifier (line 8, file ”Code") const html = htmlService.evaluate().addMetaTag("viewport", "width=device-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=no")
@getitdonetube
Жыл бұрын
What's in your previous and next line?