Wednesday, 25 March 2020

JET - show global processing icon

JET - v7.2.0
Source: GitHub

This is a quick demonstration on how to setup an application wide processing icon, which may be displayed every time a lengthy operation is in progress, and you don't want the user to perform anything else in the meantime.

JET provides a useful component - oj-progress - which may be used effectively for this purpose. This, along with some nice CSS tricks for creating an overlay, can solve our problem.


The oj-progress component is displayed on some boolean condition being set to true, and is hidden when the condition is set to false.

The component is placed at the root of the application, in index.html, so that it may be accessible to all child modules. The control is in appController.js, which is registered with the window object, so that the module may be accessed by any component, without the need to explicitly load it in the define block.



Cheers!

No comments:

Post a Comment