New Topic

Community Topic Question Integration

Mike Sheehan

Agent

Assigned

Category Integration

Product Version 9.0

Add custom loaders through the JavaScript API.

Lex Clay shared this question ago

Awaiting Reply

Hi all,

This little nugget of brilliance in 9.4... Do we know when the wiki is going to updated with how to do this (or if it has point me there, I can't find it for love nor money)...and if it's a while off, can you provide me a sneak preview for this specific update?...very keen for this, we add custom loaders already in code mode on the dashboards but I suspect it would work a lot better using the API.

The same question

Comments (1)

Mike Sheehan ● 49 days ago

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

Lex Clay ● 49 days ago

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

Mike Sheehan ● 49 days ago

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

Mike Sheehan ● 48 days ago

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

Lex Clay ● 15 days ago

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

Mike Sheehan ● 15 days ago

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

Lex Clay ● 15 days ago

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

Mike Sheehan ● 15 days ago

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

Lex Clay ● 15 days ago

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

Mike Sheehan ● 15 days ago

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

Lex Clay ● 15 days ago

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

Mike Sheehan ● 15 days ago

Hi Lex,

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

Regards,

Mike

URL