This plug-in is no longer maintained. Please refer to the FOS Progess Bar, which is maintained and offers support.
Check out the Demo: https://apex.oracle.com/pls/apex/f?p=60314:20
A simple item type plug-in displaying a progress bar. It can be used to show a static percentage, or controlled/scripted via Dynamic Actions or JavaScript for dynamic changes.
- Small - 24px height
- Large - 48px height
This is the color of the progress part of the bar. It can be any value accepted as valid CSS, and can be changed dynamically in JavaScript.
- Solid Color
- Animated Stripes
- Regular Page Item
- Floating on Body
- None
- On Bar
- Under Bar
- None
- On Bar
- Under Bar
- Hidden by default
As this plug-in implements the apex.item interface, you can use the following methods:
// Setter Method. Here we set the value to 20% and change the info message, in a 1 second animation
apex.item('P20_PROGRESS_BAR').setValue('20:Loading...:1000');
// Getter Method. This will return "20:Loading...". The animation duration is never included.
var value = apex.item('P20_PROGRESS_BAR').getValue();
// Show/Hide Methods
apex.item('P20_PROGRESS_BAR').show();
apex.item('P20_PROGRESS_BAR').hide();For even more control we can use the methods returned by apexProgressBar(itemName)
/* The most important method here is the setValues method.
* You can provide this method with 2 objects. The values, and the options objects
* The values object can contain the elements "percentage", "message", "color" and "duration".
* The options object so far only contains the element "immediate", which defaults to false.
*/
// This is the same as the above setValue call
apexProgressBar('P20_PROGRESS_BAR').setValues({percentage: 20, message: "Loading...", duration: 1000});
// What we can also do is only change one of these values at a time. The other values are left the same.
apexProgressBar('P20_PROGRESS_BAR').setValues({message: "Loading..."});
// As opposed to the setValue function or dynamic action, this function also allows us to change the color of the progress bar
apexProgressBar('P20_PROGRESS_BAR').setValues({color: "red", duration: 100}); //could be helpful when showing an error
// Remember, successive calls to setValue(s) land the animations in a queue.
// To clear the queue and perform the setValues call immediately, use:
apexProgressBar('P20_PROGRESS_BAR').setValues({percentage: 40}, {immediate: true});
// More specific getter methods
var percentage = apexProgressBar('P20_PROGRESS_BAR').getPercentage();
var message = apexProgressBar('P20_PROGRESS_BAR').getMessage();
var color = apexProgressBar('P20_PROGRESS_BAR').getColor();
// To control the animation queue, we can use the following:
apexProgressBar('P20_PROGRESS_BAR').finish(); //goes immediately to the latest state of the queue
apexProgressBar('P20_PROGRESS_BAR').stop(); //stops the animation and empties the queue- The animation pauses when changing tabs.
2019-06-23 v1.0 initial release
MIT