How to edit data inline (aka create an "edit mode") on Bubble.io

Подписаться 44 тыс.

Просмотров 28 тыс.

50% 1

Imagine having 200 items in a list of data and needing to edit 30 of them.
In Bubble, you’d typically have to head over to a page where you’re able to edit the data, then click into each individual piece of data to make changes.
It’s a bit tedious. And the amount of time it takes to edit multiple pieces of data can leave you with a headache.
What if there was an easier way, though?
What if there was a way you could see your data, as-is, and edit inline? Or, in other words, stay on the same page your data is displayed, and not only that, edit each individual piece of information with a simple click?
You can imagine how much easier it’d be to edit data without having to navigate to another page, and without having to “click through” each data point in order to make a change.
Fortunately, you can do this in Bubble.
Watch today’s video lesson to learn how to create an “edit mode” feature.
It has the potential to drastically speed up your editing time.
____________________________
💥 Want to work side by side with our team to launch your app-based business? We're now accepting entrepreneurs into our private mentorship program. Apply here for a strategy call to learn more: coachingnocodeapps.com/built-...
Plus, here are a few more ways to get help fast...
👉 Free scalable app workshop: coachingnocodeapps.com/workshop
👉 Self-led training: www.coachingnocodeapps.com/re...
👉 Facebook community for no code app entrepreneurs: / 1165236046981865

Опубликовано:

27 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 100

@c0ri 4 года назад

Oh this is a great spin on updating user info. Thanks for making this Gaby! I'll nominate you for Bubbler of the Year Award :P

@coachingnocodeapps 4 года назад

You're very welcome, and I'm glad it was helpful! 😀

@comicide 4 года назад

Thank you so much! This is what I was looking for :)

@coachingnocodeapps 4 года назад

I'm glad it was helpful, Harshala!

@chaimpilosof6022 3 года назад

Thanks, Gaby, you are a wizard. Your videos are always very helpful. Thanks again.

@coachingnocodeapps 3 года назад

You're very welcome!

@thassiopaganucci 2 года назад

Wowww!!! Cheers from Brazil! Thank you for this amazing content. I was just looking for it. You are a life saver!

@coachingnocodeapps 2 года назад

You're welcome, Thassio!

@Natshafromrussia 3 года назад

Great tutorial! Thanks a lot! Incredibly useful for me!

@coachingnocodeapps 3 года назад

You're very welcome! I'm glad it's helpful!

@eugenek777 3 года назад

love all your videos

@coachingnocodeapps 3 года назад

I'm so glad to hear that, Eugene!

@YukioUeno 2 года назад

Really a Great Tutorial, thank you Gaby!

@coachingnocodeapps 2 года назад

You're very welcome!

@jugurthadehiles982 2 месяца назад

Thank you so much !

@coachingnocodeapps 2 месяца назад

You're welcome!

@isaacepstein8971 7 месяцев назад

this is brilliant. wish i would've seen this earlier. thank you

@coachingnocodeapps 6 месяцев назад

I'm so glad it was helpful!

@RyanScottForReal 4 года назад

Excellent as usual!

@coachingnocodeapps 4 года назад

Thank you for the support, Ryan!

@ExpeditoCalixto 3 года назад

Great vid! Implemented this and I'm never going back again! Thanks for the tip

@coachingnocodeapps 3 года назад

I'm glad it helped!

@sandranoonannewgreennormal 6 лет назад

Thanks for the excellent tutorial, Gaby. One comment: I applied your edit data inline solution to a multi-line input field that I'd like to let the user edit. The one issue I had is that when a multi-line input field is disabled, Bubble displays the font in a grayed-out state, at least on mobile. No matter how much one adjusts the fonts, it appears in that washed-out "disabled" state. The only workaround I can think of is to toggle between a normal text field and the multi-line input when the user clicks to edit. If you think I'm missing something, I'd love your feedback. Keep up the great videos!

@coachingnocodeapps 6 лет назад

Hi Sandra, looks like you might be running into a browser consistency thing. I tested on my desktop as well as Chrome on my Android, and it behaved properly. If you want to be safe with the multi-line, I'd do exactly what you described: toggle between text element and multi-line input. I've done that for other reasons before too, and while a bit annoying, works just as well. I believe the other case you might run into is with dropdowns. Disabled dropdown elements still show the dropdown arrow in some browsers, which could be confusing. Glad you're enjoying the content!

@luminrabbit9488 2 года назад

