Setting up Multi Combo Box with dynamic list of options

Some members spend a generous amount of time helping me when i struggle for days on an issue (much credit goes to @Mihaly_Toth), so it’s only fair that I share the findings for other beginners who will face the same challenge.

We’re using this component (not the input version, the checkbox one) and we first need to check the schema that the list of options binding is expecting: list of objects with 1 property

You can always transform the schema with the right formula but I prefer keeping things simple, so I make sure my Firebase data schema reflects the same list of objects.
‘categories’ is the title of the list which does contain 1 object whose property is ‘token’.

This is where you can create as many categories as needed, by adding more objects within that ‘categories’ list. This would still be a list of objects with 1 property (token).


The values you input there (Stay, Sports…) are what we are interested in displaying in the dynamic list of options of the component.

Then set your data resource schema which must reflect the same schema: ‘categories’ is the title of the list of objects with 1 property (token). :warning: Notice though that the whole schema value type is an object.


To make the data from firebase available in the app, create a data variable (retrieve collection) from the data resource you’ve just created.


Keep the data variable defaults as is:
image
(Although here you could edit the record collection to make it reflect the schema we need for list of options so you can bind it directly to the dataVar)

I’ll leave the dataVar default as is (and attach a Set pageVar to it later). But first, let’s create that page variable with the right schema: an object with 2 properties because that object contains the ‘categories’ list and an ID:

Here it is important to understand that the whole document is like an object. An object that contains a list and an ID:
image
Same when you create the data resource, you create an object first and foremost, which has a default ID and in which you add lists and properties:


So we must reflect this schema, which is why the pageVar must be created as a object with 2 properties: a list and an ID. And in the list, we create an object with 1 property.

Back to data variable, we attach a Set page variable and set it up:
We bind it to the pageVar we’ve just created and select the list of object with 1 property. This selection is important since this is what the pageVar will return when bound to the list of options of the component.

We assign it the value returned by the dataVar via a formula:
image
The formula enables you to get the data (list of objects) from firebase:

You are done, just bind the list of options of the component to the pageVar which holds the values in the list of objects fetched from the dataVar:
image

1 Like