Creating List Input Table and sending data as array

Hello, I’m trying to create an input group that I can add or subtract items from. I have included a sample of what I’m trying to create. And then I want to take that information and send it as an array to an API endpoint with other keys and values. If anyone has any suggestions on how to do something like this I would really appreciate it.

Here is the sample :arrow_down: (its a gif)
ezgif.com-video-to-gif

I have a feeling some plugins might do what you are looking for.

Check this thread and see if it works for you.

@boston85719 Thanks for the tip! My next questions is how can i send a array of data to a api endpoint this is what it is expecting { "data": { "key": "value", "key": "value", ... "items": [{ "sku": "0qw124", "description": "Item 1", "qty": 1 }, { "sku": "0q096", "description": "Item 2", "qty": 3 } ] } }
There are more keys but this is just a super simple example. Any ideas on how i can send JSON like that using the bubble api connection plugin?

No idea…you may want to create another post with the title including JSON array. Search the forum first as I’ve seen it discussed in the past but if you didn’t watch the video on the thread I linked to, I’d watch that and see if it does what you are looking for…I believe it does.

You’re trying to do this:

(You don’t actually want to create a repeating group where every item is an editable thing. You really just want to have an input thing and show the results. While you CAN do that, it’s just a silly interface. Instead, what you do is have an EDIT icon in your RG [rather than a trashcan] and, when that’s clicked, toss that item into the input/editor thing. I may or may not show that exact application in the above video, but you’ll get the idea.)

3 Likes

Keith, PERFECT! Exactly what I want to see. Two questions: I would like to be able to edit some of the entries. For example, you created the Canned Cat entry. Say you made a mistake in the pricing and it should be $12.99 instead of $2.99. How can you easily click on that entry in the repeating group image and bring it back to the editable group on the left to make the proper changes?

Second, I want to automatically add a counter so that Canned Cat will have “1” on the lower right corner, Child Repellant has “2” on the lower right corner, Dog Dog has “3” and Gizmotic Modulator has “4” on their respective lower right corners. What’s the simple way to do that?

Thanks for the video tutorial. It’s going to get me very far along what I need to do.

For a general overview of selecting things and operating on them, see video I linked here:

How to Video: Repeating Group (RG), Selecting an Item, and Showing it or Operating on it in a Popup / Pop-up (on vimeo: https://vimeo.com/289114359)

Watch the above video first.

Continuing on with my silly store demo, I show how to do this using List Shifter (but the general technique doesn’t need a plug in or anything). Def watch the video above first to understand the basic concept and then see how I make it a little easier in the video below:

2 Likes

:+1: Got it. Will watch.

As far as labeling the items in the repeating group with a number:

Current cell’s index is much nicer than some other implementations on other no-code/low-code platforms. I thought I had to create a field, set it to zero, then ++ it upon every update to the DB. Heh.

Thanks!

Keith, any suggestions on how I can edit the entries after it has been submitted to the database? For example, as I asked before, I want to edit the Canned Cat entry to change the price from $2.99 to $12.99. Should I add an edit button? Or perhaps allow tapping in the group (e.g., the Canned Cat entry) to get all existing data for that group’s contents back into the editable space?

That is, you have one group that inputs data to the database. Then you use the repeating group to display the inputted data. I wish to enable the group displaying the inputted data within the repeated group to be clickable. And when clicked, the data there is now displayed in the editable group for me to make changes/additions/subtractions. Can that be done? Also, I hope that when completed, the Current cell’s index is not changed. (Canned Cat stays as #1 on the list.)

Don’t both of my videos show exactly that?

Clarification, I suppose: Your repeating group doesn’t have to start out empty, it can of course be populated by the results of a search, right?

So it’s the same sort of page, but the RG’s source is now “Do a search for… Products” or whatever.

The first video is very helpful and I’ve modeled my app after it. Your second video essentially talks about how to reindex the entries in the repeating group. Moving them up or down, highlighting the one being looked at. Your third image clip showed how to identify the index of the entry (Current cell’s index). But none of these three illustrations explain how to edit an already submitted entry. You entered all the data for Canned Cat. You hit the Create New Product button and that data goes into the database as well as show up in the repeating group listing. But now, you need to modify the description to add that canned black cats are on sale at $1.99. How does one edit that entry’s description field?

Keith, my repeating group will start out empty. It is the intent for the user to fill in the repeating group with data. We just want the user to be able to make edits in case some entries are empty (because the information wasn’t forthcoming) or was mistakenly entered, typical human errors that can occur.

Luke, did you ever get an answer for what you’re trying to do? What you’re trying to do seems similar to what I’m trying to do.

This topic was automatically closed after 70 days. New replies are no longer allowed.