Whoa! Love this tutorial!

@coachingnocodeapps 2 года назад

🔥🙌

@leopoldomolina1664 3 года назад

Great feature!

@coachingnocodeapps 3 года назад

🙌

@renem1219 Год назад

Thanks for the great video!I have a question about a conditional on an icon pencil to edit. I don't see 'text' in the Select a Property to change choices for edit. I am not sure where it may be now.

@bidding.construction1961 6 лет назад

Awesome video again Gaby! Got a question - how long have you been using bubble?

@coachingnocodeapps 6 лет назад

Sp8ce.Design Thanks! Glad you enjoyed it. I started using Bubble in December 2015 for my own app and started coaching others around Fall of 2016.

@jorgebernardomartinezdelos7989 4 года назад

PERFECT! STRAIGHT TO THE POINT

@coachingnocodeapps 4 года назад

I'm glad it was helpful, Jorge!

@user-vy1vs2nc2p 11 месяцев назад

Good Content, very useful and informative

@coachingnocodeapps 11 месяцев назад

I'm glad it was helpful!

@gajendrashinde434 4 года назад

Hi, one question is here if I want to delete a particular field using combination of checkbox and delete button

@estancia_renascer 3 года назад

Thank U so Much

@coachingnocodeapps 3 года назад

You're welcome, Andre!

@yves2p869 2 года назад

Merci beaucoup Gaby. I've left all the records in "Edit mode" so that the user can change emails, phone number, etc. of many records. I want to save all the changes in once with a single "Save" button (not one line by line). How do you manage this "Save all" function ? I don't want to use autobinding.

@POLOIN 8 месяцев назад

Thanks! If I have a input 1= field 1 + field 2 and want to modify field 3=input 1. With one click edit all field 3, is it possible?

@DauvO 2 года назад

Hi! I just followed your Tutorial and it was very helpful. I wonder if you could tell me.. Everything is working as you said.. When I hit save, visibly everything changes. I assume the information is being saved over the original data at the database level and not just in the browser, but when I preview the app again, all the information I previously saved isi replaced with the original data inserted at the moment of making the 'item.' I am in development mode in a free user plan with bubble. Is this why it isn't saving at the database level? I am just afraid of continuing to attempt to save data in this way, but perhaps I am missing a piece of how to save it to the database and not just change it within the user interface. Do you know why this is happening?

@austinleung9752 6 лет назад

Great tutorial, Gaby! Really useful tip :) I'm also thinking of making my own demo app. Got a question here....for plugins, how do you know which plugins are reliable, aside from the ones directly created by Bubble? I understand that the variety of Bubble Plugins is rapidly expanding but that also brings about a concern of which ones we can trust to function properly and to handle whatever data it has access to responsibly (e.g. don't pass it onto third parties).

@coachingnocodeapps 6 лет назад

Hi Austin! Great question. It does take a little bit of trust because, you're right, there's not a lot of policing (yet?) and you never know if a plugin publisher will even continue support and could leave you in the dust. With API plugins, it's actually worth it to just re-create the plugin on your in in the API Connector. Any free plugin will give you read-access to the code, so you can just replicate it. Element plugins are more difficult, and I'd say commit to ones that have a lot of users. Many publishers offer "support" threads in the forum, so you can get a sense of how responsive they are and what user response is. I'd be cautious with new plugins. Use them, but if it's a critical component of your entire app, reach out to the publisher about their plans for it and/or consider creating yourself.

@samoklaidofficielqdlrecord7674 3 года назад

Incroyable ! Tu es une génie !!!

@coachingnocodeapps 3 года назад

Thank you!

@gajendrashinde434 4 года назад

great video, Thank you so much...

@coachingnocodeapps 4 года назад

You're welcome, Gajendra!

@jivkoradev7398 Год назад

Thanks so much for this tutorial. It's been very helpful to me. May I ask one thing. When I try to edit items from the repeating group (which are all stored in separate groups) and I click on the Edit button then all items (groups within the repeating group) become editable. How do I get the Edit/Save button active only for the particular item (row from the repeating group) that has been clicked?

@drewarensberg3162 3 года назад

baaaadass thanks!

@coachingnocodeapps 3 года назад

You're welcome, Drew!

@user-vy1vs2nc2p 10 месяцев назад

Hello Gaby, after I edit and click on the save button, the newly updated details are not getting reflected in the database, how do I sort this out!?

@levifry 2 года назад

Gold!

