Replacing Dropdowns with Single Tags

Hello,

I have read in another thread that the "Single Tag" type is supposed to be a replacement for the now deprecated dropdown type.

In the dropdown type (inside of a table), there used to be 3 fields that I used:

Mapped value: the actual value of the column, usually an id (as a foreign key) from the selectedRow.

Values: the id of the value is usually a foreign key for another table, so this possible list of values is taken from another query that lists all ids for that table.

Labels: these are the labels for the list of all ids above.

So in this example, there is a users table with all users and a user_state_id field, which is linked with a user_states table that has names of user states per id.

This is how I get the data via GraphQL:

Query:

{
  user_states {
    user_state_name,
    user_state_id
  }
}

Transformer:

let values = data.user_states.map(a => a.user_state_id);
let labels = data.user_states.map(a => a.user_state_name);
let obj = {
  values:  values,
  labels: labels,
};
return obj;

I couldn't manage to translate this use case to the "single type". Is it possible? How?

Bump. No one? Really?

Hi @nazim!

Sorry for the delay here, we were off for the long weekend.

Mapped value → Option value

Values → Data source

Labels → Option label

In order for these options to become available, you need to set your column to be editable first! Would you mind sharing a screenshot of how your column is currently set up?

Hey victoria,

Thanks for your reply.

Right now, it is set up like this:

And when I try to change it exactly like you say, it gives an error, because it seems to only accept Strings as labels, which doesn't make any sense to me:

Hey Victoria,

I think I've figured it out now. The mapping does not work 1:1 in all cases, like in mine. I had to find a different approach with single tags to make it work:

Hi @nazim,

Glad to hear you got this to work for you! :blush: Did you add the label and value properties to your data source, or were those already there for you to access?

Hi @victoria ,

Unfortunately, these were not already there for me to access (I wish they were, though). They are there when I pull the data via SQL, but not via GraphQL, which is what I am using now.

I had to come up with the following transformer to make them available:

let values = data.user_states.map(a => a.user_state_id);
let labels = data.user_states.map(a => a.user_state_name);
let obj = {
  values:  values,
  labels: labels,
};
return obj;

If there's a better way to do it, I would appreciate advice on that.

Ah, got it! I can definitely help you get your data in a more direct way if you'd like. Would you mind the pre-transformer structure of query.data? A screenshot of your left panel expanded out to show the query.data as much as possible would be great :raised_hands:

Hey @victoria,

I'm sorry, but since the app contains real data, we have no example data in it right now so I can't share real results (as it is a CRM). I can share with you the structure, though.

There is, however, an issue with the new Tag / Dropdown that I can't seem to solve.

I don't understand how to "tell" the field where to source the actual field value from - the default field value.

For example:

We have a users table with user_id, user_name, and parent_id, where parent_id is just a foreign key for user_id.

Let's say I want to assign a user their parent. As far as I understand the new Tag field, the data source should be set to users, the option value to item.user_id so it gets all the possible values for the parent user_ids, and the option label value to item.user_name so that it will display their respective names.

My problem is this: using this approach, I can select a user and assign it to the field, and then I can also pull this value from the field to update it - but I cannot bring the table to show the users parent_id - because there is no place to enter what the default value of that column should be.

I hope the issue is understandable.

Bump. Anyone? @victoria ?

Hi @nazim! Thank you for sharing all of that. The default value of the column will match the underlying table data. Is parent_id a part of the underlying table data? Are you interested in showing the parent_id in a different column?

Hi @victoria, I'm sorry, but I don't understand what you are writing and I don't see the connection to what I wrote above. Please help me understand.

Could you tell me what is unclear from my description?

The term "underlying table data" seems a bit vague to me: which table? Because as I wrote above, the values and labels of the drop-down are pulled from another table than the actual values of the column.

What a basic drop down field needs is:

  • A value field of the table that contains the actual data (e.g. from Table A)
  • An array of possible values for the dropdown (e.g. from Table B)
  • An array of possible labels for the values of the dropdown (e.g. also from Table B)

With the old dropdown field, this is possible. With the new one, I can't seem to find a way to map the value of the field to Table A, and pull the value-label pairs for all the dropdown options from Table B.

Understood. Thank you so much for clarifying here!

In my example, query1 is the data in the table and is pulling employee data and query2 is a separate query pulling in user names. Anywhere you see an employee number, e.g. "Employee 1", it's coming from the query1 and anywhere you see a real name, e.g. "Timon", it's coming from query2.

I tested your setup with a deprecated dropdown component and I believe the feature you're looking for is something like a Mapped value (red), is that correct? That would satisfy your first bullet point. And values + labels (blue) satisfy your second bullet point.

In the new dropdown type column (Single Tag), there is no explicit Mapped Value field, but since the table data field is using query1.data (where the "Employee 9" type values are coming from), it persists that as the column values (red).

Then, in the column settings, you can change the data source to reference query2 (where the first names are coming from) and set the values and labels (blue).

I've passed this feedback along to the team that worked on this feature, and please do let me know if there's anything else I should pass along or anything I can help clarify! :blush:

Hi there.
Has this component changed?
I don't see all those options.

Hey @jason3w! Those options should populate once you set the column to be editable (by toggling on the “Editable column” option)

@victoria Thanks for the explanation above. It helped me a lot.
I have another question. Can I have another column in the table that could dynamically updated to the dropdown values.
Using your example, it would be, say i chose Timon from the dropdown list, I would want the new column to show Employee 6 (or whatever the 'item.id' is).

Awesome, very happy to hear that! This might be difficult to do actually, but let me see if I can think of a workaround and get back to you

Hi again @dna_acquco! Still looking into any potential workarounds. Out of curiosity, what's your ideal workflow? Are you using this just for display purposes? Are you using multiple queries worth of data?

what i am trying to do is asking a user to score a metric, say salary, with a list of criteria.
the list of criteria would be in the dropdown list, e.g. salary above 100k, salary between 50k - 100k, salary below 50k etc.
there will be a criteria-scores mapping, provided by a query of data. i am using this query of data as source for my dropdown list.
if i found a salary is above 100k, i chose the dropdown, which match to a value of score 5.
The value 5 would be what i want to display on another column called 'score' in the table.

Hmm, I think you could use a JS mapper to either reference recordUpdates perhaps (that's the only place that the dropdown changes appear)!

Would something like this work for you? It's a little hacky, but I haven't been able to find a better way to access the dropdown value for every row just yet