COMPLETE CRUD WEB APPLICATION USING GOOGLE SHEETS
ฝัง
- เผยแพร่เมื่อ 27 ธ.ค. 2023
- 🚀 Excited to share a tutorial on creating a robust CRUD application using Google Sheets! 📊 Join me as we explore step-by-step how to leverage project records for a seamless user experience.
🌟 What to Expect:
Discover how to effortlessly create, read, update, and delete records with just a few clicks! I'll guide you through each operation, showcasing the power of Google Sheets for building functional applications.
🎨 Customization Galore:
Learn the art of customization! Dive into defining the table structure using a schema, tweaking app settings for a personalized touch, and refreshing sheets to keep everything up-to-date.
🔧 Tips and Tricks:
Uncover handy tips, such as utilizing reserved field names for automatic formatting - making your application dynamic and user-friendly.
🔄 Real-time Changes:
Witness the magic of real-time changes! Alter settings dynamically, choose different schemas, locales, and currencies, and see your application transform before your eyes.
🤓 Quick Recap:
In a nutshell, this tutorial offers a comprehensive guide to building a CRUD application in Google Sheets. Save your settings, customize to your heart's content, and happy coding!
🌐 Demo: script.google.com/macros/s/AK...
📊 Spreadsheet Link: docs.google.com/spreadsheets/...
📘 Vuetify Docs: vuetifyjs.com/en/components/t...
📚 Vue JS Docs: vuejs.org/guide/introduction....
📌 Google Apps Script Reference: developers.google.com/apps-sc...
🚀💻 #GoogleSheets #CRUDApplication #appsscript #webapp #googleappsscript #dataentry #macros
I want to express my sincere gratitude for sharing that incredible tutorial on how to create a CRUD. Your generosity in sharing your knowledge and expertise has been of great help to me. Thanks to your video, I was able to learn and apply the code effectively, and it has made a significant difference in my project.
I'm truly impressed by your dedication to the community and the way you share your programming skills in such a clear and understandable manner. Thank you for being a source of inspiration and for contributing to the growth of the developer community.
Your help has been invaluable, and I'm excited to continue learning from your content in the future!
Thank you once again!. 🙌
Thank you very much for your kind words. This will really motivate me in creating youtube tutorials😊
I want to extend my heartfelt appreciation for providing such an exceptional tutorial on creating a CRUD system. Your willingness to share your knowledge and expertise has truly benefited me. Thanks to your detailed guidance, I was able to grasp the concepts effectively and implement the code seamlessly, leading to significant improvements in my project.
Your commitment to the community and your ability to convey complex programming concepts in a clear and accessible manner are truly remarkable. You serve as an inspiration to aspiring developers and play a vital role in nurturing the growth of the developer community.
I cannot overstate the value of your assistance, and I eagerly look forward to learning more from your insightful content in the future. Once again, thank you immensely for your invaluable contribution!
Thanks tons! The best coding YT video I have seen to learn a particular coding skill.
Thank you very much for your kind words.😊
great tutorial!, just curious what voiceover effect do you use in your videos?
commendable knowledge and efforts! Highly appreciated
Thanks for your beautiful comments 😊
Amazing Tutorial and It's so nice that you have share the link of spreadsheet! thanks a loooooootttttttttttttt
Thanks for your lovely comments 😊. Hope it helps you 🙏
Thank you
love you a lot ....
I was so excited with the google sheet you shared in the description. It helped me a lot to improve my works. Thanks a lot for the customisable and ready made G Sheet.
My pleasure 😊
Could you add hyperlinked text also in the schema.
great.
thanks👍
Great work and extremely efficient videos. I am not an expert in all of these stuff but I have some knowledge that allowed me to understand your videos to some good extent. I will wait for a separate video dealing with google calendars with dates and time objects. Thank you once again.
Thank you very much 🙏. I have noted your video recommendation.
nice1.. very clean... thank you..
Thank you very much 😊
great video dear, thanks
So nice of you
Thanks! Great!
Glad you liked it!
this is just great thanks for sharing this CRUD, but im wonder if this with this code we can add more than one crud at the time for example if a want to use the project y one webapp and another one in the same webapp at the time
You are the best. the most exciting tutorial and well explained . Your are too generous to share the code so we can follow and understand how the code works. Thanks a lot
Thank you so much 😀. Your comments have made my day.
Absolytely Amazing ! thak you so much
Thanks for your lovely comments 🙏😊
Congratulation for your big work! Is it possible to set some coloums as not editable but read only, without the buttons “add new item” and “delete”?
O trabalho que postou foi de longe o melhor que encontrei até agora em formulário HTML, parabens! A amabilidade de deixar o ficheiro para ver e editar o código, e entender o que cada parte do script é responsável... fantástico. Já conseguiu um novo seguidor 😅
After translating it I found it's highly motivating and encouraging one. Thank you very much.
It's awesome to look how it works. Can I find the code anywhere?
Thank You So Much for this wonderful video. Can you also show us how to add a download button in Web App so that data can be downloaded in real-time in excel and csv format.
How clearly the tutorial explains ... thanks
Glad it was helpful!
👍👍👍
Amazing video! you have win a new suscriber!
Yay! Thank you!
This is really great! Thank you! If I like to have two different tables (schemas) in my Web App, what I have to do? If I understood you right, then I only have to insert a second line in the "App Settings"-Sheet with corresponding Schema? First line with idColumn =1 and second line with idColumn = 2?
Thank you very much!
I really liked your idea. But this version allows you to view only one table at a time. You can only toggle between different tables and related schemas in the App settings. You cannot add more rows to it in the Settings tab.
But your idea is great. Maybe in future I will extend this as per your idea and mark it Part-2.
You can contact me by email if you need customized solution.
Thanks For Your Code
Thank you! I hope you will find it useful.
Great video. Thanks.
Glad you liked it!
This looks amazing! One question, so my sheet has around 42 columns and 5000 rows (Columns is fixed, rows is generally between 4000 - 5000)
Do you think if I apply this fix, it would run very slow?
Thanks so much, truly impressive work, including Search feature. Any way the web results would fit into iPhone screen, e.g. see all the columns on horizontal scrolling (instead of see the whole page on small screen)? I can figure some things out but I'm not a programmer, chatGPT didn't help much and I don't have knowledge to modify bunch of code.
I can understand your issue. I am including that in the list of features that will be added in the next version of this project.
Thank you.. how to add upload file questions
Thanks for sharing. I might had missed it, but does the server side code is available as well?
Yes it does
This was great. Would there be a way to have some fields appear on the page, but more fields when the edit button is selected?
It's possible. But it would require lots of coding changes in the current project. If you have experience in frontend coding then you can do that.
Can I make a whole school management system following this tutorial? I mean can I make it using 1 spreadsheet or multiple yet connected somehow. Thank you so much.
i want add one more column for current date and time whenever a new entry is add or old entry is edit ,how is it done ? please give solution .
Hi. Nice work. Is possible to have the list with scroll instead of paging? And it´s possible to add bottons to print, save to pdf and excel? thanks for help.
Yes. You can do that easily. Refer the docs for the table provided in the description. For PDF printing - you need to do some further development.
Thank for sharing. I have 1 question, Can I add more columns.
Yes. Just make sure to add those col name in scheme also.
Hi I am impressed with can you add login and logout system for the same sheet.
It would be a lot to do for the short video. You can contact me for customized solution.
surprising sharing, how do you add a column with a formula and the results are displayed without error and if you add key = email, label =?? and must be entered with a valid email
You are my favorite person on the planet
Thanks for this beautiful comment.
I've been looking for a sheet like this!😊
Is it possible to add the function to search by label❓
Yes. I have planned this in the next version of this project.
Hello, greetings.
I'm looking for videos that explain how I can create a logging system, that is, I need that when a user with access to the spreadsheet as an editor makes some insertion, change or even deletes a cell from a specific range of a given tab, this information is written in another tab called: "Logs" where ifnrome the date and time of the event, the user's email and what the status of the action was, whether the content was deleted, inserted or changed.
Is there any way you can help me with this?
after i'm deloy, it's blank page.
excution log not show any problem.
this need any api or something >?
@tech-lever I am learning Vuejs and your spreadsheet app helps me lot with it. Something funky seems to go on with the date field. When I add a new item, the spreadsheet shows the right date but the webapp shows one day less. For instance, if i set the date to 20 Feb for an item, the spreadsheets shows that but the item in webapp shows 19 Feb. I have been trying to figure it out but to no avail. Do you have pointers for me?
Also, every time an item is edited, the date seems to get down by one. This seems to happen even your demo link. Is it because of the difference in locale?
Check the set locale in your spreadsheet. It should be set to your country. You can do so in the Spreadsheet settings. If still facing the issues then check the buefy docs for the date field and look for locale and then edit the same in the html file. Hope it helps.
Hi! I really appreciate you making this one. I have one question though, how i can make the font weight of the table header? I have tried my best to change it but unable to do it hope you can reply to my query.
Yes you can!. I will try to take out some time to modify it.
@@tech-lever i will really appreciate it, to be honest i am modifying your CRUD tool, to have a timestamp when you add and edit but having difficulties doing so as well as auto populating the email used to access it and record it
I am having a issue regarding Reset form funtion. i have realized that sometimes when i insert a new record or edit a existent one, the reset form funtion doesn´t work and data from previous record still on form. Does someone had this issue? How do you solve it? Thank You.
Hi I have a particular request, I have a web app code made with html css and vanilla js I've got everything working but unable to send the request to update the sheet I was wondering if I could provide you with my web app source code could you help me get it linked and working with Google sheet
Excellent and will be great if you could add authentication functionality. How could we exposed sensitive data to others😱
You can generate dev link which can be opened by persons with whom you shared the file. No other person can open the link.
Incredibile video... ❤❤❤
Instead of changing setting, can i have two html pages, one for project and another for employe details
Yes. But it would be difficult in this project. But you can do that if you are experienced frontend developer. I will try to do another part of this video that will extend this project and serve your purpose.
Sorry but when i clicked on spreadsheet link I am getting sheet with view only options, So i am not able to use as per my need
How could you avoid any random user with the link to edit the database?
How can i change table to scroll instead fo paging? how can i setup height to be auto, adjusting to screen. I used fixed.screen funtions and a height of 600px to test and it worked fine. But in smaller screens its a mess. Thank you for help
Instead of pixels do it in terms of vh. Like 0.8vh will be equal to 80 percent of Viewport Height. That way it will become independent of resolution.
To remove pagination refer table section of vuetify docs. You will have to use fixed header and remove pagination attribute. Please refer docs.
@@tech-lever Hi. Sorry to bother again but i am not finding where is added the pagination atribute. The viewport is working. Is possible to add sums at the bottom of a column, like in datatables? Thank you so much for you help. Best regards
Hi, I am gonna have a few columns of that will have formula to calculate certain data from other columns. I want them to show up on the web app, but not editable. Is it possible to make it that way? Which part of the code should i tweak?
Possible. I have got this in another slightly bigger project. Lets see If I can do codewalk through for that project.
@@tech-lever that's great! I will wait. One more question, is it also possible to make "dependent drop down list" that will refer to another dropdown?
So the goal is to make my employees to be able to choose variants (in the 2nd dropdown) based on selected products (from the 1st dropdown).
@@muhammadzazulirizki1000 My next video that I will post within 2 days is featuring dependent dropdowns. You can use that concept.
@@tech-lever subscribed!
@@tech-lever Hi, is it is published, what is the name of the video featuring dependent dropdowns? thank you!
can i use react js?
Definitely.
Anyone know how to put a password verification on the delete button?
So after the yes/no comfirmation window it shows another window where u have to input the correct password to proceed with the delete.
It's to prevent people urge to delete everything lol.
Also how to make the rating system works instead of fixed values?
Really nice template but Im not familiar with coding and vuetify to do these things.
Thanks for making and sharing this. Does anyone know how to change the default view to 25 "Items Per Page"? The page defaults to 10 Items.
Figured it out. Inserted ':items-per-page="25" ' in v-data-table before :headers
I updated mine to work as a purchase order input form. Is there anyway to have the script automatically populate the next available number when a new item is entered?
Hi, I have updated the code. You can see the ID column now. Line number 94 and 95 is responsible for adding ID column. You can comment it out If you don't like the ID column.
@@tech-lever That worked great, but my Id's are in 24-0001, 24-002 etc format. How can I get it to follow the 24-****
@@tech-lever Never mind i figured it out :)
Thank you so much, really amazing, but i have i problem, when i edit the item in the web, it become double item with the new information that i add to it, how i can solve this, please help me🙏
Then it's a bug. I will check it and fix it. Thanks for bringing this up.
@@tech-leverdont worry sir, i have been figure it out, i make a mistake, i add new data without ID number, so when i edit it, it get double,so your code is fine, 🙏👍👌👌
Firstly, thank you for sharing the project. I'm encountering an issue: when I input time data [hh:mm] in the web app, it displays something like this 1899-12-30T00:38:50.000Z. Would you be so kind as to point me in the right direction for time formatting? Thanks again
I have not handled Time input. I will update it so that it is able to handle time input correctly. Come in 1 or 2 day so and check in the description.
@@tech-lever Greatly Appreciated
@@tech-leverthank you sir, I also have same time format issue. Have you update it?
Do you have project on github?
You can get the code by making a copy of the Spreadsheet form the link in the description.
I watched your video and the demo web page. In Demo, I'm trying field validation. When I create a new item, I leave all fields empty. Even if all the fields are empty, I am able to click the "Save" button. Is this normal? I thought field validation was preventing me from saving. Can you explain to me how field validation and required column in the sheet work ?
You are right. It should prohibit form submission. But its easy fix I will do that.
@@tech-lever Waiting for you to fix this validation and required attribute issue. And many thanks for you patience and time.
What is the usage of 'Data Entry Sheet' and 'Schema Sheet' inside App settings ? don't get it.
It's like you have multiple pairs of data entry sheet and it's corresponding schema sheet in the Same spreadsheet. And then you can choose them in the settings tab. Please watch it one more time.
Thanks for taking interest in my video. 😊
@@tech-lever appreciate the effort you took to make this video. but for the time being its way beyond my pay grade. i only want a read only template with google sheets as the database, looking through your backend and index html, i have a really hard time figuring out which functions to remove. looks like i still have a lot to learn before i can understand this. but thanks for the info you're putting out there. Keep it coming !
source file?
I was wondering if you could let me know what I am doing wrong. Everything is working great but the date. When a new item is entered the date is showing two days prior. ex if 1/23/24 is entered it shows up 1/21/24, but on the google sheets back end it is 2024-01-23
It has to do with locale. I will send you the fixes. Remind me in few days...
@@tech-lever Reminder 😀
@Kelly-hm4zg - In your copy of the spreadsheet, go to File, Settings and change time zone to your time zone. Also, all the populated time fields in the spreadsheet will hold the previous GMT+5:30. Delete those fields or delete the entire column (s) and make ones as needed and Save Settings in the App Preferences sheet.
@@RameshOrlandoThanks, that fixed it! I had the same issue, almost gave up on the entire project as correct date is important in my data
Dear sir please kindly give me the script.
Can you be hired to build this out into a bigger platform?
Yes. I am a freelancer by profession. I generally build much bigger tools. Here I put out smaller versions.
@@tech-leverhow can I contact you?
Email Id in the about section
pls improve to be responsive app ..thx
Sure. Will try to get time for that.
@@tech-lever .addMetaTag('viewport','width=device-width , initial-scale=1') and the others vuetify params like expand, think ur more easy to do this. adding multi select also often used by visitor like me. example integrating with jquery amsifySuggestags, thanks for beautifull and flexible coding..❤❤
Hi its amazing tutorial thank you so much dear
just want your kind help in how to change web app direction from right to left i have tried this cod but it doesn't work
...
...
Sorry. I don't understand your requirements. Please elaborate more...
@@tech-lever I mean how to align app from right to left this cod but it doesn't work
...
...
Highly appreciated your help
@@tech-lever How do I flip rows on app from right to left?
I want to extend my heartfelt appreciation for providing such an exceptional tutorial on creating a CRUD system. Your willingness to share your knowledge and expertise has truly benefited me. Thanks to your detailed guidance, I was able to grasp the concepts effectively and implement the code seamlessly, leading to significant improvements in my project.
Your commitment to the community and your ability to convey complex programming concepts in a clear and accessible manner are truly remarkable. You serve as an inspiration to aspiring developers and play a vital role in nurturing the growth of the developer community.
I cannot overstate the value of your assistance, and I eagerly look forward to learning more from your insightful content in the future. Once again, thank you immensely for your invaluable contribution!
Thank you very much for you kind appreciation. You made my day. 😊