Dynamically change the color based on the two property match results

i have current information in the case, i am fetching the information with external after that get the data like this

Attribute Name Current Information External API information

Name Eswar Eswar Reddy
DOB 22/05/1999 22/05/1999
Age 25 25

based above result i want to change the color dynamically in the ui, which layout i want take, and how can change dynamically matched color green not
matched i want to display yellow, how can i implement above use case, Could you please help some one(11 properties results i want match)

@nageswaraReddyChalla The layout choice can be made based on how you want to structure the data.

For the dynamic color you would need to use the Pega Helper classes but with property reference.

Example :

First write two css classes definition in your custom css file :

.correctData{

background-color : green;

}

.inCorrectData {

background-color : yellow;

}

Now on the text input field under the Presentation Tab → Advanced Presentation options → Create one property (CustomProp) and place in your cell read-write class and cell read only class

Now you can manipulate the value been sourced to this property via a DT based on the data value.

If the Data value is correct set CustomProp = correctData or else CustomProp = incorrectData

At run time pega will append the classes based on the DT and the required css code would render based on the css definition we have written earlier.