Refresh UI component on external REST API call

Refresh UI component on external REST API call

  

Hi,

I have an exposed REST API and an UI component (Label) in outsystems.

The REST API insert some data on database.

So, my requirement is, when my external application insert a data using REST API in outsystems the UI component update its value automatically (real-time). 

How it is possible in outsystems?

Hi Sowvik,

You can use one of the many push-services to refresh a specific (part of your) screen.

Hopefully these resources can help you develop what you want.

Kind regards,

Remco Dekkinga

Solution

I have answered the question on StackOverflow.

I repeat here:
---------------------------------------------------------------------------------------------------------

You can start a process on an insert on an entity. But this will not refresh the UI.

To refresh the UI, you can use Javascript to refresh the page periodically.

You need to add two expressions to the page. The first one at the top of the page (i.e. first element in MainContent section), and the second one in the Footer section.

Add some Javascript to the expressions as the Value.

  • First expression: "<script>function refresh(){setTimeout(function(){ $('#"+RefreshButton.Id+"').click();refresh(); }, 5000);};</script>"
  • Second expression: "<script>refresh();</script>"

NOTE: Remember to set Escape Content to No on both expressions!

Solution

It's a nice work-around and a valid and free option in some cases, like dashboards. This solution will refresh your page every 5 seconds and is not real-time. If your user is also working on that page (like you do with chat apps), this solution won't work. 

Absolutely agree with you, Remco. Not the ideal, but at least you can get a refresh on a dashboard interface or a page where user interaction is not that frequent.

Thanks Hanno for your reply.

My objective is to draw a 'real-time' graph out of the data. And when new data comes in, I would like the existing points to slide left, and the new point show up on the graph. Are you sure refreshing the whole dashboard would have the same effect?

By the way, I expect the new data updates to come at regular intervals (may be half a minute or so). (So it appears as real time to the user).

Thanks

Sowvik

Hanno Coetzee wrote:

I have answered the question on StackOverflow.

I repeat here:
---------------------------------------------------------------------------------------------------------

You can start a process on an insert on an entity. But this will not refresh the UI.

To refresh the UI, you can use Javascript to refresh the page periodically.

You need to add two expressions to the page. The first one at the top of the page (i.e. first element in MainContent section), and the second one in the Footer section.

Add some Javascript to the expressions as the Value.

  • First expression: "<script>function refresh(){setTimeout(function(){ $('#"+RefreshButton.Id+"').click();refresh(); }, 5000);};</script>"
  • Second expression: "<script>refresh();</script>"

NOTE: Remember to set Escape Content to No on both expressions!



Hi Sowvik

What you could do is to add a hidden button to the screen that will refresh a specific graph/chart. Then use jquery to click the button frequently.  That should refresh only the section of the screen that you want. 

Hope this helps. 

Hanno