RAP - Criticality

Table of contents

• Introduction
• Preparation
• Field
• Row
• Button
• Complete Example
• Conclusion

In this article, we'll look at the possibilities you can control with criticality in RAP and what UI features you can implement with it.

 

Introduction

In the last article, we enhanced our Sales App with Icons and made it a bit more dynamic. Therefore, in this article, we want to take another detailed look at criticality and what else you can customize with it. The goal is to symbolize a certain status using color and/or an icon.

 

Preparation

In the preparation phase, we need a field that represents the criticality. As in most cases so far, we will use a virtual element for this. We want to derive the information directly from the calculated month, but not store this information in the database or in the draft. In terms of data type, we only need an INT1 field, since we only need to represent very few values with it.

        @ObjectModel.virtualElementCalculatedBy: 'ABAP:ZCL_BS_DEMO_RAP_SALES_VE'
virtual DataCriticality : abap.int1,

 

To do this, we extend the CALCULATE method. In this case, we add the information when we also derive the month, since we want to determine the color based on this, in order to check the possible values. To do this, we bind the different values to the different months and populate the new field with them. As a test, we use the values from 0-6, which we assign to the different times.

original->DataCriticality = SWITCH #( original->SalesMonth
    WHEN '01' THEN 0
    WHEN '02' THEN 1
    WHEN '03' THEN 2
    WHEN '10' THEN 3
    WHEN '11' THEN 4
    WHEN '12' THEN 5
    ELSE           6 ).

 

Field

To assign criticality to a field, you have two annotations available. Using "criticality", you assign the field which defines the value for the color. Using "criticalityRepresentation", you can also determine whether an icon is displayed for a field. We can include this information in the standard outputs and thus change the field in the output.

@UI.lineItem: [ { position: 33, criticality: 'DataCriticality', criticalityRepresentation: #WITH_ICON  } ]
@UI.identification: [ { position: 33 , qualifier: 'GENERAL', criticality: 'DataCriticality', criticalityRepresentation: #WITH_ICON } ]
SalesMonth;

 

As a result, we get the months in different colors and together with icons. You can control whether an icon is displayed or only the text is highlighted using "criticalityRepresentation".

 

Contrary to some sources on the internet, the color scale has changed slightly over time. Zero or other meaningless values are now displayed normally and no longer in gray. Blue has also been added to the other values. You will find a brief overview in the table.

 

Row

In the List Report, you can also mark the row and are not dependent on a field. This helps if you are unsure whether the required information is also displayed in the list. To do this, you define the annotation for LineItem at the header level of the Core Data Service and set the criticality there.

@UI.lineItem: [{criticality: 'DataCriticality'}]

 

This adds a color marker to the beginning of the line. This follows the same rules as for the fields when it comes to the different colors.

 

Button

We already changed the color of a button in the UI in the article for the different positions of the buttons. You can also use the criticality attribute and specify it in the button's properties.

 

Complete Example

You can find the complete example in GitHub in the corresponding package for the Sales App. The changes from this article can be found in this Commit and you can follow the changes, plus the additional information.

 

Conclusion

If a particular point requires more attention, you can highlight it using criticality. This property helps your users better understand and recognize important points or priorities. Implementation is quite easy and it can be easily integrated via UI annotation.

 

Source:
UI5 - Highlighting Line Items Based on Criticality