How to Display Loading Effect on ProcessMaker Dynaforms

'dipo majekodunmi
dipoleDIAMOND
Published in
1 min readNov 12, 2017
Before and After Video Showing Loading Effect

When working with dynaforms in ProcessMaker, we sometimes have to perform long-running tasks in the background such as fetching data from a remote server or API based on user’s input. Often times, this background task is triggered by a change on the form and the user might be unaware of the task running in the background. It is a good UX practice to provide a visual cue to the user that the system is busy.

Since ProcessMaker already has a “Loading Effect” that is displayed when logging in and submitting the form, we can keep the user experience consistent by using the same effect.

To achieve the effect, add these two functions to your dynaform.

To trigger the effect, call the showLoading() function before the long-running task starts and the hideLoading() function on completion of the task or if an error occurs. The code snippet below shows how the functions are used when making an AJAX call to fetch data from a remote server.

--

--