Hello sir. We have competed all levels. I want you to teach us further the following, 1. Creating unique ID for each entry. 2. Recall an entry using ID and edit/delete the same. 3. Multiple items input Button before submit. 4. Creating tables using ID. Like PHP Your hard awaited fan...
Yesterday I was trying to understand a procedure similar to the one you show in this video, but made with html, css and java script. Comparing both, the one you submit far exceeds the one that I comment. Anyway, the basis for understanding both is, java script. Without a doubt Google offers us great tools to develop applications. I thank you for what you share with me, that although I understand it in a slow way, I know that I can understand it as long as I practice it. 😇
Great tutorials.. excellent explanation.. seems as easy as a piece of a cake while you explain.. (not as simple when implementing though). I have Watched all 13 videos and have a feeling that this is only a tip of iceberg and you would help us go even deeper.. looking forward.. big thanks.
Thank you so much. I have 2 table in the same page and both are loading datas from 2 different big databases. Can you make a video explaining how to load the datas at the same time without blocking the web app and creating some progress bar or a loading image with materializecss? Thank you so much, you're the best teacher
4 года назад
Add a spinner element to your app. Hide it by default. Set display to block in your "run" function, and set display to none in your "withSuccessHandler" function. Easy.
I did a mind-blowingly silly mistake which took almost 2 hours of debugging. I used the name "table-data" instead of "data" for the global var array in the table-js file. Any variable name with a minus sign does not work in Java-script, I painfully learned. WOW!!!
Fairly new to Googlesheets - have used HTML and ASP for awhile but what would be nice is if one could get all the code to the project so a viewer can really follow along. Works well if /or when you don't show all the code for a function or the HTML coding. Otherwise good job.
I would love to see a tutorial that uses the entered data to populate a vertical table BEFORE it is submitted to Sheets, so that users can confirm the data before it is sent to Sheets. For now i will experiment and hope the training so far is enough to get me to that result. Also, after the submission to then be redirected again to a “thank you for your submission” page.
How can we set background colour of a table cell in this code? Your video series is amazing. I learned so many new things. I'm QA Eng. but after watching these videos I feel like changing my career to dev track. 😎
You are awesome .. Thanks for the videos. I need to do a kinda pagination, on the "Next" button click, the table on webpage should get next set of data from spreadsheet. And I was able to build that logic, only problem is it does not display on screen until I "Manually" reload the page. What's the right way to get next set of data display from spreadsheet? Could you please help ?
First I just want to thank you for these great videos. I've been following along with a bit variation: I created a page that has entry fields, submission button and table that gets refreshed and shows the new entry after the submission button is clicked. I am running into an issue of an delay between writing data and displaying data on the page. The data got written into google sheet, but it takes time for google sheet to save data before the display function can pull it and display on the page. The display function is unable to pull the newly submitted entries. I tried to solve this problem by using SetTimeOut function to give the display function 5 seconds before pulling the data, but it's not an elegant solution as I have no way to tell how long it takes for the data to flow to the goolge sheet. Is there a way we can check the status of data write before pulling the data so we can make the display function dependent on whether the data write is complete?
Is it possible to edit the data in the html table and save it back to the source file? Is there an event handler to detect user click on the html table to identify the clicked location and somehow use that information to allow editing on the corresponding row?
@@carljacobs8863 Hello, I just noticed your question. I did not get an answer but I have done some testing in order to see if the idea works. In short, I added the click event to all the cells in the table. I did this in JavaScript by selecting all the cell via their class or html element. That way, you can then implement any functionality you want on the click event. However, you still need to solve the next part of the process, i.e. save the changes back to the source file. We can carry on this conversation via email if you need more details.
I am doing something similar, inputting data on an html table, that writes data back to the source data, then be able to filter the data on a different web page for reports off that data…any solutions for the writing back to the source data?
Hola, Muchas gracias por todo el materiar que has subido. Me gustaria saber si en algun momento vas a enseñar como consultar y editar los datos en estan en las hojas de calculo. Traduccion: Hello, Thank you very much for all the material that you have uploaded. I would like to know if at some point you are going to teach how to consult and edit the data in the spreadsheets.
Hi! Your videos have been so helpful! Thank you for sharing what you know with us! I created an app where each user can put in multiple entries as a tracker and I want to have an option for the user to view all their entries for the day. Can you help with that or do you already have a video that covers that? Would really appreciate the help! Thank you!!
Great job. Can we add search box then display result data in the same way. I mean display search result only not the whole data. I hope you got my point.
How to use this table with bootstrap datatables library (i try but "no data available in table" appear in the table.) To sort, filtred, pagination the table.
Great videos Thumbs UP! Can you lead me in the right way to refresh the data in the table as the table data changes. Or how to refresh the page or reload the page when the data changes and it reloads the table.
Hi! Amazing video, I just want to ask that, is there a way, that when you add some more info in the Spreadsheet, it will automatially refresh the page?
You could set a timer to automatically reload the table every x seconds, but it would count against your daily quota, therefore not something I'd suggest doing.
@@ExcelGoogleSheets Saludos, tus videos son de gran ayuda, habría alguna forma de que pudiera tener más información sobre estos y otros tutoriales. Como podría contactarte? Muchas Gracias!
Thanks for the video. I was wondering, how to append a new table row data just inserted into the html with createElement as shown in your course. Is it possible to do insert last row into html table without page refresh?
Thank you for this, now I have a basic idea on how to do this, but is there a more visual(WYSIWYG) approach to this? Coming from visual basic 6 two decades ago and not coding for a long time, HTML and scripts are hard for me... Is there anything like Dreamweaver that can do this? thanks...
Thank you this series is awesome. I do have a question though, since you are repeating steps to fill the table data in rows, how could you loop that, especially if you have more than 3 columns?
Hai sir! Is it possible to create a forth colm as a editable text box worked directly with spread sheet with or without buttons. If it possible could u place a video of tat. So tat it may be helpful to all.
nice video! 2 thumbs up! I learn a lot from you and I really love your tutorials! Is that okay to make a video on how to attach a file that can upload into google drive?
Hi. I have got great help from your videos. One question about this video. I've got the result successfully in my web app according to this video, but found that the result of query is not shown in the web app. The data is shown in Log, but not in the web app table. Do you know how to deal with it?
This is solved. I have looked through the comments down there and found that it was date value problem. getDisplayValues() was a quick solution. Thanks.
Hi! Again here watching one more time this video. I'm triying to sort this dinamic table for any column. I could solve it having sheet sorted but what if i want to sort only at the front end at the app script, do you have some video where i can learn it? Thank as always, i follow you on your 2 channels! Learn a lot
Here is an easy solution ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uhP_pO0CYfI.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QAt2RfosxVQ.html
Hi @Learn Google Spreadsheets, thanks your tutorials so much. i have a question: if i have a column (col1) in Table what date type. i used: col1.textContent can not run. Can you help me this problem! thanks
Could you please help me with a question? I'm having trouble generating the table when I include the date column. Is there a way to include the date in the table?
Hi. Your tutorials are amazing. I have a problem. I want to make a html table from data in a Spreadsheet, but the amount of data is flexible. For example: One time it could be 1 col + 6 rows and at another time 4 col + 20 rows. Could you help me with that? Greetings Felix
How can you make the addition of rows and/or columns more dynamic? Instead of manually adding the following to the function: var col1 = document.createElement("td"); col1.textContent = r[0]; row.appendChild(col1);
Might be a little late for this response but though it might help others: I achieved this by including a for loop containing the col1, col1.textContent, and row.append statements. This is my final code: dataArray.forEach(function(r) { var row = document.createElement("tr"); for (var i = 0; i < r.length; i++) { var col = document.createElement("td"); col.textContent = r[i]; row.appendChild(col); } tbody.appendChild(row); }); Hopefully this is helpful!
Hi sir, thanks for useful content) Why did you solve this goal through the DOM-manipulations? It would not be easier and more efficient to use such a construction - , like in PHP style?
Maybe. DOM manipulation allows you to improve user experience and later add things like "loading..." animation or something like that for the user if you have a large table. If you try to load that in the template side the page would have to wait until it's done getting data from the spreadsheet and then load the page, which could sometimes take a long time. In addition this will also allow us to later call the same function to update the table if data changes.
Is there a way in which Google Sheets can make the user input the name every time they enter, save the name in a variable, and then export that variable somewhere? I want to be able to see who entered the Spreadsheet at the end of each day.
Thanks for the videos.. They are really excellent!! I have one query/issue - If the data array has text elements with " ", they are being rendered in the table. Else they entire table is not being rendered at all. I am not understanding what I am missing here.. Can you please help? I have even checked the Logger where data is coming similar to what you show, i.e, without quotes
Hi when generating the element with .foreach , the element generated with class that uses materializecss(example .materialboxed) zoom stopped working. It works fine if i am not using the foreach function. do you know why?
@@ExcelGoogleSheets Thanks for your reply. I created an HTML table that is populated from a spreadsheet data and when I doubleclick on any row it opens a modal (Materialize). In this modal I created a button to cancel (close) the modal. But I can't find a way to make this button close the modal. Did you experienced any time this same issue? May I post the souce code in this comment? I expect my code could help someone and someone could help me too.
Hello, is it possible to implement a system of authorization and registration of users on GAS? Suppose, a user tries to open the main page, if the user is authorized, the main page opens, else the authorization page opens. How to check if the user is authorized? Session, cookies? Thanks
Also will not display query data either. ???? Does display ={} data though..... So any filtered data must come from different sheet... Any fix to this?
Hi, how are you testing without deployment as a webapp. Even it do not get effect without it. Will you please explain it ? Thank you for uploading good stuff.
High sir ,how is your whole family doing? I wish all the best thing from the almighty to you and yours.... error message showed up at the console.. Uncaught TypeError: Cannot read property 'appendChild' of null at HTMLDocument. What should I probably do,great master!!!
Thanks ☺️👍 a lot, I tried to replicate the code to make HTML table from Google sheet, but somewhere I made mistake in table-js, I'm getting sheet data on log, but HTML page doesn't shoes the table contents except thead. Please help me to fix it.
Thank you!!!..i love your app google vídeos. My question is there a way to automatically upload data from excel book yo google sheet, so it could easily be showen from an app script published at web? Thank you axiañ from Argentina
It depends on what you mean by "automatically". I would say it's possible, but it's not something you'd do with apps scripts. You would either use VBA, NodeJS, Python or something like that to do this. I have a video coming with NodeJS that should give you some idea how this is done, but it's not simple if you're not a programmer.
Two questions. (1) I have time values on my google sheet that when formatted as time won't display in the table unless I set the formatting to automatic. When set to automatic the table displays values as a decimal and not a time, is there a fix for this? (2) One of the columns in my table contains URLs, is there a way for them to be clickable when transferring to an HTML table?
Well, one easy way is to use getDisplayValues instead of getValues. The other way is kind of complicated and requires for you to understand how to work with dates and times in both spreadsheets and javascript. For clickable links you'll need to use HTML a tag with href attribute.
Could you provide these files that you're making? I can get the table to populate when typing the contents directly into the table body, but can't get anything to populate through the table-js page. I've started from scratch so many times and still don't know what I'm missing. Thanks for the videos too!
Haha. I found my mistake! In the data variable at 10:00, I never separated the arrays by commas. That stopped everything else in the page from loading i guess.
i wanna do this same tutorial but adding the table to an dialog instead, i managed to work it till the table with manual data, but when i try to call from another spreadsheets it wont work, any idea?
Dear Sir, thanks for your video. i learned a lot from this series. may i ask a question? why it cannot append the column into table? sorry for this kind of question. It tooks me several hours but I still cannot find the bug. could you please give me a hand? thank you very much. Here is my code.
.html year name number document.addEventListener('DOMContentLoaded', function() { var tbody = document.getElementById("sortTable"); var row = document.createElement("tr"); var col1 = document.createElment("td"); col1.textContent = "apple"; row.appendChild(col1); // col inside the row tbody.appendChild(row); }); //END addEventListener
.main function function include(filename) { return HtmlService.createHtmlOutputFromFile(filename).getContent(); } //END function include function doGet(){ return HtmlService.createHtmlOutputFromFile("testUi"); }
Excellent video! But I need some help.... I want to create an HTML page that updates ITSELF with data from a spreadsheet, so if I modify a cell in the spreadsheet, that modification will appear in the html page like in "real time", without refreshing the page by myself. I hope you or someone on the comments could help me with that. Thanks
@@chapinkonce217 well, I guess so. What I did is that I call a function that calls itself every "t" miliseconds. So, the function does something (refresh the page) and then calls itself, so it refreshes the page again and again every "t" miliseconds. I've seen a lot of people doing this on the internet, here is a link to one explanation but there is a lot of the same: www.geeksforgeeks.org/how-to-automatic-refresh-a-web-page-in-fixed-time/ Hope this helps you! Good luck
Excellent video. Can somebody help me? When I write the spreadsheet it shows me the html well but when I read an already written sheet (it already comes with data and I don't write) it doesn't show me anything. However, in the records it correctly brings me the information :(
I am unable to pass data to my table. It may be due to the type of information that I am passing, I really have no idea this is all new to me. My table information on my spreadsheet is generated from a =FILTER function and it is 6 columns wide. The contents are of the following types (1)date, (2)time, (3)time, (4)text, (5)text, (6)hyperlink. Any help would be greatly appreciated.
@@ExcelGoogleSheets Thank you for the advice. Your tutorials are awesome. I watched the video you linked above but I don't think that is quite the problem I'm having. When I use a spreadsheet with data entered by a user I don't have any problems displaying it on the web app. The issue I'm having is that because the data I'm drawing from is generated by the =FILTER function Logger.log brings back the data I want except it is trailed by a bunch of empty values like this: [, , , , , ], [, , , , , ], [, , , , , ], [, , , , , ], [, , , , , ], [, , , , , ], [, , , , , ], [, , , , , ], [, , , , , ]]. I think that is what is stopping the Html table from displaying the desired values. I hope this makes sense, forgive me if I sound unintelligent.
@@ExcelGoogleSheets I am also trying to make images render in the dynamic table, but failing. Here's what I've done: 1) In the generate table script, I change the data type in the column where I want the images to render to "col2.htmlContent = r[1] . 2) The content of the sheets table array second position has text like this: . The links work fine if pasted into browser address bar, and the html will render in the page head, so I'm thinking I have a js problem.. I've stored all images on an accessible server I keep at Dreamhost. Was hoping the html would just render the corresponding image in the table, but the "image" column is just empty.
@@carringtonwilliams1947 sorry - not col2.htmlContent, actually col2.innerHtml = r[1]; is Materialize blocking html from rendering or do I have issues in my script code?
Sir in whole web app series you teach everything but you don't teach how to hidee elements like textbox based on drop-down or radio button, please give me two line code, I am in very big problem, please sir help.
