COMPLETE CRUD WEB APPLICATION USING GOOGLE SHEETS
Вставка
- Опубліковано 6 вер 2024
- 🚀 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....
📊 Spreadsheet Link: docs.google.co...
******* Support me by buying this with Whatsapp Support just for 10 USD *****
pritamsharma.g...
***********************************************************************************
***************************
✨ Buy this Advanced version for only $9! ✨
It features:
📄 Multi Page Apps
📁 File Uploads
🔽 Dynamic Dropdown
🔗 Dependent and Computed Fields
🖼️ Formatting support for Image, Avatar
➕ Additional fields like Time, Number/Currency, Image
Purchase Link: pritamsharma.g...
• Google Sheets | Multi ...
***************************
☕️😊 Buy me a coffee! ☕️💖
buymeacoffee.c...
paypal.me/prit...
-------------------------------------------------------------------
Contact Me : 919624701102
📘 Vuetify Docs: vuetifyjs.com/...
📚 Vue JS Docs: vuejs.org/guid...
📌 Google Apps Script Reference: developers.goo...
🚀💻 #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😊
if you want to have a dynamic list of values in a dropdown, that gets dynamically updated when new rows are added to a table that its key serves as the foreign key, do as follows: a) define the sheet as a table b) define a NameRange on the column in that sheet c) in the Options column in the Schema sheet for the table that has a foreign key to another table, set the Options value to "=join(",",NameRange)", where NameRange is the name you defined for in the referenced table
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. 😊
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.
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 🙏
Excellent tutorial. How to prevent users of web app from editing certain fields.pls help me.
For whatsapp support you will have to buy this template. Then I can help you with that.
@@tech-lever Thank you for replying. What is the cost of template.
@@ramreddymogiligari Rs 850
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.
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.
how about allowing specific users/emails to edit certain sections like the approval section and restricting others from editing that section
Please contact me for further customization.
This is incredible solution.
Thank you very much.
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?
Thank you for sharing your work! I have a formula in several columns in the data sheet and want it to display only in the web application. but every time i tried to edit a record in the web app it causes the formula to disappear in the sheet. Can you help me with this one please?
You can reach out to me using my contact detail given in the description box.
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.
Hi,
Is it completely free or does it have any Read/Write limitations?
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.
Hi sir, thumbs to this generous piece of work that you’ve made, however just wanted to ask is there an option where it can add restrictions in editing like putting password to edit
Thank you for your sharing!
commendable knowledge and efforts! Highly appreciated
Thanks for your beautiful 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”?
Amazing video! you have win a new suscriber!
Yay! Thank you!
hello there are still things that I have a lot of difficulty understanding, are you using the API connector extension
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
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.
It's awesome to look how it works. Can I find the code anywhere?
Is it possible to read records from the primary spreadsheet but write a new record to a secondary spreadsheet.
Not in this project. I can customize it for you.
Reach out to me using contact details given in the description box.
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
But, how many times does the appscript work per day
How clearly the tutorial explains ... thanks
Glad it was helpful!
May you share your email so I can send you a proposal.
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.
great tutorial!, just curious what voiceover effect do you use in your videos?
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 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.
Thanks tons! The best coding YT video I have seen to learn a particular coding skill.
Thank you very much for your kind words.😊
after i'm deloy, it's blank page.
excution log not show any problem.
this need any api or something >?
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?
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.
tanks sir . but when am finish deply and open url it say (Sorry! You are not authorized to view this web application.)
can you help me
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.
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
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.
Hi, can you make a tutorial for medical record for patients or database. Thanks
this is some great stuff. i am fairly new to this type of coding so was wondering if there is an option to only show certain key items from projectschema tab on the New Item form but still show them all in the web app itself?
any help would be greatly appreciated
Yes. Its minor modification and it would cost you 15 USD. Whatsapp me. You will find my number in the About me section. OR you can email me.
Thanks! Great!
Glad you liked it!
Thanks for sharing. I might had missed it, but does the server side code is available as well?
Yes it does
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 .
🎉🎉🎉🎉wow nice
Thank you very much for watching. Please share my content. Will be very helpful for new creator like me.
This is amazing! Thanks a lot! Can there be a upload option to upload a file insted of a link upload
Thanks. Explore my other videos. There you will find the upload features.
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.
I have a question, everytime i insert/delete a form does it affect on the google service quota ? Like what is the limit can i submit or delete a form?
There is a quota limit but I have never hit it although I use it pretty much throughout the day.
Great video. Thanks.
Glad you liked it!
@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.
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.
Where can I get the code?
Thank you so much 😎😎😎
Thanks for watching😊
Absolytely Amazing ! thak you so much
Thanks for your lovely comments 🙏😊
nice1.. very clean... thank you..
Thank you very much 😊
How could you avoid any random user with the link to edit the database?
Thank for sharing. I have 1 question, Can I add more columns.
Yes. Just make sure to add those col name in scheme also.
help me , BAD CODE I CAN EXECUTE IT
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 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.
THANKYOU
Thank you.. how to add upload file questions
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
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.
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.
Thank you
does it support a login and multi user?
Sorry. No.
thanks👍
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
great.
great video dear, thanks
So nice of you
Please reply me want to custom something
@masoomiyat99
Instagram
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.
Thanks For Your Code
Thank you! I hope you will find it useful.
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
Can we use on excel?
No
👍👍👍
hello Can you help me understand if my ideas are feasible?
Please reach out to me using the contact information given in the description box.
@@tech-lever hello, do you know api connector?
do you use AI for coding?
can I find "templates" ?
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, 🙏👍👌👌
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 !
Do you have project on github?
You can get the code by making a copy of the Spreadsheet form the link in the description.
Is there anyway to make it responsive?
Yes. If you have got experience in CSS, styling then you can make it responsive. Check out the Vuetify Docs.
@@tech-lever I have but very minor, just the syntax and CSS understanding. But everything that needs to be changed is only the CSS right?
@@InternetHub13 But that will be difficult to implement. I am also not the CSS expert. But responsiveness is handled by CSS only.
source file?
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?
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
Did it work out for you?
@@riwayateishq I already have the form ready but I was unable to send requests to the Google sheet
Would you mind to share the source code..?
Link in the description. And please watch it full to know the instructions.
can i use react js?
Definitely.
Невероятно круто
Thank you very much😊
You are my favorite person on the planet
Thanks for this beautiful comment.
Can I get the source code please?
Get it from the description.
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..❤❤
OK video but I absolutely hate voice over from AI - so I have to give this a thumbs down.
No issue. But I didn't have a choice.
May I know your email
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
Lmao, AI viewers interacting with the AI voice