Changing Background Color of Progress Bars


I want to be able to change the color of a progress bar depending on the value it has.
For example

I came up with this code that allows me to do what I want, but with the background of the cell and not the progress bar.

returned_rows = []
for row in value:
	row_dict = {}
	row_dict['Job Number'] = row.a
	row_dict['Budgeted Hrs'] = row.b
	row_dict['Time Hrs'] = row.c
	progress = row.d
	if progress == None:
		progress = None
	elif int(progress) < 80.0:
		progress = {"value": progress, "style": {"backgroundColor": "#47FF47"}}
	elif int(progress) < 95.0:
		progress = {'value': progress, 'style': {'backgroundColor': '#FFFF47'}}
	elif int(progress) > 95.0:
		progress = {"value": progress,  "style": {"backgroundColor": "#FF0000"}}
	row_dict['Progress(Percent)'] = progress
	row_dict['Assigned To'] = row.e
	row_dict['Completion Date'] = row.f
return returned_rows

Could someone tell me how to apply this to the progress bar?

Thank you!

Forgot to mention this is all in a table.

Thank you!

It really depends on your setup. If you’re using the Table’s built-in progress bar, then you are unable to dynamically set the color of the progress bar. If you’re rendering a View in that column and the View has a progress bar, then you should set the appearance rules in the View, - not the Table.

I’m using the table’s built in progress bar. Would I need to switch to rendering a view? Can I achieve to same goal by doing this?

If you want to dynamically set the color based on some value, then yes - you would need to switch to using a View.

  1. Create a new View somewhere in your project (I recommend a Flex root container), and set the View’s dimensions to be something reasonable (probably 80x40, or something like that).
  2. Create a param named “value” for the View, and give it a value of 0.
  3. Place a Progress Bar into this View.
  4. Set Progress.props.max to some value which makes sense for your use-case.
  5. Bind Progress.props.value against the value param you just created.
  6. Bind against Progress.props.value, and supply a Map transform, where the input values are numeric and the output values are Colors.
  7. In your column config of the Table, change the render type to “view”, and make sure to set the viewPath property to the path of the view you placed your progress bar in.

My binding and transform:

My result in a Table:
Screen Shot 2022-07-19 at 10.37.20 AM

EDIT: I realized after the fact that some changes I had made to the transform had not committed because I failed to supply them properly.

okay thank you, I will try this