Information overload occurs when the amount of input to a system exceeds its processing capacity.

We all have to deal with information overload every day. But it is our duty as developers to ease our users’ burden when it comes to presenting data.

If an icon or other visual cue will help with number processing, use it! When it comes to a statistic such as ‘percent complete’ or ‘progress’, give them a nice CSS Progress Bar that will help them immediately see where things stand with a quick, visual scan.

1. CSS you’ll need

You just need 2 little CSS classes to make the magic happen.

.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #cfdae4;
    border-radius: .25rem;
}

2. Where to put the CSS

You have a few options here.

Universal Theme – Theme Roller

If you’re using the Universal Theme, simply pop out Theme Roller from your Developer Toolbar, and add it to the Custom CSS section

Add your Progress Bar CSS to Theme Roller in Custom CSS

You can also link to an external CSS file in the Cascading Style Sheets section of your Application Attributes –> User Interface. These files can be external files that you reference with their full path, or file you have uploaded to your Application’s Static Files in Shared Components.

Link to external CSS files

3. Use the CSS class in your reports

Again, there are multiple ways to do this.

HTML Expression

If you only need your Bootstrap Progress Bar in a single report, you can use the HTML Expression method in a Classic Report

Assuming you have a column in your query that is PERCENT_COMPLETE, you could put this in the corresponding column HTML expression field:

HTML Expression to rendre Progress Bar

Function call in your query

If you need your progress bar in an Interactive Report, or you think you might want to render it in multiple places, it would be good practice to put this code in a package and call it in your query.

Sample function in a package called UTIL_PKG

Then your query would then look something like this:

select task_name
,start_date
,util_pkg.progress_bar(percent_complete) percent_complete
from task_table
Bootstrap Progress Bar
Resulting Report

Tell me that isn’t a lot easier for your users to process than a bunch of numbers! A quick scan will show them which tasks still need attention

As developers, it’s sometimes too easy to forget about the little tricks that will make our end-users’ experience better.

It’s what makes the difference between an application that meets basic requirements, and an application that will knock their socks off!

APEXionately yours,

Michelle