Help with List View

MasonB · 2021-01-14T05:37:58.538Z

Hello - new to Bubble and would appreciate some guidance!

I’m trying to make an app where the user can configure an invoice through a long series of drop downs and radio buttons along the left that outputs a nice summary of the items included in the invoice on the right hand side.

I don’t need to store any data, just visualize the output of the choices live. So I can see how if I simply match 1-1 the inputs with the outputs, it’s easy going. The problem is that for many of the choices, the answer will be some form of ‘not included’ and I don’t need need to include in the visual summary. If I were adding items to a list via an input, I could see using a repeating group, but that doesn’t seem to make sense if all the configuration is happening on screen.

So here’s my question: what’s the most elegant solution for some form of the concept of a table that will only display rows if they are relevant? And it doesn’t actually have to be a table, just table format as a general visual. Example visual included for reference.

[Note: not the actual program, just an excel example]

Thank you!

boston85719 · 2021-01-14T05:52:01.354Z

I think this is just a matter of formatting on the elements that are being used to visualize the data.

Looks like your repeating group on the right side has color for separator which causes all of the cells to appear as if they are there…remove that color

Screen Shot 2021-01-14 at 12.49.32 PM

Then put a group into the cell and put the formatting so the separator would be a border on the group…then put conditional on the group to not be visible when the current cell data is empty.

MasonB · 2021-01-14T06:04:48.587Z

Appreciate the help!

Unfortunately I’m not totally following you: how would I use a repeating group if I want it to display the results of a series of selections from on screen drop downs? Is it possible to set up a repeating group that way?

And apologies if it was confusing, but the visual was just a conceptual example in Excel, not the actual program in Bubble.

cmarchan · 2021-01-15T05:43:54.852Z

Perhaps this could be useful:

Notion

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team

image764×910 109 KB

boston85719 · 2021-01-15T06:20:06.945Z

You would want to first create a custom state to hold the list of selections made from the series of selections (keep in mind they all need to be of the same data type)

So if you want users to select from a data type called fruits and they select from drop downs a series of fruits to create a list of fruits they selected and then display that list of fruits in a dropdown, you would create a custom state that is of a type ‘fruit’ and check the box to signal it is a list.

Then when a dropdown changes its value (workflow event) add that dropdowns value to the custom state list of fruits.

Here is a screen shot from a demo app that shows a page with 6 dropdowns all of the same type, and I want to ensure the dropdown choices do not show options previously selected.

Screen Shot 2021-01-15 at 1.15.46 PM697×500 58.2 KB

I apologize in advance for not providing the editor view as this app is provided to students enrolled in my Bubble Bootcamps.

This app is creating a survey of the survey takers top six choices.

One thing that will prove difficult about this method though, is that if the user decides to change their selection, you will need to find a way to know which was their previous selection to remove it from the custom state list…this could be done by having a custom state on each dropdown to store the single selection and using that value to remove it from the list of all selections before adding the new selection into the list and the single selection custom state.

On your repeating group the data type would be ‘fruit’ and the data source would be the custom state list of fruits selected.

boston85719 · 2021-01-15T06:21:16.822Z

You could also look into the list shifter plugin…it has functions that would enable you to do this as well.