Dynamically populating information

Hi there,

I am building a support page for our app. The purpose is to let international contractors know what information they need to provide us in order to be payable in our app. The challenge is that each country has their own unique requirements. Example is that in the US you need Routing Number; in UK you need IBAN. Each country has their own set of nuances. Right now I have all of that data in a google sheet. There are probably 25 or so columns.

I want to dynamically pull in data when a country is selected by a dropdown and present their requirements to the viewer. This part is simple. The issue is how do I present the data to the user. I can’t simply say present X value when A country is selected because when B country is selected I’ll need to show Y value. This has caused roadblock.

Does that make sense?

What I have right now:
CloudApp

Where I was going with this is creating a grid where the column name would be on the left and a checkmark would be on the right (if it was required). Issue is that there would be a lot of rows (most of them not being relevant to the viewer).

Hi @nic.nicolo :slight_smile: Welcome to the forum!

At first glance, it may be easier to create a data type called “Country”:

Then, create new boolean (yes/no) fields for each possible column type. For example, since Routing Number is needed for US, the associated field (i.e., column) could be “Routing Number?” (type: yes/no, list: no):

For Countries that need to submit a “Routing Number”, the value of that field would be “yes” for those particular Countries. For Countries that don’t need to submit a “Routing Number”, the value of the field would be “no” for those particular Countries.

And as a second example, another field for whether IBAN is required could be called “IBAN?” (type: yes/no, list: no)

For Countries that need to submit “IBAN”, the value of that field would be “yes” for those particular Countries. For Countries that don’t need to submit “IBAN”, the value of the field would be “no” for those particular Countries. This pattern repeats for all possible pieces of information that could be required.

In this example, I’ll just use these two columns, but you would continue adding these yes/no fields for all of the possible columns. I also added a field called “Name” to store the Country’s name (e.g., “United Kingdom”, “Unites States”):

Once all of the possible fields are set up, you can manually add or upload your data from your Google Sheet in the App Data tab by clicking App Data → All Countrys

It won’t show any entries at first since we haven’t added any entries manually, or through CSV upload. In order to upload data from the Google Sheet, the app would need to be on at least the personal plan or higher (since the Hobby plan doesn’t allow for .csv upload). If you don’t wish to change the plan yet, you can manually add each entry and select “yes” or “no” from the dropdown depending on whether that piece of information is needed for that particular Country row. As you upload the data, it will begin to look similar to this (but with more columns of course):

In order to make sure only the required columns are shown depending on the selected country, your dropdown will first want to display all of the Countries in the database using this setup:

Then, create the 25 possible inputs on the page, making sure that each input and its corresponding label are grouped together using a group element:

Placing the element in a group will allow you to select “Collapse an element’s height when hidden”; this option ensures that if an input is not required for the selected country, that input group’s height will collapse which prevents extra, empty space on the page:

Also, make sure the groups further expand vertically so they are almost touching (but not overlapping with) the group beneath them (this just helps to make sure all the extra space collapses :slight_smile: )

Last but not least! In order to make sure the correct inputs show for the selected country, you would need to add a conditional to each group element which checks to see if it is a required field for each country. For example, the conditional on the IBAN input would be:

And the conditional on the Routing Number input would be:

Since these conditionals ‘show’ the input element groups when they’re needed, we also need to make sure all of the groups are not shown by default; otherwise the groups will all be shown no matter what since we don’t have any “this element is visible → unchecked (no)” conditionals on the group elements. To do this, make sure “This element is visible on page load” is unchecked for each input group as shown here:


Here is a short GIF of how Bubble dynamically shows the correct inputs in action:

Preview link:

Editor:

And that should do it! Feel free to let me know if I can clarify anything or if you have any questions at all :slight_smile:

1 Like

Hi Faye,

Thank you for the detailed response. Based on what I’m reading, I think this will work. I’ll 100% need to upgrade also if the first few samples work.

That said, I’ll let you know if I have any questions. I am going to use your steps a little bit later in the morning.

1 Like

No problem at all! :slight_smile: Sounds great, @nic.nicolo!

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