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.