New Topic

Community Topic Idea Integration

Mark McGuire

Admin

Assigned

Category Integration

Product Version 9.0

Add custom loaders and events in Code Mode

Lex Clay shared this idea ago

Idea Logged

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.

I like this idea 0

Comments (3)

Mike Sheehan ● 17 months 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 ● 17 months 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 ● 17 months 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 ● 17 months 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 ● 16 months 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 ● 16 months 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 ● 16 months 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 ● 16 months 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 ● 16 months 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 ● 16 months 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 ● 16 months 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 ● 16 months ago

Hi Lex,

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

Regards,

Mike

URL

Mike Sheehan ● 15 months ago

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

Lex Clay ● 15 months ago

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

Mike Sheehan ● 15 months ago

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

Lex Clay ● 15 months ago

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

Mike Sheehan ● 15 months ago

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

Mike Sheehan ● 14 months ago

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

Dillon Hoefener ● 7 months ago

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

Mark McGuire ● 7 months ago

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

Mark McGuire ● 7 months ago

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