Using coloured Tag in Table

[Rob_Faulkner]

Hi

I have a table showing customer data. One of the fields is the customer status (e.g. Active / Inactive). Based on this I want to use the "Tag" field type and colour the customer id field appropriately e.g. Active = Green / Inactive = Red.

I've set some JS as you can see in the image, it appears to evaluate to the correct colour based on the customer status however the tag remains grey.

If I colour code the actual status field using the "item" keyword it seems to work correctly (see the second screenshot). Is there any way of making this work on customer id?

Thanks in advance
Rob

[Tess]

Hi @Rob_Faulkner Thanks for reaching out! Unfortunately, this is a bug where currentRow is not in scope for the tag colors

Background color does have currentRow in scope, so your original logic would work in this field. Definitely not a perfect workaround, but wanted to share just in case while we work on a fix for the bug!

[Rob_Faulkner]

Thanks Tess, I’d spotted the background colour could be changed … but it just doesn’t look as pretty

Thanks for your time looking into it. I’ll hold out for the big fix.

Cheers,

[dcartlidge]

If you don't use all the functionality of the table component then the virtualised table does have this option and might be a good alternative

[Rob_Faulkner]

Hi @dcartlidge,

Thanks for the pointer, although Im not sure where the "virtualised table" is? I've looked through all the available components / Googled and can't see one?

Cheers,

[Tess]

Thanks @dcartlidge! @Rob_Faulkner virtualized table is a component in Private Beta. I've added it to your account. Please note that is read-only and doesn't yet have much functionality in terms of filtering or server side pagination. If you don't need users to edit table cells, this could potentially be a good option!

[Rob_Faulkner]

Ah that’s great, I’ll take a look this morning.

Thanks both!

[Rob_Faulkner]

Virtualised table works great, thanks again @dcartlidge @Tess

[dcartlidge]

oops, my bad, I had read it was coming out of Beta and assumed it was available - glad it worked out for you though

[Mainframe]

Is this still broken? I'm noticing something similar where a Table column set to "Tag", Options list, Mapped... "Color" doesn't seem to have any access to the current lookup record. So there's no "currentRow", "item", etc.

I wrongly assumed I could just add a color column, fill in with colors I wanted, then use the Color spot to get that color from the lookup table.

[Tess]

Hi @Mainframe,

It looks like this is still in our queue for the legacy table. Since my last message, we've launched our new table component (out of beta and now with read-write capability).

I'd recommend using the new table for this use case.

For users on-premise, you can do this on v2.121+

[Magenta_Jackie]

@Tess I don't seem to have the Color field available with the new table. Am I missing something? I'm an on-premise user on version 3.2.2

[Tess]

Hi @Magenta_Jackie My screenshot is for the tag column type. It looks like the plural tags column type has color options when you go to the Add-ons->Option list

Let me know if you run into any trouble there

[jclutterbuck]

I'm also having this problem.

I found "colour" as one of the fileds of the Option list.

But I can't access {{item}} or {{currentRow}} or {{currentSourceRow}}.

This also seems to be the case for the new Status indicator?

[Tess]

We have requests to expose current row in both!

[Tess]

Hi there! We just shipped a fix to expose expose `currentRow` in status indicators & it'll be available on Cloud mid next week (and then on prem a couple of weeks after that)

[Magenta_Jackie]

Somehow I am able to access {{item}} in the Mapped options menu, but it's not working. I have a custom HTML column that can utilize the colors I'm passing to it, but I'm still doing something wrong with the tags column. Any ideas?

The HTML I'm using for the Expected HCCs column

{{
  (() => {
    const tagStyles = 'display:inline; padding: 10px; background-color:green; color:black; border-radius:5px; ';

    var colors = currentSourceRow.expected_hccs_status;
      
    let tags = '<ul>';
    let color = ''
    
   currentSourceRow.expected_hccs.forEach((tag, index) => {
      color = colors[index] || 'white';
      tags += (`<li style="${tagStyles}background-color:${color}">${tag}</li> `)
    })
    
    tags += ('</ul>')
    return tags;
  })()
}}

[Tess]

Hi @Magenta_Jackie Can you share a screenshot of the data structure?

[Magenta_Jackie]

[Tess]

Hi @Magenta_Jackie,

Is read_member_list also the query that is populating your table?

This data doesn't appear to be formatted as the tags column is expecting. The tags options list is expecting an array of objects where each object has an id, a value, and a color. It seems like your Postgres query is returning an object with and array of ids and an array of nested color arrays.

I believe if you reformat the query data to match the array of single objects structure, you should be able to get the tags colors working.

Could you try this in the tags data source?

{{ _.flatten(formatDataAsArray(read_member_list.data).map(x=>{return x.expected_hccs_status.map(y=>{return {expected_hccs_status: y} } ) }) ) }}

*Since you do not have a unique id for each individual color, you'll have to put the color as the value instead of the plan_id