In some cases, highlighting events in a user interface can be very useful. It’s a powerful way to inform users about what has happened after certain actions.

For instance, imagine users are required to select a shop from a multi-column Popup LOV that displays the shop addresses for easier identification. If users select a shop by name, they might not immediately confirm that their selection is correct.

In such cases, you might use additional outputs in the Popup LOV to populate read-only items, allowing users to validate their choice.

However, simply updating the item values may not be as clear or effective for the user. This is why a small trick to highlight changes in the user interface can be very helpful just with a bit of custom CSS and JavaScript.

Here are the steps:

1. Include the following CSS classes in your custom CSS code in Theme Roller:

@keyframes highlight {    
    50% {background-color: var(--u-color-22);}
    100% { background-color: var(--a-field-input-background-color); }
}
.active {
    background-color: var(--a-field-input-background-color);
    animation-name: highlight;
    animation-duration: 1.5s;
}

2. Add a custom CSS class (e.g., 'ihighlight') to all the items you want to highlight. You can do this in the item properties under Advance > CSS classes

3. 

   Create an On Change Dynamic Action in the item that will trigger the highlight

4. Add this small JavaScript snippet to the True action

$('.ihighlight').removeClass('active').trigger('focus').select();
setTimeout(function () { $('.ihighlight').addClass('active');}, 100);

The result should be something like this:

Enjoy Life!