Introducing the FOEX Progress Bar page-item plugin

One of the new interesting components introduced in version 3.1 of the FOEX Plugin Framework is the Progress Bar. It is ideal for tracking long-running processes or used as a static visual indicator to show the progress achieved on a specific task/activity.

This page-item plugin can be used in the toolbar, a form or as an individual item outside of the form. It comes with a set of dynamic actions and several options to customize its colors to satisfy your users’ requirements. Let’s take a deeper look into its features and options.

FOEX Progress Bar


The Width of the progress bar may be specified as either an absolute value in pixels or a percentage of its parent container. There are some cases when this width will not be respected, such as when it is inside of a form (fieldset, etc.) and the container’s layout is set to “Stretch Items (anchor)”.

The Text is the label inside the progress bar. It supports front-end substitutions using the #SOME_PAGE_ITEM# format. It is possible to show the percentage of the progress as well. This value is always an integer value, decimal places are not shown.

The color options deserve some explanation:

FOEX Progress Bar - color settings

  • Background Colour – this one is pretty clear, it is the color of the background of the progress bar, i.e. the part that is being filled and overlapped by the progress-section of the bar.
  • Bar Colour – this is the color of the bar that is showing the progress, i.e. the filler-bar.
  • Background Text Colourthe color of the text over the background (i.e. unfilled part).
  • Bar Text Colourthe color of the text over the bar (i.e. filled part).
  • Bar Colour Points – this attribute allows great color customization as you can set various colors for the bar using ‘points’ (percentage values) separated by a semi-colon. When one of the points has been reached, the bar changes color to the color specified by this point.

The format is the following: percentage%-valid_css_colour .

Please note CSS/HTML colour names are not supported (e.g. ‘red’ will not work) but you can use HEX, rgb(a), hsl(a).


This setting will always overwrite the “Bar Colour” setting. The reason for this is that you may use two keywords as the valid_css_color : default and theme.

  • When using default the color for that point will grab the color from the “Bar Colour” attribute (if you specified any).
  • Using theme will use the theme’s color scheme to paint the bar. That means the bar would be blue in the FOEX Triton theme or green in Triton Dark, etc.

You can find usage examples of this attribute in the help of the Progress Bar page item, in the APEX Builder or in the FOEX Documentation (see the direct link at the end of the article).

There are two options to animate the bar – one for the width of the progress, so it doesn’t jump between the values but rather tweens the change, the other one for the color.

This page item has by default no margins, so if you need some additional space between its edges and other items, you may need to pass a margin setting in the Custom Config attribute, e.g. margin: “0 5 20 5”.


Aaand…. action!

The plugin comes with a set of dynamic actions. Most of them are pretty straightforward as they are only the setters for the attributes we mentioned above: you can set all the colors, color points, text/label and the percentage.

Probably the most interesting action is the “Load Progress Start”:

  • provide a PL/SQL function body for this DA that returns a value from 0 to 100 indicating the progress
  • specify the interval of the requests in seconds (The interval starts after the previous request finished, which means that the time between 2 requests may be slightly greater than the interval due to the fact that it may take some milliseconds for the response to arrive). The progress will keep loading either till it reaches the value you provided in “Stop when reached %” attribute or when the request count is reached you provided in “Maximum Requests” attribute. If none of these attributes is set, the loading will go on indefinitely.

You can stop the loading anytime with the “Load Progress Stop” dynamic action.


This concludes our quick tour through the features and options of the Progress Bar item plugin. We recommend that you go and check the demos of the Progress Bar and we hope you will like this new addition to the FOEX plugins family.

Add your comment

Your email address will not be published. Required fields are marked *