Add custom loaders and events in Code Mode

Mark McGuire ●

Hi Zack,

I hope all is well,

I have since looked at our updates we have from our wider team, of which I can provide the following:

In 9.6 the loaderEvents api is available via the window, you can access it like this:

window.LoaderEvents.

To listen for something;

window.LoaderEvents.listen({
    selector: 'html *',
    onAdd: function(e) {
        console.log("A loader was added");
    }
});

With this we will also have some information added to our wiki.

As it stands I am currently awaiting some additional updates, please bear with me whilst I get this.

Regards,

Mark

Hi Zack,

I hope all is well,

I have since looked at our updates we have from our wider team, of which I can provide the following:

In 9.6 the loaderEvents api is available via the window, you can access it like this:

window.LoaderEvents.

To listen for something;

window.LoaderEvents.listen({
    selector: 'html *',
    onAdd: function(e) {
        console.log("A loader was added");
    }
});

With this we will also have some information added to our wiki.

As it stands I am currently awaiting some additional updates, please bear with me whilst I get this.

Regards,

Mark

1

Mike Sheehan ●

Hi Lex,

Thanks for reaching out. I will chase up on documentation for this, but I can indeed give a sneak peak!

This enhancement provides for 2 pieces of functionality.

1. Completely replacing the Standard Yellowfin Loader. This can be achieved using the preventDefault() calls to make sure the Yellowfin loader is not triggered

//Example to completely replace the Yellowfin loader on certain elements 
yellowfin.loaderEvents.listen({
    selector: 'div[uuid]', //Any time a loader is added to a div with a uuid attribute
    onAdd: function(e) {
        let loaderDiv = document.createElement('div');
        loaderDiv.className = 'myLoader';
        loaderDiv.innerText = 'I am loading now';
        e.element.appendChild(loaderDiv);
        e.preventDefault();
    },
    onRemove: function(e) {
        let loaderDiv = e.element.querySelector('div.myLoader');
        if(loaderDiv) {
            loaderDiv.parentNode.removeChild(loaderDiv);
            e.preventDefault();
        }
    } 
});

2. Allow the developer to change the element that the loader will be added to. In the case of a canvas there may be a lot of charts in a close proximity to each other, and this can allow a developer to push the renderer up a level.

yellowfin.loaderEvents.listen({
    selector: 'div[uuid]',
    onAdd: function(e) {
        e.setOverrideElement(e.element.closest('canvas-area'));
    },
    onRemove: function(e) {
        e.setOverrideElement(e.element.closest('canvas-area'));
    }
});

I've also attached two relevant files containing scripts to test out this functionality - loader_testing.html and overrideloader.html.

Please take a look through these and give this a try and let me know how goes.

Regards,

Mike

Hi Lex,

Thanks for reaching out. I will chase up on documentation for this, but I can indeed give a sneak peak!

This enhancement provides for 2 pieces of functionality.

1. Completely replacing the Standard Yellowfin Loader. This can be achieved using the preventDefault() calls to make sure the Yellowfin loader is not triggered

//Example to completely replace the Yellowfin loader on certain elements 
yellowfin.loaderEvents.listen({
    selector: 'div[uuid]', //Any time a loader is added to a div with a uuid attribute
    onAdd: function(e) {
        let loaderDiv = document.createElement('div');
        loaderDiv.className = 'myLoader';
        loaderDiv.innerText = 'I am loading now';
        e.element.appendChild(loaderDiv);
        e.preventDefault();
    },
    onRemove: function(e) {
        let loaderDiv = e.element.querySelector('div.myLoader');
        if(loaderDiv) {
            loaderDiv.parentNode.removeChild(loaderDiv);
            e.preventDefault();
        }
    } 
});

2. Allow the developer to change the element that the loader will be added to. In the case of a canvas there may be a lot of charts in a close proximity to each other, and this can allow a developer to push the renderer up a level.

yellowfin.loaderEvents.listen({
    selector: 'div[uuid]',
    onAdd: function(e) {
        e.setOverrideElement(e.element.closest('canvas-area'));
    },
    onRemove: function(e) {
        e.setOverrideElement(e.element.closest('canvas-area'));
    }
});

I've also attached two relevant files containing scripts to test out this functionality - loader_testing.html and overrideloader.html.

Please take a look through these and give this a try and let me know how goes.

Regards,

Mike

Files:

Reply URL

1

Lex Clay ●

Mate you are killing it tonight! This looks great, will save us a bunch of time in future releases, I feel like a kid in a candy store right now.

In all honesty, I'm not going to be able to look at this for a week or so, we've got a UAT release on Monday that I need to redo all the brushing work for as per previous ticket. I will however be on this like flies on .... as soon as we get on to testing 9.4 after we've pushed the current release to prod...This will be the very first thing I look at. Feel free to close it out for now, I'll reopen it if I need to but from what you've provided, I'm pretty confident it will be a straight shot.

Thanks again Mike, show this to your teamlead/whoever, you've truly been a massive help this evening.

URL

1

Mike Sheehan ●

Hi Lex,

Thanks for the kind words, and sounds good! I'll go ahead and close this for now. Should you have any follow-up questions when you actually have the chance to look at this, indeed, please don't hesitate to reach back out and I'll be happy to assist further!

Regards,

Mike

URL

1

Mike Sheehan ●

Hi Lex,

I wanted to let you know I received an update from the dev team on this regarding documentation: "The documentation has been written, but it hasn't been published to the wiki yet, it is just going through it's final rounds of review."

I'll keep this set to Answered, but just wanted to let you know!

Regards,

Mike

URL

1

Lex Clay ●

Hi Mike,

Finally got around to looking at this. Is the loaderEvents API accessible via Code Mode do you know? I've taken a couple of guesses but I can't seem to figure it out.

As an aside, the examples you've given above would probably be quite helpful to add to the wiki.

Cheers

Lex

URL

1

Mike Sheehan ●

Hi Lex,

Thanks for your reaching back out. I believe these examples will be published with the documentation when they are added to the Wiki.

In terms of the loaderEvents API, those examples are indeed for external embedding. Code Mode API's have their own listeners and they're detailed in the JS API in Code Mode Wiki page. If you search "Event Listener" on this page, you'll see a couple examples. Most of what's needed in terms of this should be found in the API Wiki entries.

That said, I may be able to provide a small Code Mode example if you can let me know what you're looking to do with these event listeners.

Regards,

Mike

URL

1

Lex Clay ●

Hi Mike,

It's the onRemove from loaderEvents that gives me the indicator everything has finished that I need. The onReportLoad event fires too early.

I've managed to access the loaderEvents API via code mode so that will do for now.

URL

1

Mike Sheehan ●

Hi Lex,

Thanks for your response. If the onReportLoad is firing too early, you'll probably want to use the reportComplete function inside the report API instead: reportComplete Reports API.

This function will make it so that it waits for the Chart and/or table to be fully rendered.

As a small example:

let report = this.apis.canvas.select("myreport")
report.addEventListener('reportComplete',function(){
do stuff});

Hopefully this helps! Please let me know if you require anything else here.

Regards,

Mike

Hi Lex,

Thanks for your response. If the onReportLoad is firing too early, you'll probably want to use the reportComplete function inside the report API instead: reportComplete Reports API.

This function will make it so that it waits for the Chart and/or table to be fully rendered.

As a small example:

let report = this.apis.canvas.select("myreport")
report.addEventListener('reportComplete',function(){
do stuff});

Hopefully this helps! Please let me know if you require anything else here.

Regards,

Mike

URL

1

Lex Clay ●

Yep, tried that a while back...I think we even spoke about it on here...it's the "all of the callbacks that were registered in the registerOutputType function are resolved." bit that the's problem, from what I remember, there's only one option for registerOutputType which is the dataset, so the return is practically at the same point as onReportLoad, at least that's what I'm experiencing.

I can't seem to find an event listener in code mode that returns when the report rendering has completed which is sometimes a second or two after the datasets have been returned on a report heavy dashboard....this is why I was so excited about the loaderEvents API.

As I said though, I've found a way to access the loaderEvents API from within code mode so I'm all good for now. Is there any plan to add it to the this.apis space do you know?

URL

1

Mike Sheehan ●

Hi Lex,

I've discussed this with a Consultant and he states that he's not run into issues loading events after report's are done loading via reportComplete, but there could be more to it than that small example leads on. Unfortunately, discussing this further would require a full-on Consulting discussion though.

I'm unsure on the loaderEvents being added to this.apis/Code Mode, but let me ask the dev team and get back to you.

Regards,

Mike

URL

1

Lex Clay ●

That's fine. It's a unique use case with a heavy report load on each subtab & custom filter interactions. I need to stop users from trying to apply too many filters simultaneously so need a method to indicate when everything on the subtab has finished rendering. The loaderEvents API seems to be working perfectly...it's a bit hacky how I've pulled it in so it can be accessed from code mode so would prefer to access it via the normal this.apis route if it's going to added, if not, I can live with the solution I've come up with.

URL

1

Mike Sheehan ●

Hi Lex,

Thanks for the additional info. I'll let you know what the dev team comes back with.

Regards,

Mike

URL

1

