Pull data fields from items user selects in the front end UI

Hi,

I’m building a custom pdf page builder.

I’ve created the data fields such as Cover Preview, Name and PDF url (this is hidden to the user) and have a front end of repeating groups where a user can select the items they want. (Wireframe attached)

The intention is that when a user selects their items and presses a button, the PDF url(s) are pulled and I can push it to an external API service to collate the items.

I’m struggling at the moment with setting up the the action of getting the URL data when the user clicks on the button. Can any one help?

Hello,

Based on the wireframe, I assume that the user clicks on an item to select it (allowing for multiple selections) and then clicks a button to proceed. Please let me know if my understanding is incorrect.

In this scenario, you can create a custom state on the page, such as “my-custom-list,” which will hold a list of the selected items.

When the user clicks on an item, you can add a workflow to either add or remove that item from the custom state:

  • Adding: Set the state to update “my-custom-list” by adding the selected item from the parent group.
  • Removing: Set the state to update “my-custom-list” by removing the selected item from the parent group.

Additionally, you can modify the user interface to indicate whether an item is selected. For example, you could change the border color when “my-custom-list” contains the item from the parent group.

When the user clicks the button, you can schedule an API workflow on a list to process the list of selected items.

Thanks Rafael!

In your experience, does the list logic change if the the user can select multiple instances of the same item, like a product for example, where you can add more than one of the same product?

So looking at the wireframe attached, I’ve selected ‘Lined 30’ and ‘Dots 30’ but the user might want to add multiples of each. Does that make sense?

The list logic does not function properly when selecting multiple instances of the same item.

Your situation is similar to that of a shopping cart. In this case, you may need to create a database table to manage the operation, including columns for “item” and “quantity.” Alternatively, if you are comfortable using JavaScript, you can store the state in JSON format and utilize a toolbox plugin to handle it.

will need to do this as a state or a data or a cookie (requires a plugin)

use state if the data is only needed once and it doesn’t matter if it is lost on page refresh

use data if you need archiving/saving for later use

Thanks both for your help. I’m a bubble and code newbie and appreciate your expertise.

I’ve prototyped something in react using claude (below), this is the exact functionality I’d want. Would you still recommend directly using bubble.io or injecting javascript to achieve this?

based on the prototype you can build with database

something like
Table cover - you record all possible covers
Table content - you record all possible covers
Table cart

  • user
  • cover
  • list of cart content

table cart content

  • related cart
  • content
  • order

on the preview you will have a RG of the cart’s list of cart content sorted by order
and you’ll add the logic to handle the order of the cards

1 Like