Is it possible to import custom JavaScript modules?

Hi Dillon.

This isn't a pattern we have seen before. You might be able to pull this off using RequireJS. I am going to see if I can prototype this and I will respond with results.

John

Hi Dillon!

I did some more testing and it does appear you can do this with require in JS.

Reference code stored locally on the host machine.

Within the Javascript tab, I simply call the file local_js.js which I created and placed inside my ROOT directory within the yellowfin files. That should be in:

Yellowfin/appserver/webapps/ROOT

require(['local_js.js'], function(){
console.log("library Loaded")
})

All I have in local_js.js is:

console.log("Hello world!")

Reference code from a remote location (like Github).

When I initially tried this with a public repository, I was getting CORS errors from the Github side, but I did some digging and it turns out that Github pages has CORS enabled, so you can freely make requests to files in <username>.github.io. If you aren’t familiar with Github pages, check out:

https://pages.github.com/

So all I needed to do was modify my require to point to github:

require(['https://jsolly.github.io/example.js'], function(){
console.log("library Loaded")
})

Hopefully this works for your usecase! let me know if you have any questions. Otherwise I will mark this as completed.

Hi John,

This works for me. I'm able to load the external JS file successfully, however I'm having a little trouble finding the JS APIs from the external file. Can you please provide a reference to, for example, finding the filters JS API from the external js file code?

Thanks

Hi Dillon,

I am not entirely sure what you mean. Could you show me an example of what you are trying to do? You should have access to the Filters API right in the dashboard and not need to reference external js code.

John

Hi John,

I have a dashboard with many sub tabs. Each sub tab contains the same code / references to report widgets. To keep the code in a single source rather than replicating across every sub tab, I'm trying to create a .js file I can use for all of the dashboard code.

The issue I'm having is when referencing the JS APIs from the .js file, the scope of "this" in "this.apis.xxx" for the API references has changed. So my question here is, what is "this" when used in the scope of the dashboard JS code mode? How can I reference this from a .js file I'm importing through require JS?

Thanks

Hi Dillon,

'this' in code mode refers to the environment on which code mode runs on (it's sort of a sandbox class that gets created for it to run). I was able to pass in the dashboard object by setting it equal to a variable and then passing it into the external JS file.

My example looks like this:

const dashboard = this.apis.dashboard
require(['local.js'], function(){
process_dashboard(dashboard)

})

John Solly

Hi John,

I realize I could do something like that, but what I'm trying to do is contain the api references within the js file, which is why a reference as below, when inside the .js file, has a scope issue with 'this':

dashboard = this.apis.dashboard

The purpose for me using the file is to reduce the redundancy of code across dashboard tabs, so I'm trying to contain all the code that runs on every tab within the file as a single source.

So what I'm looking for here is the reference to the 'environment on which code mode runs on' to replace 'this' in the code in the external file to access the APIs. Is this possible?

Or, if you think I'm going about this the wrong way, maybe we could have a call to discuss, particularly if there may be a better method I'm not considering here?

Thanks

Hi Dillon, I left a comment in your other ticket about chatting about this one in a call. See that ticket for the details. I'll update this ticket after our call.

John

Hi Dillon,

I am still working on your other tickets. Hope to have updates in them soon. As far as this one is concerned, I believe the route we were taking was to move most of the code into an eternal file, but that we couldn't move everything (like onLoad, onClose functions). Is there anything else needed on this particular thread? Otherwise, I will mark it as 'complete.'

John