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?
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.
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.
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?
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?
