Custom show progress and hide progress in mendix native

2
Hello Team, In mendix native there is a default show progress and hide progress but I want to add a custom gif file for loader. I want to use my gif file for show progress and hide progress in nanoflows. Kindly update.
asked
2 answers
3

Hello Jayasree,

 

I believe you can use an adapted approach from this article:

https://vstram.medium.com/easy-toast-notifications-with-mendix-native-mobile-android-application-18b1212435dc

 

Basically you have to use an Static Image (which can also show animated GIFs) and an associated text, both inside a container with custom styling and with a conditional visibility.

image.png

image.png

 

Your logic should determine when the loader is visible or not. In this example, I'm using a timer for that:

image.png

 

After some adjustments from the described in the article, I achieved this result:

loader.gif

 

This is the custom styled used in the container:

 

import {Dimensions} from 'react-native';

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

export const containerLoader = {
    container: {
      position: "absolute",
      bottom: windowHeight/2,
      paddingHorizontal: 25,
      alignSelf: "center",
      alignItems: "center",
      height: 45,
      borderRadius: 5,
      justifyContent: "center",
      backgroundColor: "lightgray",
      opacity: 0.9,
      zIndex: 999999,
    },
};

 

I hope this helps!

 

answered
0

Hello Jayasree,

 

I'm glad it worked!

 

However, it would be better if we have a standalone RN library "GifPopupMessage", similar to ToastAndroid which we could call anywhere from a JavaScript action.

 

Since such library isn't available, we have to find an alternative MX solution. A feasible solution is described below:

In your case, you can associate the Loader NPE with a System.Session:

image.png

 

Create a DS that instantiates and associates the Loader with the Session:

image.png

 

Here I'm using the new Mx10.5 feature

length($LoaderList) != 0

in the Decision activity, but you can also test if the Head(LoaderList) != empty and create it when needed

 

Create a Snippet without parameters that encapsulate the GIF and the message. In this snippet a DataView should use the DS from the picture above

image.png

 

Then put this Snippet inside the page Layout you are using on your application.

image.png

 

All pages that use this template will get access to the Loader via the (part) of the NF shown below:

image.png

 

This NF can be called from anywhere, since it relies on the Session to get the Loader.

 

The procedure shown here will result similar to the previously answered, with the difference that now the Loader is available anywhere thanks to its association with the Session.

 

The drawback is that the Session is volatile, it is deleted after 10min of inactivity

https://docs.mendix.com/refguide/custom-settings/#SessionTimeout

 

Not sure the impact this limitation in the proposed solution. Probably after the timeout, the Loader will not be shown. To be verified  ...

 

Would like to hear from the Mendix Experts if they have a better solution for this...

answered