styling select (single or multi)

[habitats-tech]

New to Budibase (last 4 days) and very impressed with its capabilities. I am running Budibase 3.13.11 self-hosted in docker using Budibase DB. I have two things I want to understand how to do, one at a time (will create another post for my 2nd question).

Basically I want to style select options at two levels (have tried both handlebars and JS but have been unsuccessful). Uncertain if CSS can be used.

My understanding is that options are styled on the fly as the following HTML demonstrates. But where can I declare my preferred HSLA values which are applied application-wide. An ability to define select option styles column-wide would be the icing on the cake (e.g. ability to have a fully transparent pill in some columns).

<div class="options svelte-14lr9ae">
  <div class="option svelte-14lr9ae focused">
    <div class="badge text svelte-14lr9ae" style="--color: hsla(222, 90%, 75%, 0.3);">
      <span class="svelte-14lr9ae">CN</span>
    </div>
  </div>
  <div class="option svelte-14lr9ae">
    <div class="badge text svelte-14lr9ae" style="--color: hsla(84, 90%, 75%, 0.3);">
      <span class="svelte-14lr9ae">US</span>
    </div>
  </div>
</div>

I would also like to know how I can style select options at runtime as in the example below. My understanding from playing around and searching is that it must be done using handlebars (not CSS or JS). Using a table view as per below image, how can I change the pill colour of each option at runtime.

I have tried the following handlebars code, experimenting with different statements, but I always end up with an unformatted country code (e.g. either CN or US absent of any styling/format):

{{#if (eq HWtbl.HW.Origin 'CN')}}
  <div class='badge text svelte-14lr9ae' style='color: rgba(222, 222, 0, 0.3);'>
    <span style='color: rgba(222, 222, 0, 0.3);'>{{HWtbl.HW.Origin}}</span>
  </div>
{{else if (eq HWtbl.HW.Origin 'US')}}
  <div class='badge text svelte-14lr9ae' style='--colour: hsla(84, 90%, 75%, 0.3);'>
    <span class='svelte-14lr9ae">{{HWtbl.HW.Origin}}</span>
  </div>
{{else}}
  <div class='badge text svelte-14lr9ae' style='--colour: hsla(0, 0%, 80%, 0.3);'>
    <span class='svelte-14lr9ae'>{{HWtbl.HW.Origin}}</span>
  </div>
{{/if}}

[habitats-tech]

There might be a good reason for not associating specific variables to pills. However, would it not make more sense if for example we provide 24 different pill styles each associated with its own style variable (e.g. --color00...--color24 and/or --style00...--style24). We can then have the ability to style things at will.

[abadedgar113]

Have you tried using embed component? You can use css there.
Here is an example:

[habitats-tech]

Embed unfortunately does not work for my use case.

I have instead injected JS into the column at table view level and it works. The only problem is the output is in HTML and budibase 3.11 does not render HTML at runtime, nor it has any option to render HTML at runtime. So what I get as output is just HTML source code.

If anyone knows a workaround (how to allow output to render HTML) I would be delighted to know. The alternative is to create a custom component but from the little I have seen it requires effort to get going. Anyone with a solution that does not require long term maintenance work to implement is welcome to share their ideas.

This is my JS:

const origin = $("SWtbl.SW.Origin"); // assign field value

let background;

switch (origin) {
  case 'CN':
    background = 'hsla(222, 90%, 75%, 0.3)';
    break;
  case 'EU':
    background = 'hsla(357, 83%, 51%, 0.3)';
    break;
  case 'US':
    background = 'hsla(84, 90%, 75%, 0.3)';
    break;
  default:
    background = 'hsla(0, 0%, 80%, 0.3)';
}

return `
  <div style='background: ${background};'>
    ${origin}
  </div>
`;

This is the runtime output: