topic Re: How can you tell when all objects in a Mashup have loaded? in Integration, Extension & APIs

How can you tell when all objects in a Mashup have loaded?

Daniel1 — Sat, 16 Nov 2024 04:07:16 GMT

Hi there,

I have a mashup which displays a couple of simple KPI's and charts, but it can take a second or two to load. What I've added is a pulsing company logo on the screen that is hidden once all data is loaded.

However using $(document).ready(function() or window.onload function() fires as soon as the page is built but still waits a second or two for the object data to be pulled. I'm using app.getObject( method to retrieve the object from the app.

Does anyone have any suggestions on how I can check that an object has loaded, as in pulled data and presenting it to the user so I can then fire the change to hide the pulsing logo?

Thanks in advance!

Re: How can you tell when all objects in a Mashup have loaded?

Daniel1 — Thu, 14 Nov 2019 13:22:46 GMT

Update: I've found that applying the change after calling for the object is slightly better, but there is still lag between this and the object actually being rendered for the user to see.

app.getObject('QVobject-1','xxxxx').then( function ( model ) { document.body.className = "loaded" });

Would love to know how I can check once all objects are loaded!

Re: How can you tell when all objects in a Mashup have loaded?

oz_moyal — Thu, 14 Nov 2019 13:49:01 GMT

Hi,

There is two things here,
One is if u want to know if all objects fisnihed loading - ie all app.getObject are resolved. this is u can do in js by storing all the promises and check if all are resolved. or u can also load the objects in sequence:

app.getObject('QVobject-1','xxxxx').then( function ( model ) { app.getObject('QVobject-2','xxxxx').then( function ( model ) { app.getObject('QVobject-3','xxxxx').then( function ( model ) { document.body.className = "loaded" }) }) });

but the other issue is that app.getobject is resolved when the the data has loaded, but not when the chart is rendedred, so on slow devices the time difference can be noticed.
I did find a way to see when the chart has finished rendering (but i don't think it is documented, so use on your own risk):

app.visualization.get('xxxxx').then(function (vis) { vis.show("QVobject-1", { noSelections: true }); vis.rendered.promise.then(function () { console.log('Chart Rendered!'); }); });

Re: How can you tell when all objects in a Mashup have loaded?

Daniel1 — Mon, 18 Nov 2019 12:10:19 GMT

Thanks @oz_moyal , the chaining looks to be a good solution - currently I just took to the slowest one and used that but think it would be good to check them all.

It appears as though when using Chrome to throttle the connection it also slows down the rendering, but when using shared WiFi connections (like on a train) which are truly slow then waiting on the promise worked a treat.

Re: How can you tell when all objects in a Mashup have loaded?

donquixote — Thu, 18 May 2023 22:22:31 GMT

Hello,
I am a bit confused by this.

In one snippet you call "app.getObject()" to render the chart.
In the other snippet you call "vis.show()".

For me, "app.getObject()" does cause the chart to be rendered, but the events on "rendered" are not triggered.

So what is the difference or relationship between app.getObject() and vis.show()?
Is one included in the other?
What happens if I call both?

Re: How can you tell when all objects in a Mashup have loaded?

alex_colombo — Mon, 22 May 2023 10:47:58 GMT

getObject and visualization.get basically have the same goal, render an object, but they are separates methods.

With getObject you can direclty render an object into your HTML.

With visualization.get you can apply custom configuration to your chart before render, such as showTitle (you can hide titles before rendering). Here all the options available for each chart.

You should never use both at the same time for the same object, this could cause a double request to the engine for the same object and the double use of engine resource.