Is it possible to import custom JavaScript modules?

Dillon Hoefener shared this question 2 months ago
Awaiting Reply

Hi,

I'll start off by saying I haven't packaged a lot of code externally from an application, so maybe I should be obvious if I had. But, can someone please tell me if it is possible for me to import modules from a custom JS file into dashboard code mode and JavaScript charts?

I have some replication of code across Javascript charts and dashboard subtabs, so this is a bad design due to this. I'd like to understand how I can refactor this to have the code in a central location for YF to access.

If this is possible, where do I need to put the JS file in order to import?

Comments (8)

photo
1

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

photo
1

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")
})
/d168329fb4d92921798a6ce3fcc4e922

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

photo
1

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

photo
1

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

photo
1

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

photo
1

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)

})
That seemed to work for me. Hopefully it works for you too!


John Solly

photo
1

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

photo
1

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