Bad app design: How would you do this better?

Need help App Organization
1

Hi there,
I’m another noob doing a test project learning how to use Bubble, and I wondered if a kind Bubbler might help me get on the right course! I’ve been reading the manual and watching videos but a little unsure which direction to go.

Here’s what I’d like the app to do: I have a database of cars where I’ve researched their gas mileage. A user can enter car manufacturer name, model name, and year for 3 different cars and the app will tell you what the gas mileage is for each car. They also enter the cost of gas in their area and the number of miles they drive per day. So once you hit submit it tells you the gas mileage for each car AND how much you’re going to pay in gas per year.

So I’ll need it to do 3 calculations: first - multiply the miles per gallon for each car by the price of gas, second - multiply that figure by the number of miles they drive per day, and third - multiply that figure by 365. Then I’d like that total yearly gas cost to pop up next to each car.

I’ve got my database set up so the user can use drop downs to select 3 cars, but now I’m trying various ways of getting it to A) look up the gas mileage, B) do the calculations, and C) display the total gas cost for each car.

What’s the best way to accomplish this?

Below is my interface so far, and how I have the data organized.

image
image1366×768 99 KB

I have 3 tables set up for Manufacturer, Model, and Year. Then I have another table called “Car profile” that includes fields for Manufacturer, Model, and Year and the value for the gas mileage which I will research for each car.

image
image1366×768 103 KB

The drop downs are working. So once the user enters the manufacturer, it will only show options in the drop downs that I have a record for in my Car Profiles table. But I’m unsure how to now get it so when I hit submit it it provides the new information based on the calculations. I’m exploring repeating groups and popups. How would you go about this?

Thanks for any help!
Todd

2

Hi Todd,

Here’s what I’d do - add a group to your repeating group cell. It doesn’t need to be styled in any way - in fact, style it so that it’s transparent (no border, etc.). Set the content type of the group to “Car Profile” and in the data source do “Search for Car Profile :first item” - in the search add constraints for Manufacturer, Model, and Year.

Now, this group element can act as a data source for the specific car profile based on the user’s inputs. And since the group is in the RG cell, you have a different data source there for each car.

For the calculations, you can have a text element in the RG cell as well that multiples the gas mileage value (ie "Group’s Car Profile’s Gas Mileage Value) by the other inputs.

Hope this helps!

Gaby | Coaching Bubble
Private coaching, courses, and tons of free resources

3

Hi there,
Thanks so much for the help - seriously appreciate it! I tried to implement those steps but I’m definitely missing something and still running into a wall. Currently the app doesn’t have any repeating groups - perhaps that’s my main issue? I’m a bit confused about when a repeating group is necessary. As I understand it, the repeating group is ideal for listing things - like if I wanted to set a drop down for the user to selecta car manufacturer ('Toyota" for example), the repeating group could then list all the Toyotas in my Car Profiles database. But it seems that with this app that’s not exactly what I want - since the user is using the drop downs to select a specific car (make, model, year) it seemed unnecessary to have a repeating group. But am I misunderstanding the true function of the RG?

Here’s the link to my editor for the app: https://bubble.io/page?type=page&name=test2&id=test2973&tab=tabs-1

Once the user has indicated the make, model, and year for three cars and hits submit, I’d like to have the gas mileage pop up to the right of each row of inputs (plus those additional fields with the calculations). I thought about sending them to a new page that displays all of the information, but when I created a new page I didn’t see how to get it to display information based on the user’s parameters on the previous page. D’oh!

Extremely thankful for the advice!
Todd

4

Oh oh… I assumed you had a repeating group set up there. I confused you for sure.

Ok, so the group strategy I described can still happen. The RG isn’t even necessary. You’d just have 3 groups (and they can physically group each set of drop-down/inputs), each with a different data source. I can set it up for you in the link you sent. I’m on mobile right now, but I’ll be back!

5

Wow, thanks so much - yes I think if I could see an example of what you’re describing within the editor that would really help. Feel free to make any changes within the app, I have a copy so I’ll be able to compare. I feel like I’m close to beginning to get some momentum working in Bubble, just need to get through these initial issues to understand better how it works.

By the way, I just downloaded your ebook and I’m going to be checking out your other resources. Thanks again!
Todd

6

Ok, I’ve updated your page. There’s an additional input to calculate the annual miles separately because Bubble’s equation order of operations isn’t super sophisticated (no parentheses, etc.). That input is hidden since the user doesn’t necessarily need to see it, but it’ll still calculate.

Also, I added a text element to the right of each set of inputs. This text performs the annual cost calculation with the found Car Profile based on selections. It’ll say $0/year until selections are made. I also have it formatting to a currency display.

Check this all out and let me know if you have any questions.

7

Nice - that’s really cool! Didn’t realize you could just do the calculations right there within a text field. Thanks a ton for showing me how to that. Looking at how you set it up I had a few questions to make sure I understand what’s going on:

  1. What are the groups doing exactly? I notice that the groups have no type of content or data source indicated. Other than the fact that the inputs and drop downs are resting on top of the group in the layout, is there some relationship there?

  2. I tried adding another text element that would display the gas mileage value for the car selected by the user, but for some reason it displays all the gas mileage values for all the cars (even though I added a constraint so it should only display the mileage for that specific make/model/year. What am I missing? Here’s the link to the editor if you want to check it out: https://bubble.io/page?type=page&name=test_4&id=test2973&tab=tabs-1

  3. Is there a way to make those values appear on the right (the mileage value, and the total annual gas cost) only after the user hits submit on the button? What elements should I experiment with to accomplish that?

  4. Is it possible to set it so after hitting submit it will reorder the three rows based on gas cost, listing them from cheapest to most expensive? Or if re-ordering it would be a pain, perhaps just a way to highlight the best choice - like it becomes larger or get’s a green border?

Thanks so much, I seriously appreciate all your help! Ha ha, I’m not used to needing so much help. Usually I’m able to just read through the manual and experiment enough where I start to get it, but I’m finding this is a little more complex than that!
Todd