Filter Drop Down Form Using Reference Fields

Ask the community
,
1

I have 2 databases, 1 containing real estate brokers (names, photos, emails etc), and the other containing property details (photos, floorplans, description etc).

In a 3rd database, connected to both a form, and a dynamic page, I use dropdown menus in a form to select an agent from database 1, and a property from database 2. Using reference fields I connect a broker, with a property, and a dynamic page is created.

In the form, I would like to be able to filter my agent database, before selecting a broker.
i.e., now I select from a long list of brokers. I’d like to be able to filter the list by ‘town’, and then choose from a smaller list in the dropdown menu.

Thank you for any advice you can offer.

Database 1

1075×307 36.8 KB

Database 2

1187×213 38.2 KB

Database 3

1072×484 57.7 KB

Form

675×610 247 KB

2

So, as I understand, you want to filter the agent/broker dropdown, after the property is selected, is that it? If so, it is simple. Do you have a field called “city” in your Properties Collection?
3

Hi Bruno, actually I want to filter the agent/broker drop down before the property is selected.

i.e. I would want to filter agent by city, so that when you selected the agent drop down, you weren’t presented with everything. Instead you’re presented with a filtered view.

However my issue is, the DB connected to these two fields uses reference fields to populate those two dropdowns. So the ‘city’ data is in the agent database, rather than Properties/Agent database.

4

@elliotvjones I’m getting a little confused with the confusing Collections names. What you need to do is filter the Property dropdown data with the selected Agent dropdown value and the aforementioned city value that is referenced in the Agent collection.

It would be something like this:

import wixData from 'wix-data'

$w.onReady(() => {
 //This changes the Properties Dropdown upon Agent change.
    $w("#dropdownAgent").onChange(async event => {
 let agent = event.target.value //This defines the value of the selected Agent dropdown
 let agentCity = await findAgentCity(agent) //This finds the Agent city
 let dropdownProperyOptions = await filterDropdownProperty(agent, agentCity) //This filters the data that will go inside the Properties dropdown
        $w("#dropdownProperty").options = createDropdownOptions(dropdownProperyOptions) //This creates the array from the object that was created when filtered
 })
})


async function filterDropdownProperty(agent, city) {
 let filter = await wixData
 .query("Properties") //Change to your Properties Collection Name
 .eq("agentName", agent) //Change the left argument to the Agent Name field in the Properties Collection
 .eq("city", city) //Change the left argument to the City field in the Properties Collection
 .find()
 .then(results => results.items ? results.items.length > 0 : `No property found for this ${agent} within this ${city}`)
 return filter
}

async function findAgentCity(agent) {
 let search = await wixData
 .query("Agent") //Change to the Agent Collection name
 .eq("name", agent) //Change the left argument to the Agent Name field in the Agent Collection
 .find()
 .then(results => results.items[0] ? results.items.length > 0 : `No ${agent} found`)
 return search
}

function createDropdownOptions(data) {
 let options = data.map(item => {
 return {
            label: item.propertyName,
            value: item.price
 }
 })
 return options
}