Giter Club home page Giter Club logo

progress-bar's Introduction

Plug-in archived!

This plug-in is no longer maintained. Please refer to the FOS Progess Bar, which is maintained and offers support.

Oracle APEX Plug-in: Progress Bar

Check out the Demo: https://apex.oracle.com/pls/apex/f?p=60314:20

About

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.

Configuration

Size

  • Small - 24px height
  • Large - 48px height

Color

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.

Style

  • Solid Color
  • Animated Stripes

Position

  • Regular Page Item
  • Floating on Body

Show Percentage

  • None
  • On Bar
  • Under Bar

Show Message

  • None
  • On Bar
  • Under Bar

Options

  • Hidden by default

Control

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

Known Issues

  • The animation pauses when changing tabs.

Changelog

2019-06-23 v1.0 initial release

License

MIT

progress-bar's People

Contributors

stefandobre avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

progress-bar's Issues

Use Progress bar with long PL/SQL process

Hi Stephan, great job with the progress bar.
I'm trying to use the "Floating On Body" feature with a long PL/SQL database process.
I need in my loop cursor inform the progress bar with the percent and with dynamic text but I don't know how to do it.
The methods are javascript and I don't know how to interact with them, and how to use inside a cursor.
Could you give me some clues or an example, please?

Thank you very much!!
Marck

Compatibility with 5.1

Thank for this plugin, Can you please guide that how can we used this plugin in 5.1.

Thanks.

How to auto refresh bar

Hi, I think your plugin is just what I need but for the life of me I just can't get it to do what I want :)
Basically when I submit the page, it launches an Apex automation. The automation updates a table with the current step in the process e.g step1 - extract started, step 2 - output fetched, step 3 - file parsed etc.
I've put an sql query on the progress bar item that returns a value e.g 10 for step 1, 40 for step 2 etc. all the way to 100.
What I would like is for the progress bar to be refreshed every 5 secs (or whatever interval) and get updated with the value in the DB. Any ideas how to achieve this ? I've tried timer plugin, ajax callback but I just can't get it to work.
Thanks for your help

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.