Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase
Frequently Asked Questions

Progress Bar While Data Is Loading

Give your users something to look at while the data is loading

Blank Profile Image
Written by David Knapp
Updated 3 years ago
Less than a minute read

If you are loading a large amount of data or the user has a slow connection, it is best to not show the page content until everything is loaded.

Example Page

In this example, the Suppliers page has a breadcrumb, table and add button:

Suppliers definition page with breadcrumb

The suppliers array is set to read automatically.

Add a Progress Bar

Start by adding a progress bar and setting the mode to "indeterminate":

Suppliers page with progress bar

If you run your app like this, the progress bar will always be shown and that is not very helpful.

Make the Progress Bar Conditional

Add an "if" attribute to the progress bar and only show it when the suppliers array is reading:

Suppliers page with conditional progress bar

That's a little better but the breadcrumb and table move down to make room for the progress bar and then move back up again after the suppliers are read - not very nice.

Make the Rest of the Page Conditional

Add a container after the progress bar, set it to be conditional and move the rest of the page content into the container:

Suppliers page with full conditionality

Progress Bar for Multiple Reads

If the progress bar should be shown until multiple things are read, you can make the progress bar condition an "or":

supplier.reading || locations.reading

And the container condition and "and":

!supplier.reading && !locations.reading

Progress Bar with Post Processing

If you need to complete other processing after the information is read, you can add a "loading" boolean property and set that after your processing is complete.

Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants