An enhanced UX with AJUI_Progressbar

Have you ever executed an action, nothing seemed to happen, and you didn’t know if you should click again or continue waiting? There’s no feedback provided, even if the application is performing an action in the background? Perhaps the action requires some time to return a result? As you may know, 4D already provides a built-in progress bar component that makes execution time more tolerable, but if you want something with a more web like design then keep reading, because that’s what the AJUI_Progressbar gives you!

What’s AJUI_Progressbar

The AJUI ProgressBar is a component developed with 4D 17 R3, based on SVG and 4D Worker technology. It allows you to generate progress bars very easily. The component creates a set of properties to define the characteristics and visual rendering of the progress bars. There’s also formulas to access assessors and methods for generating progress bars.

The component contains two types of instances, representing two specific variants of the available progress bars. The first design is a linear style and the second is circular. Each variant has properties specific to their design.

The bars can be assigned numerical values ranging from 0 to 100, but since the displayed text can be customized, it’s possible to visually represent other values. The component uses Worker to refresh the page when generating progress bars. The Worker also has another use: providing the ability to manage animations.

The component offers several methods to customize and manipulate the progress bar using an object and functions. It also provides two methods to retrieve instances for each type of progress bar:

• New AJUI_ProgressBar: Linear progress bar. 
• New AJUI CircularProgressBar: Circular progress bar. 

Both methods return obejcts containing the bar’s properties, their default values, as well as formulas to manipulate them.

The other methods available are prefixed with “HDI” (How do I). These methods allow you to call forms containing examples of how to use the component’s features.

Setting up a linear progress bar

• First, add an image object to a form. This object will be used to host the progress bar. You can add multiple image objects if you want to generate several progress bars simultaneously.
• The second step is to create an instance of the progress bar. You can choose to launch one of the two methods described above. Ideally, the object returned by the method of your choice should be stored in the “Form” variable. It’s also recommended to add a level to the “Form” object. 

Once that’s done, add the name of your image object to the instance. Then for testing, we suggest you modify the value of the progression (default: 0) and activate the animations. To generate your progress bar, just launch the corresponding “launch” formula.

If you’ve added multiple image objects, repeat the second step for each one (one instance per image object).

Here’s what the code for a linear progress bar looks like:

AJUI_Progressbar in depth

More details, as well as a step-by-step tutorial on the component’s use and configuration, are available here. Whether you choose to use the AJUI_Progressbar or 4D’s built-in progress bar component, you’ll reassure users that something is in fact happening. Have fun!