Progressbar in a listform component

Questions
1

I am very new to using the servoy IDE, so please bear with me if I misstate or forget to ask in the proper way.

I have added a progressbar to a listview form component. I can have a different pct value for each record in the listform and those display great. What I need to solve and I can’t seem to figure out is, how to make the progressbar color different based on the value of the pct of each record. For example, we want values less that 70% to be red, then less than 90% to be yellow and above that to be green.

I see a property on the component for type, which would allow me to change the color (or just adding css styles…) what I can’t seem to figure out is how to find each listform component’s records’ components at run time so I could change either the type or classes.

So if I have 3 records showing on my form, how do i find each progress bar programmatically. The second question would be, what event would be best to use to kick off this process? I am thinking the onShow of the listform.

Thanks in Advance for any help!

2

Hello rick.eddy and welcome to Servoy.

Your question is actually not that easy to answer, the only way I found is rather “advanced”. Let me quickly describe what I did:

The list form component has a rowStyleClassDataprovider property where you can attach a dataprovider that will be used to add a style class per row on the list form entry. A typical way such style class dataproviders are used is by attaching a calculation, that looks at your record and decides what style class to return if your record meets a certain criteria

In my test I used the example_data database and created a list form with order details and let the progress bar show the “quantity”. Then I created a calculation that roughly does this:

function row_styleclass()
{
	if (quantity <= 5) {
		return 'red';
	} else if (quantity <= 10) {
		return 'orange';
	} else {
		return 'green'
	}
}

So depending on the quantity it returns a style class ‘red’, ‘orange’ or ‘green’.

In the DOM the actual row is way above your progress bar. If you inspect the progress bar in the DOM a bit, you see the structure is roughly

...

So somewhere you have the svy-listformcomponent-row for each record, which also then has the value of your rowStyleClassDataprovider.

Then in your style sheet you could have something like this

.svy-listformcomponent-row.red .bts-extra-progressbar > .progress-bar {
	background-color: red !important;
}

and you get

[attachment=0]Screenshot 2023-04-11 201344.png[/attachment]

I hope you don’t have the impression everything is terribly complicated :). It seems to be something nobody has asked about before. I think a nicer and more straight forward way would be that the progress bar component would have a rowStyleClassDataprovider by itself, for which you could file a feature request.

Screenshot 2023-04-11 201344.png
Screenshot 2023-04-11 201344.png410×157 868 Bytes

3

Patrick,

thank you for your reply! I am sorry I didn’t circle back on this until now. What we ended up doing is using a label component that returned HTML. The html is rendering the whole progress bar for each record so we had control to write whatever style we wanted.

Rick