Custom Progress Bar Style

[kpudlo]

Hi Everyone,

I'm working in UI Builder and I'm using the Progress Bar web component to display a completion percentage coming from a record - " Progress " .

I'd like to dynamically change the color of the progress bar depending on the value, something like:

• Red for < 25%

• Orange for 25–49%

• Yellow for 50–74%

• Green for 75%+

Has anyone successfully styled the progress color of the progress bar dynamically based on a value?

[HidekiOgawa · Accepted solution]

This can be achieved by setting the following script in "Style".

function evaluateProperty({api, helpers}) {
	var value = api.data.record.form.fields.progress.originalValue;

  switch (true) {
    case (value < 25):
      return 'error';
    case (value >= 25 && value <= 49):
      return 'orange';
    case (value >= 50 && value <= 74):
      return 'alert';
    default:
      return 'positive';
  }
}

[kpudlo]

Thanks it worked