Hi there, quite new to Bubble, wrapping my head around app structure and just best practices overall. I have a challenge I’m facing.
I created a data type called “pitch” that contains an email alias/address e.g. matt@pitchsend.com, a subject line, and a message.
When I user subscribes they have 1-5 pitches created in the database and associated with their account, I surface those with a repeating group in a typical table format.
What I want to have happen, is for the user to click on a row in the table and have the fields for the data type available to edit. How can I accomplish this in the simplest way possible? I like the looks of the Trix editor, so hopefully that’s what I can use for the message body because I also need to save the output as HTML & plain text.
Do I:
Learn to use state and create tabs?
Should I be creating a new page for each pitch?
Any guidance is much appreciated! If you need further context around the business: pitchsend.com
When I’m providing the user the ability to edit individual rows in a repeating group, I typically send that data to a popup. (Save some small exceptions for changing a dropdown or a toggle value).
Within a popup, it provides much more real estate for both editing and deeper contextual information. (Since you’re using a rich text input, that doesn’t lend itself well to small real estate areas).
Given the # of records is low (1-5), another option is to have an group within the repeating group, that you show/hide when an “Edit” button/icon is clicked. (Using the collapse this element’s height, you can make it so all of the rows collapse properly so you don’t have awkward gaps).
There are a couple of different ways you might do this. Consider that you could just display info in your repeating group in INPUTS instead of just text elements. If those inputs were autobound to their source things, changes a user makes would be automatically made to the underlying thing.
To have a button (or a clickable area that represents “Edit this row”), what you would do is create inputs tied to the editable things that are initially hidden (“not visible” on page load).
When Edit is clicked, show those inputs in the table row (perhaps in a group whose height collapses when hidden).
You might also simultaneously hide the static versions of the info…
Whether those changes require confirmation or not is up to how you define the inputs. If they are autobound, edits would be reflected immediately. If instead the inputs just collect updated info, you’ll of course need a save button that, when clicked, makes changes to the things in question.
BTW, Dan’s pop-up approach can be a good one too. In my own app I’ve used both approaches, depending on whether the RG interface gives enough room or whether what’s being updated needs more room and fancier editing features.
My app is a single page site, so as a user is filling in the data for their page, the page is updating with the data. “Save” commits it to the database. So when they hit “edit” (from their dashboard) we just take them to the page live page with the form visible. If a user doesn’t have rights, they see the same page but with out the form.
But the pop up approach works great.
Though to wrap my head around how to get the pop up to work, I started by sending them to a page with the form elements on it. Once i understood that, I was able to go the pop-up route on other projects.
Wow, these are all super helpful responses. Thank you guys. Going to mull it over for a bit and see which one of these I can get working. Will report back.
Hppy to help. Just remember to bring it full circle.
Once you feel you have comfort with Bubble (ideas to share, things you’ve built, reflections on the learning process), be sure to share it with others.
Hey @matt.l.ellsworth I created a template (still waiting for it to go through submission) that allows basic CRUD of an app. The editing of an entry in a repeating group is done on an “edit” page rather than a modal. I hope to add that in the future.
You can pick it apart and see how I did it. Its called “crud-basic” when its finally becomes available.
–
Update: I added editing in modal as well as on a separate page. And its now avail in the template store here. -> CRUD-Basic
