Progress bar causing reload of List View when refresh in client is triggered
I have a list view where each list view item contains a progress bar enclosed in a data view. The data view is placed inside list view item and it is used to fetch the entity from which the progress attribute is assigned to progress bar widget. Data view source is set to microflow so that it retrieves the entity required for progress bar. Consider the following about page structure: List view mentioned above is placed inside a data view that listens to a data grid’s selection. Based on selection, the current selected object (data view) is used to retrieve data for the above mentioned list view (placed inside data view) via XPath All the data displayed here is refreshed every 3 seconds by a “refresh in client” triggered from a microflow. This microflow runs using a microflow timer widget and it checks for updates, stores new data and triggers a refresh in client on relevant entities. Now the problem is that the progress bar is causing a reload of the list view which results in the list view flickering/reloading every 3 seconds. All other attributes refresh smoothly without any flicker/reload on the page Removing the progress bar solves the issue. All other data/attributes refresh smoothly without any flickering/reloading of list view Taking progress bar out of the data view and placing it directly inside the list view item also solves the issue Flickering/reloading happens when progress bar is enclosed inside the data view which itself is inside the list view item Nesting of progress bar inside the data view is causing the flickering issue. I have tried replacing the progress bar widget with a simple text widget with same parent data view, no reload/flicker happened in that case. Attribute values are refreshed smoothly Anyone having any clues on how to solve this problem? Is it a limitation of Mendix or I am doing something wrong in the implementation of above scenario? Here is the video recording of list view reloading issue.
Adding my solution as an answer here:
So at the end I solved this problem by implementing a custom progress bar using container and text widgets only for HTML structure and some custom CSS.
You can inspect progress bar widget in browser and see its HTML structure and CSS styling to have an idea on how to implement it
For showing progress (moving the bar), the widget sets the width of inner container that is filled with color to show progress. For example, at 50% progress it will have a width of 50%
Let say we define a step interval of 10%, that means after 10% progress the bar is filled by 10% width. Now after 20% it is filled by 20% width. We will need 10 CSS classes and dynamically apply those classes on the progress container
The condition used in dynamic classes expression will be based on your progress attribute. For example:
if progress >= 0 and progress < 10 then ‘width10’
else if progress >=10 and progress < 20 then ‘width20’
Now the progress attribute of context entity where you placed your custom progress container widget will dynamically change its CSS classes and it will look like a moving progress bar
You can customize the step interval to 5 or 10 or anything else you like
With above implementation I was able to get same result visually as the Mendix progress bar widget and the list view reloading problem was solved.