@coachingnocodeapps 2 года назад

🙌

@mihai62834 Год назад

Just Fantastic! What if I need to introduce the option of deleting an entire thing? I am thinking of placing somewhere a trash bin icon that is visible only when Edit Mode is "yes" and its action is to delete that thing... Is there a better solution? Thank You!!

@carlharrypandes2379 Год назад

hi, love your tutorial. but i need help. when i pressed edit button it will become "save" but after pressing it again it won't go back to "edit". where did i go wrong?

@LinhNguyen-nh8oq 11 месяцев назад

thanks

@coachingnocodeapps 11 месяцев назад

You're welcome!

@strongemotion Год назад

For Custom States (or Fields) with a type of "yes/no", I like using the naming convention of "Edit Mode?" -- notice the question mark is part of the name. This tells me that this is a question about edit mode being true or false, not which edit mode is being used or other confusing possibilities.

@drsumitperiwal5390 10 месяцев назад

Hi. Thanks for the awesome and crystal clear instructions. But I have his a problem. The colour of my font is Grey and not black. I have tried everything but the text colour remains grey. Please help.

@stormy7418 Год назад

Is there a way to do this with multi-select drop downs?

@edwinsturdivant592 2 года назад

✋🏾 Hi! Are you still responding to comments? I am following along to the letter, and I can’t get the data to display in my input box. I am trying edit mode for just one field on my todo app. I build the expression “ current cells task’s title” in the ‘initial content’ field, but I get nothin on preview. Can anybody help? I hope I have enough info. Thx!

@henrytheturnip 5 лет назад

This is super-helpful! I've been struggling with this all day. How would you work in a 'Discard Changes' button?

@coachingnocodeapps 5 лет назад

Hi there, for a discard feature, have a separate button that only changes the custom state back to the non-edit mode. You'll also want to "reset inputs" to display the initial content again. This discard button would not need any Make Changes action since you're not wanting to modify the database.

@henrytheturnip 5 лет назад

@@coachingnocodeapps Thank you SO MUCH, that makes perfect sense. This and your Autocomplete Search tutorial will make a huge improvement to my app :) I might need more help taking the app multi-user with authentication, record locking etc. I'll reach out for a paid session.

@Natshafromrussia 3 года назад

