Cool fade in fade out for adding new entries in table (ui5)

[Noel_Hendrikx]

TL;DR

I have a table on the left hand side where I can select an entry. This entry is being handled by a function that pushes the record to the other table (nothing fancy here!). Under the hood we post the entry to a odata service to store it as a favorite in this case. After storing, retrieve all the information back to make sure everything is updated. After the updated version, we select the added record and mark it specially (frontend only). 

Select entry leftNew entry is highlighted in right tableAfter 2 seconds highlighting is gone

This onSelectNetwork event selects the current record and posts it to a Favorites odata service to add the new entry (if it is not there already!):

First it checks if the selected item is already in the favorites list. If not, let's add it. After saving, we get all the favorites again from backend. Now let's find the added record and mark it also as a new record (

favorite.csstransition = "transition")

 All other records will get the csstransition property as well, but it will be set to empty. This property will be used to do some magic!

But before that we need to make sure that our right table is listening to new magic!

The customData makes sure we add something nice there. There is a binding to the new property csstransition (which is for old records empty and for newly created ones set to "transition". You can name it as you want, the two things you need to use are the key and the value names.

CSS

Add to your custom css file the following lines:

That's it!

Your newly added record will be marked as transition, the css will do the trick for 3 seconds. You can play with it ofcourse. I recently noticed and see it on internet as well while ordering that new lines are visually added to your basket. Love to think how we can integrate this more in UI5 and make it part of the framework.