Changing Background Color of Progress Bars

[Alex_Brugh]

Hello,

I want to be able to change the color of a progress bar depending on the value it has.
For example
<80-green
<95-yellow

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
	returned_rows.append(row_dict)
return returned_rows

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

Thank you!

[Alex_Brugh]

Forgot to mention this is all in a table.

Thank you!

[cmallonee]

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.

[Alex_Brugh]

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?

[cmallonee]

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 Progress.props.bar.color 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 Progress.props.bar.color binding and transform:

My result in a Table:

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.

[Alex_Brugh]

@cmallonee

Flex root container),

okay thank you, I will try this

[dcan87]

@cmallonee I attempted this yesterday on Ignition Platform 8.1.20 and it did not work unfortunately.

[cmallonee]

I just re-did it myself and verified it does work. Please go back and verify you followed the instructions to the letter.

If you're still unable to get it working, there are a few likely breaking points that could be causing your problems:

1. This is entirely dependent on the data of the column being a pure value, like population in this snippet:

{
  "city": {
    "align": "center",
    "editable": true,
    "justify": "left",
    "style": {
      "backgroundColor": "#F7901D",
      "classes": "some-class"
    },
    "value": "Folsom"
  },
  "country": "United States",
  "population": 77271
}

If I had tried something similar with city or country, this would not work because the View used for the column is expecting a singular value to be passed to the View as a param.
2. Expression input fields are notoriously finnicky and will appear as if you've committed a value when in fact you have not. When you're applying your Map transform, type out your value and hit Enter for EVERY field.
3. Make sure that Table.props.columns[x].field is a case-sensitive match to the column you're trying to pass to the View.