How to add different colors for each stage?

Hi,

I am trying to add color for each stage for the progress bar.
We have different claim statuses as New, Pending etc as stages in the progress bar… I would like to show different color for each status. How can we achieve this ?

If the claim status is “New”, it’s a first stage and I would like to show Blue color and remaining stages No color.
If the status is “Pending” , which is second stage, I would like to show Yellow color and along with first stage as blue color.

Thanks,
Narendra

Welcome Narendra and great question!

Progress bars are an out of the box control that have 3 states –

  • default - steps that are not considered active or completed
  • active - The current value
  • completed - Steps prior to the current value

One way I can think of doing this, is modifying the circle background and border color of the active state to be yellow and have all the completed states be blue.

To do this go to Theme Builder and look for the ProgressBar Variant under the Theme. Then click on circle.

From here you can change the background and border of the circles based on the circle state.

You can see here i’ve changed the active state background and border color to yellow:

Now when I go back to web builder, and making “Pending” my active state, it is orange while “New” is blue.

Does this answer your question @Narendra?

Thank you Ismaen for quick response! I understand the progress bar out of the box control states.
My requirement here is, Let’s say I have 4 status such as New (Blue), Pending (yellow), Review(orange) and Approved (Green).
if My claim status is Approved, I want to show different colors for previous status as well. so my progress bar should contain Blue, Yellow, Orange and Green colors part of my progress bar.
If My claim status is Review state, then my progress bar should contain Blue, yellow and Orange colors. And so on…

Basically, I want to show different colors for completed states.
Is this something feasible ?

Got it, so showing different colors for each stage of your progress bar doesn’t seem possible, but what I’d recommend is using a repeater and changing the background color or whatever style you’d like based on the data. For example, you can see here, I have a “Where Is My Order” application and for each row, there is a different image. The way I do that is I have a List that takes a list of data:

For example, the data can look something like this:

[
  {
    "name": "Ismaen",
    "tracking_id": "123456",
    "status": "New"
  },
  {
    "name": "Ismaen",
    "tracking_id": "123456",
    "status": "Pending"
  },
  {
    "name": "ismaen",
    "tracking_id": "123324",
    "status": "Approved"
  }
]

Then, on any property that I’d like to be dynamic, such as the Font Color of the label, I can do a conditional that will essentially check to see if the status is equal to any of the statuses, then have the color reflect it. This would look like:

IF(
  item.status
    = "New",
  "#0000FF",
  IF(
    item.status
      = "Pending",
    "#FFA701",
    IF(
      item.status
        = "Approved",
      "#00FF00"
    )
  )
)

I hope this helps!

Thank you again Ismaen ! I really appreciate for all your answers! Our business requirement is to show these statuses in Progress bar type but not list.
Thanks,
Narendra

1 Like

Another approach could be to adjust the width and background color of a component. For example, you can add a button to represent the progress bar.
Then based on the status level, set the properties to 25% width / Blue background, 50% width / Orange background, etc.

1 Like