So, as many of you, I work with Airtable but I think this is achievable with other data sources too.
I was wondering how could I dynamically have colored tags in my client’s site without the need of automations in the process, I preferred not to use automations for two reasons, first, my Airtable plan gives me 100,000 automations per month and by the volume of registers and tables in the workspace, I have to be very careful not to spend any unnecessary automations, secondly, as I work with high volume databases, some automations has proven to be sometimes slow to execute, and sometimes… not too trustworthy.
Any way! I found out you can make your colored tags thru Airtable formulas! You can change the colors you want based on your stablished criteria and the text in the inside by any given output of your needs. Let me show you a quick example:
Color configuration:
Sample exercise:
See the magic:
The code I used in the formula is the following one and of course you can twist it as you like, enjoy!
IF(
Status='done',
'<div class="_51290ae_165h0f25" data-roundness="STANDARD" data-body-font-weight="600" style="--_51290ae_165h0f21: #93e088; --_51290ae_165h0f22: #0b1d05; --_51290ae_165h0f23: #52BB43; --_51290ae_165h0f24: 1px; --_51290ae_1es1u5v1s: Inter;"><span>' & Task & '</span></div>',
'<div class="_51290ae_165h0f25" data-roundness="STANDARD" data-body-font-weight="600" style="--_51290ae_165h0f21:' & {HEX Code} & ' ; --_51290ae_165h0f22: ' & {Font color} & '; --_51290ae_165h0f23: #52BB43; --_51290ae_165h0f24: 1px; --_51290ae_1es1u5v1s: Inter;"><span>' & Task & '</span></div>')
So:
after ‘–_51290ae_165h0f21:’ is where you want to set your background color
after ‘–_51290ae_165h0f22:’ is where you want to set your font color
I din’t mess with the border color but I’m guessing is the ‘–_51290ae_165h0f23:’ one.
PS: I didn’t show the configuration of my Softr page, but it’s basically a grid block connected to my ‘Tasks’ page, and I mapped a rich text field to the Airtable formula to achieve the wanted result.
Happy new year to all of you,