Progress Indicator in Tables

You can add a progress indicator in the list report or in a responsive table in the object page view.

The progress indicator allows you to visually represent the level of completion of, for example, a project or a goal.

It can be used to express completion values either as a percentage or as absolute numbers (for example, 8 of 10).

Figure 1: Progress Indicator

Code Samples

The code samples below show a progress indicator that expresses the value of the field Product Revenue from the back-end system.

Add Progress Indicator: Percentage

If the back-end system provides a percentage value for the relevant field, add the type #AS_DATAPOINT to the relevant lineItem annotation and the @UI.dataPoint: {visualization: #PROGRESS} annotation for the relevant field as shown below:

@UI.lineItem: {position:30, type:#AS_DATAPOINT}
				
@UI.dataPoint: {visualization:#PROGRESS}

Product.Revenue

Add Progress Indicator: Absolute Numbers

If the back-end system does not provide a percentage value, assign a value to the targetValueElement property of the data point which is then deemed to be 100%. (In this example, this represents the field TargetRevenue.) If you want to use a fixed value as the target value, you can set the targetValue property to this value instead, which is then deemed to be 100%.

@UI.lineItem: {position:30, type:#AS_DATAPOINT}
				
@UI.dataPoint: {targetValueElement:'TargetRevenue', visualization:#PROGRESS}

Product.Revenue

Change Color of Progress Bar

If desired, you can set up the progress bar so that it changes color to reflect the state of the progress depending on the criticality value as shown in the figure below.

Figure 2: Progress Indicator: Colors Reflect State of Progress

To do so, assign a value to the criticality property. In the example below, this is determined by the RevenueCriticality field from the back-end system:

@UI.lineItem: {position:30, type:#AS_DATAPOINT, criticality:'RevenueCriticality'}
					
@UI.dataPoint: {targetValueElement:'TargetRevenue', visualization:#PROGRESS}

Product.Revenue