Create loading component in OutSystems

In the real-world scenario, we must prevent users from taking any action on a screen when the data is loading or saving. In OutSystems, we use web block to create a reusable loading component.

First, let’s create block and named it Block_Loading.

Create Block

Add input parameter and name it IsLoading (boolean)

Add Input variable

Add a container widget inside the block and set the value of the Style Classes property to “popup-backdrop” then, set the value of attribute data-popup-backdrop to “data-popup-backdrop”.

Container style

Add an Icon widget inside the container and set values follow the details below

Icon : spinner, Size : 4x font size, Style Classes “icon spinner”

Loading icon

Enclose the container inside an if condition where IsLoading is False, and move the container to the False branch.

Enclose in If

On your screen, create a local variable to handle showing or hiding the loading component

Screen variable

Add the loading block inside the screen and pass the IsLoading variable to the component.

When the variable IsLoading changes to True, the loading component will appear on the screen.

Button Action

Loading screen

Inside your button, the save logic should look like this.

Button Save logic

Finally, I would like to leave you with the ways to follow Bluebik Vulcan.

Website: https://www.vulcan.bluebik.com/ Facebook: https://www.facebook.com/bluebikvulcan Medium: https://medium.com/@bluebikvulcan Youtube: https://www.youtube.com/@BluebikVulcan_2023 LinkedIn — linkedin.com/company/bluebik-vulcan/

Written by: Yossapon Pornparisa, Technical Consultant, Bluebik Vulcan

BluebikVulcan #MakeRealityAlive​​​​​​​​​​​​​​