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.
transition: width .6s ease;
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
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.
3. Use the CSS class in your reports
Again, there are multiple ways to do this.
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:
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:
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!