Airtable single status dropdown colors show in Softr?

[strupek]

Hey all! I’m working on building a portal for clients of my small marketing agency. We’ve been using Airtable for while - and the Interfaces have been awesome - but I want to use Softr to bring the experience to the next level.

One of the things I’m trying to figure out is how I can mimic the appearance of some elements of Airtable Interfaces within Softr; specifically the Status Dropdown colors.

Here’s our current interface within Airtable that I’m trying to mimic:

I can only apparently upload one image as a new user - I will try and add screenshots of our current build in Softr in the comments.

Is it possible within Softr to have those colors come through?

I found a post around making a SWITCH formula within Airtable, but even the following doesn’t work (gives syntax errors) when entered into the formula field:

SWITCH({Task Status},

“Complete”,“#45caff”,

“Confirmed”,“#1a8927”,

“Unconfirmed”,“#fdbc3a”,

“Planning”,“#d2481a”,

“In Progress”,“#7a39e8”

)

Any idea if this is possible or how to do it?

Thank you!

[strupek]

Here’s our current build in Softr I’m trying to make look like Airtable Interface above:

[strupek]

Aaaaaand I’ve actually solved it with the help of ChatGPT! So I wanted to share here

I used a SWITCH formula that outputs HTML which we then have appear as Rich Text in Softr:

SWITCH(
  {Posting Status},
  "Scheduled", "<div style='background-color: #CFF5D1; padding: 5px 15px;'>Scheduled</div>",
  "Ready to be Scheduled", "<div style='background-color: #FFEAB6; padding: 5px 15px;'>Ready to be Scheduled</div>",
  "Waiting on Approvals", "<div style='background-color: #FFD4E0; padding: 5px 15px;'>Waiting on Approvals</div>",
  "In Drafting", "<div style='background-color: #C4C7CD; padding: 5px 15px;'>In Drafting</div>",
  "Stalled/Waiting on Client", "<div style='background-color: #DC043B; color: #FFFFFF; padding: 5px 15px;'>Stalled/Waiting on Client</div>"
)

And walla - it works!

[Matt]

That’s super smart (and I’m noting this down for the future!) but I think you could have achieved the same thing by setting the content type you mapped your Airtable dropdown to a Tag? And then you can set the style options to “As defined in data source”, e.g:

Note its worth changing the styling options of the tag field (text size, roundness) before setting it to “As defined in data source” as it seems to lock it from further editing once set.

[strupek]

Okay THAT method is WAY easier. Here’s how it looks using tags in comparison:

But at least I found an … overly complicated workaround that could be used for something else?

[Jjenglert]

Now you know 2 ways to accomplish this! Great work!

[Matt]

Airtable’s own colour options are pretty limited, so no doubt we could all use this method to specify some more customiseable tags which fit our apps’ styling and branding better