Hello, Gaby! Thanks again and I have one question. I did several input fields in group (name of the product, kkals, proteins, fats, carbs). When the button EDIT is clicked I make (for example) a change only in one of that fields, then I press the button SAVE and there in only changed field displays. Others are deleting. What am I doing wrong?(((

@Natshafromrussia 3 года назад

I found my mistake! I inserted dynamic data in PLACEHOLDER instead of INITIAL CONTENT. Thank you so much for this video!

@coachingnocodeapps 3 года назад

Awesome, great job Natasha!

@thassiopaganucci 2 года назад

@@Natshafromrussia I was having the same problem here!! Thanks for sharing!

@user-vt6xn8in4o 2 года назад

but how to add this inline group of element ?

@kurtism4161 4 года назад

How can I get this to work for Yes/No fields? Seems to be a problem when "Changing a thing". It wont let you select a drop down with static inputs of Yes/No. Thank you for this video!

@coachingnocodeapps 3 года назад

Hey Kurtis! You could try saying "this drop downs value is yes"

@marcokosten2850 5 лет назад

Hee Gaby, why are we not able to change the email of the user? Struggling for a while with it , and I see that you are also not see "email" in the list of User things... Is there an other way?

@coachingnocodeapps 5 лет назад

You can change it with the "update user credentials" action or the "change email for another user" action. The email field should be visible. Go to data > app data > users.

@Incendiar 4 года назад

sinceramente, nao consegui encontrar o erro!! o meu nem visualiza no navegador, e dentro do editor não aparece nenhum erro!! é possivel ajudar?

@ExpeditoCalixto 3 года назад

Oi, já resolveu? Talvez seja com o grupo repetidor.

@adilbasharat 5 лет назад

Hey Gabby, I can't get the repeating group to shrink its height if an element is removed from it. If you have a way please let me know. Your tutorials have been really helpful. Thank you so much.

@coachingnocodeapps 5 лет назад

Hi Adil, you need to put any elements you want to shrink height inside of a group. There is a checkbox to "collapse height when hidden" in the group element settings. See this tutorial for more: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-yvmM2pm3o4k.html

@TheEvilSpirit123 4 года назад

Hi, how did yo make the repeating group display all the users? I am trying to do the same thing with displaying all "attached files" but it is not working. Please help me out.

@coachingnocodeapps 4 года назад

Hey Mark! Set your repeating group's type to File. Set the data source to a Search for the data type that contains the attached files. The end of the data source should be the field that contains the file. Good luck!

@SofianeHD 5 лет назад

I want let user creat thier post and I will see them and publish them as admin ? how can i do that ? thank you so much! also can I choose my domain and how much per year ?

@coachingnocodeapps 4 года назад

Hi Sofiane, create an admin page for yourself. That page can have a repeating group that shows all posts (Search for Posts) with no constraints - that way you see everyone's. Yes, you can connect your custom domain under Settings > Domain/Email. You'll need to purchase it separately though from any domain provider. You can view Bubble's most updated pricing at bubble.io/pricing

@marciotucunduva5038 4 года назад

Hi Gaby, great video! How can i do that without a edit/save button? When the user clicks the name for example it opens for edit. Thanks!

@coachingnocodeapps 4 года назад

Hi Mario, use a condition to change the appearance of the input when focused

@KhalGamin 3 года назад

Good question Mario and thanks for the response. I am not quite understanding the response though. My instinct tells me to do some type of auto binding for the saving to the database portion. No?

@ThePixelitomedia 4 года назад

Gaby are you available for freelancer bubble projects or just coaching?

@coachingnocodeapps 4 года назад

Hey there! We don't have hourly/freelance-type options, but you're welcome to check out our resources here: coachingnocodeapps.com/resources

@ThePixelitomedia 4 года назад

@@coachingnocodeapps great thanks! I become VIP now, learn and create myself :)

@paxtonwilliams9245 6 лет назад

What if i want the only person who can edit things in the app to be the admin? Is that possible?

@coachingnocodeapps 6 лет назад

Paxton Williams Yes, very possible. Easiest way is to add a condition to the edit button so that it is only visible when the current user's [field] is a certain value. Ex: when current user's "Admin" is "yes" > this element is visible. And make sure by default the button is not visible.

@junaiddadan5592 3 года назад

This is great. Just one issue I'm running into using this on text input boxes. If the text input is more than one line long the input box does not wrap in 'view' mode and just shows up as a single line of text that is cut-off when it reaches the edge of the input box. This doesn't change if I change the dimensions of the input box. Has anyone found a solution to this?

@junaiddadan5592 3 года назад

Nevermind, it works fine if I replace the text input with a multi-line input

@coachingnocodeapps 3 года назад

I'm glad you got it up and running!

@naveenb9255 6 месяцев назад

its working but not getting saved

@anasshahid3092 5 лет назад

Can you show me, if we click on the edit button , other page will be open for editing and the editing done from the other page not from the same page?

@coachingnocodeapps 5 лет назад

Hi Anas, sounds like you'll need a link element to open up an internal page in a new tab. If the other page has type of content set to it, you can "send data" to that page even through the link element so that it knows what data record you're editing.

@abedmanje 5 лет назад

@@coachingnocodeapps hie Gaby i have done the same but i want to hide the edit profile text/button so that its only the current user who can see it on their profile page but its not visible when they browse other people's profiles, how do i do that ?

@ProtectedSquid 6 лет назад

Can you show us how to make a CAD/MDT For Bubble, A lot of Communities are asking for Computer Aided Dispatches and their isn't a lot of help out there, I was Wondering if you could do it in your upcoming videos.

@coachingnocodeapps 6 лет назад

Hi there, best way I can help with a full CAD/MDT system is through a one-on-one workshop, which you can book here: coachingbubble.com/the-sprint-method. Hope to meet you in a session!

@fredcutler3232 4 года назад

This is such a great tutorial. Everything worked perfectly, except... The thing I want to edit is from a linked data type, not the data type of the group. I can display it by doing a search for what I want, but when I try to put the same thing in the workflow in a "Make changes to a thing" and then use Do a search for, Bubble changes the Make changes to a list. I tried :firstitem after conditioning it on "Parent group's User is Current User" but that doesn't work. Can anyone tell me how to set this up? Maybe I should change the group to be the linked data type (just the Parent group's User's record) So this is more of a data structure question, I guess. Thanks. Fred

@coachingnocodeapps 4 года назад

Hi Fred, changing the data source of the group will make it easier for you. In the workflow, make sure you're using "make a change to a thing" action instead of "change to a list of things"