Progressbar in a listform component

Questions and answers on designing your Servoy solutions, database modelling and other 'how do I do this' that don't fit in any of the other categories

Progressbar in a listform component

Postby rick.eddy » Tue Apr 11, 2023 7:21 pm

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!
rick.eddy
 
Posts: 6
Joined: Tue Apr 11, 2023 7:12 pm

Re: Progressbar in a listform component

Postby patrick » Tue Apr 11, 2023 8:17 pm

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:

Code: Select all
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

<div class="svy-listformcomponent-row yourCalculationResult">
...
<class="progress-bar text-bg-info progress-bar-animated">

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

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


and you get

Screenshot 2023-04-11 201344.png
Screenshot 2023-04-11 201344.png (1.84 KiB) Viewed 1851 times


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.
Patrick Ruhsert
Servoy DACH
patrick
 
Posts: 3703
Joined: Wed Jun 11, 2003 10:33 am
Location: Munich, Germany

Re: Progressbar in a listform component

Postby rick.eddy » Wed Jun 14, 2023 4:38 pm

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
rick.eddy
 
Posts: 6
Joined: Tue Apr 11, 2023 7:12 pm


Return to Programming with Servoy

Who is online

Users browsing this forum: No registered users and 7 guests

cron