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

dm3marian · 2025-02-05T01:19:34.601Z

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?

Screenshot 2025-02-05 at 01.13.271192×712 53.5 KB

rafael.tgt · 2025-02-05T03:13:09.552Z

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.

dm3marian · 2025-02-05T11:50:06.589Z

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?

rafael.tgt · 2025-02-05T14:57:34.777Z

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.

mitchbaylis · 2025-02-05T23:36:43.570Z

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

dm3marian · 2025-02-06T13:36:08.888Z

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?

claude.site

Claude Artifact

Try out Artifacts created by Claude users

rafael.tgt · 2025-02-06T19:08:29.258Z

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

dm3marian · 2025-02-17T15:05:49.930Z

I have another question relating to this.

The items are now in the cart, much like a shopping cart, and the user can drag and drop the order positioning of the items in a draggable repeating group (you can see the orders 1,2,3,4 below the titles for each item — screenshot attached)

I want to now pull that ‘data’ into a API that automatically merges the items in order. How would I go about starting this? Is it with States or another method?

Thanks again.

Screenshot 2025-02-17 at 15.05.352110×780 34 KB

dm3marian · 2025-02-18T16:00:28.707Z

I’ve found the solution to the above use case is to simply search for the data types and then add cart and order position constraints in the workflow.

system · 2025-04-16T01:20:33.161Z

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