I have been doing exactly this recently!
Here are some tips that I have discovered along the way:
currentSourceRow
is a property of the table, not a free reference to use in the options mapping.
This is how I have my Options setup for my column:
My datasource is a mapping of tags to colors in my database, so any app that needs the list can use it.
For me, there was a logical disconnect, which confused me. item
in the above screenshot, does not reference the table values, or row, it is a reference to the mapping you are setting up. Defining these mappings will have the table automatically apply the right tag, based on the Value
.
In my mapping, the Value
is the text of the status, the item.label
. Rendering the table, when a cell has that same value, Retool swaps for the mapped tag.
It is not that obvious, but they state it here:
that the {{ item }}
we see there is the source column's cell value. But when you are in the options mapping, "Below, item
will reference..." is the the value of the option you are trying to map.
One more side thing:
Instead of doing a long nested ternary, try utilizing some lodash
For example, you can store in a variable, a simple map like this:
{
"SUCCESS": "green",
"ERROR": "red",
"MANY_MORE": "pink"
}
and then with the help of _.get
(docs) you can:
{{ _.get(ColorMapVariable.value, something.with.prop) }}
Another method I use is _.thru
(docs) which lets you reference a.big.nested.thing
passed into a function to use.
Example:
{{
currentSourceRow.patient_import_task_status === "SUCCESS"
? "AEE34A"
: currentSourceRow.patient_import_task_status === "FAILED"
? "FAB5B5"
: "CFF6F7"
}}
could utilize _.thru()
like this
{{
_.thru(currentSourceRow.patient_import_task_status, (sts) => {
return sts === "SUCCESS"
? "AEE34A"
: sts === "FAILED"
? "FAB5B5"
: "CFF6F7"
})
}}
One More Method
I have used this pattern elsewhere, but you can emulate pattern matching with lodash's _.cond()
(docs) method.
{{
_.cond([
[_.matches("SUCCESS"), () => "AEE34A"],
[_.matches("FAILED"), () => "FAB5B5"],
[_.stubTrue, () => "CFF6F7"] // Default case (if no match)
])(currentSourceRow.patient_import_task_status)
}}