Create a Popup to make a custom 'Loading...' effect

Page Id

Sometimes we have a process that takes time to process the data and we need to display some element on the screen that makes the user understand that it is being loaded.

To achieve this effect, in WorkWithPlus for Native Mobile you can use Animated Elements and Sleep Function.

This is how you will see it in execution.

Let's get started!

To get started, add the Animations node by right-clicking on 'Based on template'

Add an 'AnimatedElement' node

Download the file AnimationLoadingJson and create a new File inside the KB with the name AnimationLoadingFile.

Now, create a new class in the Design System AnyPlatform of your application created through the Design System Wizard of WorkWithPlus for Native Mobile.

Here is the code shown in the image below:

.AnimationLoading

    {

        gx-animation-type: idLottie;

        gx-lottie-file: gx-file(AnimationLoadingFile);

    }

Remember not to leave tables without names so that when saving it does not show you a warning.

As we do not want the Popup to be able to close until the process is finished, we disable the closing option by turning off the 'Include Default Actions' option.

Change the Type property of the Animated Element to CenterMessage, so whatever we want to display will be displayed centered on the screen.

On this occasion, to show a Lottie loading icon, we will use GeneXus Animation View. Select the User Control AnimationView so you can include it on the screen.

Now let's add a TextBlock to display a message while it loads. This time it will be 'Loading'.

Now you will need a class to remove the white background to a transparent one, and remove the borders of the popup.
For that, create the class like in the image below:

.TableBackgroundTransparent

    {

        background-color: #0000; //The 4th 0 indicates that it is transparent on the Alpha channel.

        border-style: none;

    }

Add the class to the Animated element node to remove the background and borders.

Add this created class to the TableAnimation table that we previously assigned the name.

Now, assign the percentage that the animation will occupy, and the percentage that the text will occupy within the TableAnimation. In this case it will be 85% and 15%.

Choose the ColorWhite class for the TextBlock.

You also need a button to invoke the popup in this example. Call it BtnCallPopup, with caption Call Popup and Button Class ButtonFillPrimaryRoundHigh.

To the button event you just created, add the following code:

    Do 'AnimatedElement1_Show'
    AnimationLoadingUC.Play()
    &SleepNumber = sleepingProc()
    Do 'AnimatedElement1_Hide'

Before saving the panel, create a procedure called sleepingProc, in this procedure you will use the Sleep function to give the popup a delay so that it does not close immediately.The variable &SleepTime is of type numeric. Also create a rule parm(out:&SleepTime);

Add the following line to the start of the Client Start event:

AnimationLoadingUC.SetAnimation(StyleClass:AnimationLoading, true)

Finally, add the panel to the application menu by changing the 'Include in slide menu' property to True.

Once the application is generated, go to the panel in the menu and press the button, with this, you will see the result of the loading animation.

You can vary the time it takes from the procedure, even changing it to a variable instead of a fixed number, and assign that variable depending on your needs.

That's all. I hope it helps you for your loading screens.

Page Id