Action Scheduler - Apply dynamic formatting ("transition") for changed "delta" values/rows

[Akayy]

Dear all,

Spent hours trying to figure this out, any help will be appreciated. I’m new to wappler, so still learning to harness the hidden powers!

I’m quite familiar with dynamic formatting of data when rendering a table for the first time. But, I’m struggling with applying the same for the “delta” during a refresh of current data.

Here is what I want to do:

• I have a table of data (server connect component GETs data from my API in json format)
• I’m running an action scheduler to refresh this table of data every minute (pull data from the same API), which is working fine
• Now, I want to highlight (flash the transition for few milliseconds) those values in the table that were updated during this one minute pull. If there was a new row added to the table, the whole row should be flashed.

Any idea how to achieve this, thanks in advance

[scott]

@Akayy, does your data have a timestamp field that can be referenced ?

[Akayy]

@scott, Yes, I do have a timestamp and also a primary key column in each row.

My table uses repeat children. I was thinking of loading the before & after table data into two variables, do a compare and then figure out which rows changed & then do the highlight, but haven’t got anywhere with this.

I’m sure there should be some other smart approach, probably “dynamic” or “static events” on each row?

[scott]

@Akayy, I do not know if this is the best way, but my initial thought would be to compare the records retrived with the current time and then highlight the row that matches the condition you enter.

This might help steer you in the right direction.

Working with Current Date and Time

and

Set Table Row Background Color with Dynamic Value

You can change the table row background color, depending on a dynamic value from your database thanks to the dynamic attributes available in Wappler. In this tutorial we will show you how to use the default background color classes available in Bootstrap 4, but you can assign your own classes to the table rows. We created a dynamic table, which shows the data from our database. We want to use a red background when the quantity from the database is less than 50: [Screenshot_5] Select the table…

[Akayy]

Looks like this might not be as simple as I thought. Might have to compare before & after the pull (action scheduler) and then apply transition on the old set of data… still working on it!

Wish Web Sockets were supported as a wappler component, so that we can real-time update the specific data on our page instead of refreshing all data via pull query. Other web socket use cases - Push notifications, Social feeds, Chat, Financial tickers, etc…

I hope web sockets & better API support are in your backlog!