Nested Options (main 1 - Sub 1 - Opt 1) in 1T-Dropdown plugin

[Ren]

Hi @eli - first of all, congratulation on this genuine gem

I would like to ask you whether something like the following scenario is actually feasible within your plugin:

>MAIN FIELD 1

SUBFIELD 1
SUBFIELD 2

-option1
-option2
-option3

>MAIN FIELD 2

SUBFIELD 1
SUBFIELD 2

-option1
-option2
-option3

Basically, it’s a nested structure, where there are several main fields (closable - label), each of them has several subfields (closable - label), containing the selectable options.

I’ve drafted a (valid ) JSON element for this : please let me know what you think
Thanks a lot,
Renato

[{
“label”: “MAIN 1”,
“closable”: “close”,
“options”: [{
“label”: “MAIN 1 | SUB-1”,
“closable”: “close”,
“options”: [{
“text”: “MAIN 1 | Sub-1 | Option-1”
},
{
“text”: “MAIN 1 | Sub-1 | Option-2”
},
{
“text”: “MAIN 1 | Sub-1 | Option-3”
}
]
},
{
“label”: “MAIN 1 | SUB-2”,
“closable”: “close”,
“options”: [{
“text”: “MAIN 1 | Sub-2 | Option-1”
},
{
“text”: “MAIN 1 | Sub-2 | Option-2”
},
{
“text”: “MAIN 1 | Sub-2 | Option-3”
}
]
}
]
},
{
“label”: “MAIN 2”,
“closable”: “close”,
“options”: [{
“label”: “MAIN 2 | SUB-1”,
“closable”: “close”,
“options”: [{
“text”: “MAIN 2 | Sub-1 | Option-1”
},
{
“text”: “MAIN 2 | Sub-1 | Option-2”
},
{
“text”: “MAIN 2 | Sub-1 | Option-3”
}
]
},
{
“label”: “MAIN 2 | SUB-2”,
“closable”: “close”,
“options”: [{
“text”: “MAIN 2 | Sub-2 | Option-1”
},
{
“text”: “MAIN 2 | Sub-2 | Option-2”
},
{
“text”: “MAIN 2 | Sub-2 | Option-3”
}
]
}
]
}
]

[eli]

Hey Renato,

I’m happy the plugin is working well for you! Love to see that you are incorporating other options like closable, etc as well.

Unfortunately, the underlying SlimSelect library only supports grouping options at the first level so you won’t be able to nest the options further than that at this point in time.

Best!

Eli

[Ren]

Hi @eli ,

Yeah, the visual effect of label + closable is really great
Again thanks for creating something that makes this possible, and even so easy!!

Regarding the question I was asking, no problem: I will use 2 different elements concatenated with each other to reproduce the nesting.

If I may, I would take this opportunity to ask another question: being a compulsive collector of your plugins, I would like to use the “Xano Conecctor” & “1-T Dropdown” combo.

How can I use the data queried from a Xano DB as “Options” of this dropdown element?

TAV,
Renato

[eli]

@Ren

How can I use the data queried from a Xano DB as “Options” of this dropdown element?

As far as displaying the options it would be done the same way. Simply reference the query element containing the list of data and build your json object. You are not able to return an API connector data type right now (soon hopefully) but you could set the return value as text and use the xano id as the ‘value’ parameter on your options. That would set the selected state to the id and you could find the correct record from there.

Have been experimenting with the ability to call your options directly from an API but no promises there

[Ren]

Thank a lot @eli , but I’m afraid I should ask you to stand by me for a moment longer: maybe I’m getting lost in a glass of water or maybe I’m trying to do something that is actually not possible.
Anyway, here’s what I tried (sorry, long post but almost entirely made of Screenshot):

1) I created a really basic table in Xano:

2) Then, I created a “Virtual data type” in Bubble just as essential - so to be able to use the XanoQuery element:

3) Then, I set up a XanoQuery element that (succesfully) loads this data at page load:

4) Now comes the problem: the only way I can think of to use the “THIS…” list suffix in Bubble is the following one (which is actually the same I saw in your video tutorial associated with the 1-T plugin):

I also tried changing “Return data type” by setting ANIMALS (i.e. the “virtual data type”) instead of “text”. No way, I keep getting this error:

The only way I can get the two plugins to work together is by referencing the “Raw JSON body” returned by the XanoQuery element and using find & replace to change “id” (coming from Xano) into “value” (expected by the plugin element).

And…TADA…

However, using the “Raw JSON body” the potential of both plugin would result dramatically downsized.

As I said, maybe there is something elementary that I can’t see having spent the last 9 hours in front of this monitor, or maybe there are limitations in bubble that don’t allow for a different use of the plugin…I’m sure you will enlighten me!

TAV,
Renato

[eli]

Hey @Ren, the way you had it setup in step 4 above will work you just need to add the square brackets in the ‘Options’ field surrounding the dynamic expression So

[ XanoQuery A's data:format as text ]

No need for the fancy find and replace on the raw body (though that was a clever solution)

[Ren]

@eli

you just need to add the square brackets

…I felt it was about the “glass of water” - thanks for pointing it out to me!

@eli

(though that was a clever solution)

…and, thanks for the “clever” - I’ve simply learned from the best

[pavanlalith738]

Hey @eli !
The plugin is functioning properly when I use the Bubble database, but it encounters an issue when I try to use an external API. I’m receiving the following error from the plugin, and even though I select an option, the selected option appears to be empty. I have attached screenshots for reference.

[Ren]

Hi @pavanlalith738 ,

Have you tried setting “text” as “Return data type” of the plugin?

Also, @eli has recently published a video related to the use of Xano Connector Plugin for the type of error you are getting: basically, when an API response expects to receive an array, it could be empty or even made by 1 single element, but should never be “missing” or “null”.

Hope this helps
Renato

[eli]

Hi @pavanlalith738, @Ren is exactly correct here. The plugin is not currently able to return an API connector type. You’ll need to set it to return a text, return the id as the value just like you are, and then retrieve the record you need using the id.

[pavanlalith738]

Got it, thank you for your response @Ren @eli