> For the complete documentation index, see [llms.txt](https://estare.gitbook.io/firebase-auth-firestore-and-storage-plugin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://estare.gitbook.io/firebase-auth-firestore-and-storage-plugin/plugin-elements/firebase-dropdown-processor.md).

# Firebase Dropdown Processor

{% hint style="success" %}
The issue related to this element can also be solved with the new [Data Schemas](/firebase-auth-firestore-and-storage-plugin/plugin-elements/data-schemas.md) feature.
{% endhint %}

On Bubble, we might often want to provide data to a dropdown that represents an entire document, 

For instante, in our [Task Manager Sample](https://estare-plugin-firestore.bubbleapps.io/version-test/dropdown_sample) app, suppose we want to choose tasks from a dropdown show the content of the chosem task in a group.  Although we could feed the list of tasks to the dropdown, choose a document and use the [Data extractor](/firebase-auth-firestore-and-storage-plugin/plugin-elements/firestore-data-extractor.md) to get it's contents, the dropdown would show the entire JSON object structure as a text on its options, which is not good user experience.

<div align="left"><figure><img src="/files/HLgkLb7GlQJSmZ1ukPjU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/I4ejrEBGQm2RJ5XaVGN8" alt=""><figcaption></figcaption></figure></div>

Intead, we'd want to show a single field for the user to choose from. That's what the Firebase Dropdown Processor does.

***

## <mark style="color:blue;">Settings</mark>

<div align="left"><figure><img src="/files/ulRnaE8fOG7CtwxGx0Ar" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6lChGNBi5JHz1jfMNAzh" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ePXF5jPEwGeXnrWeuCLB" alt=""><figcaption></figcaption></figure></div>

### Choices

The list of documents you you'll display on the dropdown. (e.g. a list of document data from a [Firestire Data](/firebase-auth-firestore-and-storage-plugin/plugin-elements/firestore-data-list.md) element).

### Dropdown ID

The ID Attribute of the dropdown in which you'll display the data.

<div align="left"><figure><img src="/files/6UQcTxkmm7ov0oMtGiIq" alt=""><figcaption></figcaption></figure></div>

{% hint style="warning" %}
IMPORTANT! For the processing of the Dropdown to work, it is necessary the dropdown is visible at the same time the Dropdown Processor is. So it is good practice to make this element conditional visibility attached to the dropdown's visibility.

![](/files/QYzXcVV4S1k9AAAjIlRH)
{% endhint %}

### Field to Display

The name or path of the field you want to display on the dropdown.

In our example, we chose to display the "description" field.

### Complex Display (advanced)

Use this to display data in a "complex" way, using "${doc.field}" to indicate each fields you want to display. For instance: "${doc.name} (${doc.email})" will display the name and the email field like "John (<john@email.com>)".

{% hint style="warning" %}
If both the "field to display" and "complex display" are set, this option will be ignored.
{% endhint %}

{% hint style="danger" %}
This is an advanced feature, since it uses Javascript to get the fields to show. You might have to deal with situations in which the data you want to display is not a string/text.

For instance, if you try to display the "due\_date" field of a task, it will show \[object Object], since its  a JSON object.

If you're insecure with javascript, we suggest sticking with string/text fields on the Complex Display feature.
{% endhint %}

***

## <mark style="color:blue;">States and Values</mark>

### Choices

The Dropdown Processor element has only one state: the choices to be fed into the dropdown you're processing.&#x20;

<div align="left"><figure><img src="/files/njqpsIXgTwnsHdlYKXwT" alt=""><figcaption></figcaption></figure></div>