PROGRESS INDICATORS.IMPROVING USABILITY.

Are you too always struggling with creating nice looking progress elements in FileMaker to show the user the status of the current task? Well, look no further!

FMProgressIndicator will provide you with the right tools you need to implement such a progress element in FileMaker that is supported on all platforms! All it requires is some basic knowledge on FileMaker. If you have some basic knowledge on Bootstrap this will help you in making full use of the formatting options.

PROGRESS INDICATORS?

We all know that, whenever we are running a long task, the best practice is to inform the user about this. For a task that runs longer than 1 second, it’s best to use an indicator. This way the user always has feedback that the app is still working and performing the task.

HOW DO WE USUALLY DO THIS?

1. By simply doing nothing. Most of the times the cursor switches to a load icon and that’s it. But wait… Isn’t this the same icon that we see whenever the app is stuck and we need to force quit? Yup, that’s the one! It’s up to the user to determine if this time this icon is actually an indicator of a running task. As you can understand this might be confusing for the user, especially whenever a task is long.

2. We forward the user to a FileMaker layout where we display the text “Loading…”. This is already a better practice but without animation or an indication of the progress itself this is static content and does not give the user dynamic feedback on the actual status of the task.
   How we should actually be doing it
   Every time we perform a task that is longer than 1 second, we should forward the user to a layout where he or she can track the process or can confirm the application is still working. FileMaker provides us with various window types that we can use for displaying a dynamic progress indicator.

HOW DOES FMPROGRESSINDICATOR HELP YOU WITH THIS?

Inside the configuration tab you will see that you have two possible progress indicators that can be used (a bar and a spinner). By selecting one of these two you can configure and style the progress element to your needs.

Each progress indicator has its own values that can be configured and styled. As an addition for displaying dynamic text you can make use of Bootstrap classes. FMProgressIndicator supports the latest Bootstrap version. If you are familiar with Bootstrap, you can use this knowledge to your advantage.

Below you will find some examples of the limitless possibilities. Please also take a look at the examples inside the FileMaker file. This should give you a good idea of its capabilities.

Progress bar indicator — Example 1

Progress bar indicator — Example 2

Spinner indicator — Example 3

How is it made?

We make use of the FileMaker web viewer and HTML technology powered by Bootstrap to give us a rich environment to create kickass, nice looking progress indicators.

Now how do I set this up?

The complete guide on how to install an indicator can be found within the tool, but just to show you how easy it is:

1. Copy and paste the required custom function inside your FileMaker solution (use the appropriate function you intend to use):
   • CF_ProgressIndicator_CreateProgressbar — required for display of the progress bar indicator
   • CF_ProgressIndicator_CreateSpinner —required for display of the spinner indicator

2. Copy and paste the script “FMProgressIndicator.Show” to your FileMaker solution.

3. Build and style your own progress indicator by using the configuration tab.

4. Create an empty web viewer with minimal configuration and give the web viewer object a proper name.

5. Create a script where you execute the script step “Perform Script” and call the script “FMProgressIndicator.Show”. The script parameter is the result of your custom configuration.
   (tip: take a look at the example scripts. Don’t forget to add your custom web viewer object name and pause time as parameters!).

That’s all folks!

Once the first two steps are completed, you can create various configurations and paste them as script parameters to see the result. The configuration tab should always give you a perfect example of how the progress element will look.

Now the most interesting part… The FMProgressIndicator tool is completely free, written in FileMaker Pro 18 Advanced and completely open-source under the GNU license. Enjoy!