Programmatically get the actual text of a dropdown selection

I’m wondering how your dropdown menus are implemented.

I’m looking for a way to save the state of a dropdown in a board, then hydrate that state back into the dropdown on page load using jquery.

With a regular HTML dropdown I would do something similar to in this codepen:

Is there a way to populate a dropdown from data stored in a board?

Hi @mjgs!

I’m wondering if you wouldn’t mind expanding a bit more on your use-case here. I’m getting that you want to save the dropdown columns selections of a board, but I guess I’m confused on when/where you would be “loading” this information.

Are you just looking to automatically create dropdown label options for a board without assigning them to item(s) on said board?

If so, at this time I’m afraid that you wouldn’t be able to add dropdown label options without also assigning them to a particular item. There are currently only two ways to create new labels in either a Status or a Dropdown column:

  1. Include the create_labels_if_missing argument to your mutation query as denoted in this announcement post. You can see that these methods require you to alter a value to include this new label.
  2. Create a new column and set pre-existing labels using the settings_str argument.

Is this what you had in mind? And if so, could either one of these options work?

Perhaps this will be useful context.

In the data I get from the API, the dropdown related stuff looks like this:

“Classification”: {
“id”: “dropdown7”,
“title”: “Classification”,
“value”: {
“ids”: [
15
],
“changed_at”: “2021-06-15T20:44:41.989Z”
}
},

The text selected in the dropdown is saved as:

“ids”: [
15
],

So how can I programmatically get the actual text of the dropdown selection?

Btw - this is the query I am using to pull data from the API:

const jobsQuery = { items_by_column_values(board_id: ${cfg.jobBoardId}, column_id: \"name\", column_value: \"${cfg.companyId}\") { id name column_values { id title value } } };

I shuffle the data around a bit after getting it back from the API, so that’s why the structure of the classification item snippet I posted earlier might look a but unexpected.

Ideally there would be some way to update the query so it knows to populate the dropdown items with the text version of the selection rather than the list of ids.

Hi @mjgs,

Thank you for the extra info and context! Definitely helped me better understand the issue you’re facing at this time.

With regards to your question, it sounds like you’re looking to return only the labels that have been selected in a particular item, and not all of the possible labels available for selection on the board, right?

If the answer is yes, what you’re looking for in this case would be the text field for column_values queries. This will output the text of each dropdown label that’s been selected in the item returned.

Here is an example query:
image

with its resulting response:

Alternatively, if you’re looking to return all possible labels available in a dropdown column, you can query the settings_str field for a columns query.

Here is an example of that:
image

and the resulting response:

With regards to the actual jQuery you’re building, I found a few resources that might be helpful:

The first one includes a really good example of how to populate a dropdown list dynamically, based off of the number of labels available. Definitely check it out as inspiration!

By the way, my colleague was able to come up with an example of how this would look in CodePen, check it out here: https://codepen.io/dipro-b/pen/eYvXPyv?editors=1111.

Thanks @Helen - I got it working just by adding the text field to my query:

const jobsQuery = { items_by_column_values(board_id: ${cfg.jobBoardId}, column_id: \"name\", column_value: \"${cfg.companyId}\") { id name column_values { id title value text } } } ;

And the text field had the dropdown selection :slight_smile:

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.