Fade from Page to Page

I have an app that is used to score a fitness competition. One of the things we would like to do is display the results in realtime. Currently, with the monitor we are using, I can get about 20 names on the display. I would like the ability to fade from the first 20 names to the second 20 names, until all names have been displayed.    I am using the dynamic data grid to display the results.    Is there a good way to fade from one page to the next? Could I use two dynamic grid widgets, one hidden, one not, and have a way to fade from one to the other?   Then I would need to find a way to populate each grid based upon a timer.   Thanks  
2 answers

Hi, Martin Crawford


Step 1: Implement the Fading Effect

  1. Add custom CSS to your Mendix project to create a fade transition. You can do this by adding a stylesheet to your project or by including the CSS directly in your page's custom styles.

Here's an example of CSS for the fading effect:

.fade-in-out { opacity: 0; transition: opacity 1s ease-in-out; }

.fade-in-out.visible { opacity: 1; }


Apply the CSS classes to your data grids based on the `isGrid1Visible` attribute:

  • For Grid1: `class = {if $currentObject/isGrid1Visible then 'fade-in-out visible' else 'fade-in-out'}
  • For Grid2: `class = {if $currentObject/isGrid1Visible then 'fade-in-out' else 'fade-in-out visible'}

Example Microflow (MF_ToggleVisibility)

1. Retrieve the helper entity instance.

2. Toggle the `isGrid1Visible` attribute.

3. Commit the changes.


Timer Configuration

Add the Timer widget to your page and set the interval (e.g., 10 seconds).

Set the microflow to `MF_ToggleVisibility`.


Use the action scheduler widget from the marketplace to trigger a microflow, see https://marketplace.mendix.com/link/component/202363

Create an entity with a counter and association to the data you want to display. In the microflow retrieve the data based on the counter, so if the counter == 0 retrieve the first 20 records and set the counter attribute to 20, then use that value for the offset in the microflow. Once you reached the maximum, reset the counter. Use this microflow as the datasource microflow for the grid and add a second microflow for the action scheduler that refreshes the entity with the count and you should be good to go.