Using a search box to build a drop down list

Hi there,

I would like to upload static data from an excel file into my application. Eg.

And then use that data to create a search box like this:

This is like a search box, but when selecting a name, would trigger to a new page.

Would anyone be able to help me with a step by step on this - I am even struggling to upload the static data (.csv) and view the names etc in design mode.

Ultimately, I would like a specific user role to be able to update this static file by uploading a new version of it which: -

  • retains the unique key of existing records
  • marks a record which is not in the new file as ‘old’ - so its not a complete overwrite.

I fear that my prior understanding of relational data models getting in the way of me grasping some basic concepts in bubble!

Thanks in advance.
Andrew

2 Likes

Hi all,
If anyone can spare the time to help me with this one would be muchos appreciated!
Thanks, A

I’ll give you a high-level step-by-step, and you can let me know if there’s any part that needs more detail to make happen:

  1. Uploading your CSV
    First you need to set up your database structure so that the columns in your CSV can be mapped to a corresponding field in a data type. Create a data type (let’s call it “Contact”) with fields for first name, surname, combined name (all text types). Then when you use the CSV uploader, set it to type Contact, and it will ask you to map your fields; it’ll show you the column headers from your CSV, and you can select the fields you just created for your Contact type. First name = First name, etc. Validate the data and upload. This should be fairly straight forward if you have all the settings correct. Try it out.

  2. Displaying data
    There is a search box element under input forms in your design editor. For this element, define list of options = Contact. Then Field To Search would be Combined Names.Now, when you type in that search box, it’ll display the list of contact entries you just uploaded to your database (each row in your CSV is now a contact entry) and display the entry by the combined names field.

  3. Trigger New Page
    In workflow tab, you want to set it up like this: Event = “when input value is changed (select your autocomplete search element)” , Action = navigate to another internal page in your application.
    The page you navigate to should have a data type set to it (Contact) since here is where you want to modify the database entry. You can set this at page level settings (the gray inspector window that pops up every time you click on an element - just click anywhere on the page). So when you create that navigation action, it’ll ask you what data to send to the page (because the page expects data now that is type Contact). You would set it to the VALUE of the search box.

This other page where you can modify can be set up a few ways, but the easiest I think is if you had input fields that auto-bind to the page’s contact. So if you had an input field that is type text, you can set it to auto-bind to the contact’s first name. Typing in a new name in that field will automatically update the contact’s first name (you don’t need a save button or anything).

Doing this does overwrite those fields, so if you actually need to make a copy to retain the original contact, my approach is to have a workflow on this contact page where you create a new contact and set all fields to equal the page’s contact’s info and/or set them to equal modifications.

This was a fast breakdown, but let me know if you get stuck anywhere.


Gaby | Coaching Bubble

7 Likes

Thank you very, very much Gaby, looking forward to trying this!
This will give me a lot to ‘build out’ on.
Cheers,
A.

Hi Gaby,
After a long, fruitful evening I’d be so grateful if we could build on the insight you shared above - which all worked perfectly.

Lets assume a slightly enhanced data set

This includes a field managerID which shows a manager / subordinate relationship between ‘contacts’

Through your advice, I have been able to return profile data for a specific contact.

Now I would like to use the same profile page to return data according to the relationship specified in the ManagerID field.

Like so:

Thanks again for the invaluable help so far.

Cheers,
AM

Hi Andrew,

I’m so glad you were able to get to this point! These next steps are pretty straight-forward and hopefully will help deepen your understanding of how to make the database work for you. Knowing how to search for the info you need will often reveal whether you’re using an efficient structure. Currently, I think you are :slight_smile:

To display Marta’s Manager’s name:

Do a search for Contact. Add a constraint PersonID = Current Page Contact’s ManagerID. Then take the first item of this search. Then grab the Full_Name field. The full expression for the name text should read “Search for contact’s:first item’s full_name”

The constraint is pretty self-explanatory - you’re looking for a contact whose PersonID = Marta’s ManagerID.

The reason you need to grab first item is because when you “do a search…” it is returning a list, even if you know only 1 contact meets the constraint, so you’re specifying that you want the single result.

To display Contacts managed by Marta:

Use a repeating group to display this list. A repeating group is set to have a list source, and each cell displays each item in that list, so the job here is to make sure your source is set correctly. It will be pretty similar to the expression for finding Marta’s manager.

Do a search for Contacts. Add the constraint: ManagerID = Current Page Contact’s PersonID. And that’s it! So, now, we do want a list, so this is going to return all contacts whose ManagerID = Marta’s PersonID

Now, in the first cell of the repeating group, add 2 text elements (you could also do this within 1, but for more control of spacing, I’d use 2). 1st text element: Current cell’s PersonID. 2nd text element: Current cell’s Full_Name. You’ll see that that you only need to do this for the first cell, and the rest of the cells will follow suit and display those fields for their cell’s contact automatically.

Let me know how this goes!

Gaby

Fantastic - another successful evening, with your suggestions working perfectly for me.

My next step is to venture into creating user posts onto a profile page - and hence the step into states / users.

Sure I’ll have lots of questions, but self discovery for a while.

Thanks again Gaby,

So glad to hear it, Andrew. Let me know if you run into any walls during your exploration. I do think that’s the best way to learn - trial and error!

Hi Gaby,

What I’m trying to create relies on the ‘Contacts’ (Organogram) structure to be periodically updated / maintained outside of the system with a .csv upload by an appropriately permissioned user.

Would the below process be achievable?

I assume that the file upload action would need to trigger data transformation related workflow which does the equivalent of creating a temporary table and then
Update records where PeopleNumber matches, Add records where PeopleNumber doesn’t match.

I’m getting a bit ahead of myself with this, but calling it out as its a core tenet of feasibility of what I’m doing.

Hi Andrew,

Sorry I missed when you posted this. So, right now, you aren’t able to modify fields that directly from a CSV upload. The only way you can get CSV fields into the database via upload is in the editor, which is not what you’re looking for.

My first thought is to bring in other tools like Google Sheets + Blockspring or Zapier to be able to read spreadsheet data and modify/create from there. I haven’t done it myself, but this post may also offer ideas:

Since the feature you need doesn’t exist natively in Bubble, it will take some workarounds.

Hello, I’m wondering if anyone can help me with some logic relating to this dataset.

In this example, its easy to select 'All people managed by Marta, by using an expression which says 'All PersonID’s where Manager ID = Marta (PID_2).

But one of Marta’s people, Tamaryn Dey (PID_3), has 6 people who she manages.

How would I output ALL PEOPLE UNDER MARTA. (Ie. Marta’s 6 people, + Tamaryn’s 6 people - because Tamaryn is one of Marta’s) with a single expression?

You could try merged searches:

Do a search for Marta’s people : merged with Do a search for people whose manager’s manger ID = marta

The 2nd search would be:

Search for Users with Constraint: Manager = Search for Users with Constraint: ManagerID=Marta’s PID

Try that!


Gaby | Coaching Bubble

That sounds good! Think it will work recursively (eg. Marta has people, tamaryn has people, one of tamaryn’s people has people etc?

Yeah definitely, you should be able to just : merge everything as each search can be its own with independent constraints and if anything overlaps, it will only return the entry once. Of course, they all have to be the same data type.