Mike Sheehan ●

Hi Lex,

I received an update on this. It's pretty much just a work-in-progress:

"We could add it to code mode - but it would only apply to that particular dashboard or until the page was reloaded which wouldn't be that useful for replacing a loader across the application

I've been looking into ways to make this work via a custom header but there are some issues we haven't been able to resolve with it just yet."

At this point it seems it's on the future roadmap, but no means for this is forthcoming any time soon.

Please let me know if you have any other questions or concerns on this.

Regards,

Mike

URL

1

Lex Clay ●

Hi Mike,

Thanks for the update. For us, actually having it only apply to a particular dashboard or even sub tab wouldn’t be an issue, the end users only ever see things displayed on a dashboard, they don’t access any other part of the application so that would be an acceptable solution. Initialising the custom loader every time the page is loaded isn’t an issue either, most of the customisations are initialised this way

My hacky solution was to pull the loader js file in via a custom header but I was getting exceptions the first time it initialised the file so I binned it off & went back to the report onLoad event, with some additional controls around when the complete promise is returned I’ve managed to make that return when the rendering has completely finished.

Let me know if there’s any way the loader could be made available in code mode, even with the aforementioned restrictions

URL

1

Mike Sheehan ●

Hi Lex,

Thanks for your response. While awaiting the onLoad events to possibly be added to code mode, the primary recommendation is to use the reportComplete function that was exemplified a few responses back, which is what Consulting typically uses for use cases similar to these. I'm afraid I can't be much more specific than that and think anything beyond this would require an actual Consulting conversation since as far as I can tell, this functionality is working as intended and anything further would be a matter of scoping things out, coming up with solutions, and implementing them. I hope this is okay. Please let me know if you have any other questions or concerns and hopefully we'll get these onLoad events at some point within Code Mode.

Regards,

Mike

URL

1

Lex Clay ●

Yeah it's all good mate... reportComplete is fine when you're waiting for one report, it's not so great when you're waiting for 20+ reports to complete..anyway..I got around that bit with some promise.all trickery so all is good there.

Keep me in the loop with regards to if/when we can access the loaderEvents in code mode. Cheers.

URL

1

Mike Sheehan ●

Hi Lex,

Sounds good. Will do! Let me check with the dev team if there's a pre-existing formal enhancement request. If there isn't one I'll create one and change this to an Idea item and log it. I'll change status after I hear back.

Regards,

Mike

URL

1

Mike Sheehan ●

Hi Lex,

I've changed this to an Idea item and the name of this ticket to reflect the actual Idea and am setting this to Idea Logged as there's an internal enhancement request for this. Any potential updates surrounding this will be posted here.

Regards,

Mike

URL

1

Dillon Hoefener ●

Hi Mike,

Any update on when this will be added to the API? I need to resolve the issue I have on ticket# 20794 that this should help me alleviate.

Thanks

URL

1

Mark McGuire ●

Hi Lex, Dillon,

I hope all is well,

I've chased this up with our development team so should be able to get some updates asap.

Regards,

Mark

Reply URL

1

Mark McGuire ●

Hi Lex, Dillon,

I have since had some feedback of which movement on this has taking place although pending a few bits of testing, I will mark this back to Idea Logged. Please feel free to question with myself for updates.

Regards,

Mark

Reply URL

1

Zack Wilson ●

Any update to this?

Thanks,

Zack

Reply URL

1

Mark McGuire ● ●

Hi Zack,

I hope all is well,

I have since looked at our updates we have from our wider team, of which I can provide the following:

In 9.6 the loaderEvents api is available via the window, you can access it like this:

window.LoaderEvents.

To listen for something;

window.LoaderEvents.listen({
    selector: 'html *',
    onAdd: function(e) {
        console.log("A loader was added");
    }
});

With this we will also have some information added to our wiki.

As it stands I am currently awaiting some additional updates, please bear with me whilst I get this.

Regards,

Mark

Hi Zack,

I hope all is well,

I have since looked at our updates we have from our wider team, of which I can provide the following:

In 9.6 the loaderEvents api is available via the window, you can access it like this:

window.LoaderEvents.

To listen for something;

window.LoaderEvents.listen({
    selector: 'html *',
    onAdd: function(e) {
        console.log("A loader was added");
    }
});

With this we will also have some information added to our wiki.

As it stands I am currently awaiting some additional updates, please bear with me whilst I get this.

Regards,

Mark

Reply URL

1

Mark McGuire ●

Hi Zack,

I hope all is well,

Just to let you know we have since updated our Wiki. You can find this here.

Regards,

Mark

Reply URL

Add custom loaders and events in Code Mode

Replies (6)