MultiColorProgressBar

Stable Version 1.0.0 (OutSystems 11)
Published on 22 Feb (13 days ago) by 
Moxie Dream Team
Moxie Dream Team
Created on 22 Feb (13 days ago)

MultiColorProgressBar

Details
The MultiColorProgressBar allows you to show up to 7 different stages of progress in a single progress bar (each stage using a respective color). You can also show a legend that shows a simple description of what each stage refers to.
Read More

Key features:

  • Up to 7 different stages displayed visually in a single progress bar;

  • A Legend that displays the percentage and color of the progress bar along with a description that may be provided;

  • Customizable size;

  • Customizable shape;

  • OutSystemsUIWeb dependent (Color, Shape and ProgressBarSize).


Inputs:

  • PercentagesAndColors (mandatory) - A list with all the percentages and colors to be shown. It uses the PercentageAndColor structure defined in the module;

  • HasLegend (mandatory) - If you want the Legend to be shown or not;

  • Shape (non-mandatory) - Use the records from the OutSystemsUIWeb.Shape static entity;

  • Size (non-mandatory) - Use the records from the OutSystemsUIWeb.Size static entity;


This pattern was created because we felt the need to show more than one stage in a single progress bar. As the ProgressBar component from the OutSystemsUIWeb module only supports one stage, we created this pattern.


A list of PercentageAndColor is expected as an input. This way you may control which colors and percentage you want for each stage. You can also add a simple description for each stage to be displayed in a legend, but this is not mandatory.


We use a CSS gradient to show the colors and, because of that, there is a limitation with the amount of stages to show. This version supports up to 7 stages.


The MultiColorProgressBar might come in handy when we want to give the perception of progress divided by multiple stages.


Example:

Control your expenses to match a maximum annual budget.

Total expenses in the previous months of the year: 2.000€

Total expenses in the current month: 100€

Total budget for this year: 3.000€


With the MultiColorProgressBar you can show how your are progressing towards your budget but having a view over time of the expenses.  In this case you can view the expenses in the current month (orange) in a different color from the previous months of the same year (red) while tracking the value for the year's budget. The remaining value of the budget will be shown in grey.

Reviews (0)
Category
User interface, Progress indicators
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from Moxie Dream Team who created this component.
Dependencies
MultiColorProgressBar has no dependencies.
Requirements
Platform:
11.0.606.0
Database:
All
Stack:
.NET
Component Consumers
No consumers yet.
Weekly Downloads