Can we include external js or /and css ?

[samant-rags]

Can we include external js or /and css ?

If we want to create a interactive form using this panel , it will be of immense help to include external css and js files

[ZuperZee]

I think I've answered it here #41.

I won't be adding a way to directly import external packages, but bundlers are a workaround. I didn't find a good way to implement it.

[ZuperZee]

Is there any special js/css you're thinking of? Or is it just normal npm packages?

[samant-rags]

hi Zuper, Thanks for the quick response. This seems to be a great plugin (similar to ajaxPanel ) but with ES6 js . is that correct ?

My use case is like below, wherein I want to inject my custom vanilla js script on certain html events like click of button or text etc. So dont have to go through the whole process of nodejs dependency etc.

Also include other jQuery plugins, CSS like tailwind etc.
PS: Tailwind CSS i was able to copy paste in the CSS textarea and make it work . However ability to add custom JS scripts seems to be a big challenge still.

When i run this , seeing order-management?orgId=1&editPanel=8:1 Uncaught ReferenceError: test is not defined at HTMLDivElement.onclick (order-management?orgId=1&editPanel=8:1)

If i could somehow include my custom js files through the configuration panel , it would be awesome :)

Will try the bundler approach ..if that is the only option.

update : Can something like this be done or supported ? https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/using-the-public-folder.md

[ZuperZee]

Thanks for the quick response. This seems to be a great plugin (similar to ajaxPanel ) but with ES6 js . is that correct ?

Thank you :D You can kinda think of it as the Ajax panel for html/js, but it's probably easier if you think of it as a panel that renders custom html/css and executes custom javascript.

My use case is like below, wherein I want to inject my custom vanilla js script on certain html events like click of button or text etc. So dont have to go through the whole process of nodejs dependency etc.

Probably not entirely what you were thinking of, but adding events to a button can be done through javascript. HTML/SVG

<button>Click me</button>

onInit

const buttonElt = htmlNode.querySelector("button");
buttonElt.onclick = () => buttonElt.textContent += "!"

I think you're asking if you can link an event to a function in html

<-- THIS WILL NOT WORK -->
<script>
  function test() {
    // Something
  }
</script>
<button onclick="test">Click me</button>

Because of how the code is executed by the plugin (through a new Function) it will not work. It can possibly done by changing how the underlying executions are done, but that is probably something that won't be worked on for a while (by me atleast, maybe someone else makes a PR for it :D).

Also include other jQuery plugins, CSS like tailwind etc.

Kinda the same reason like above why this can be hard. jQuery can already (kinda) be used in the panel as Grafana has a global variable for it already, but I would recommend using a bundler instead. It makes it a lot easier to add dependencies like tailwind and such. It also makes configuring dependencies a lot easier.

Will try the bundler approach ..if that is the only option.

It's probably the easiest approach. I recommend checking https://gapit-htmlgraphics-panel.gapit.io/docs/projects/#bundler-templates for some starter templates.

update : Can something like this be done or supported ? https://github.com/facebook/create-react-app/blob/main/docusaurus/docs/using-the-public-folder.md

If you're thinking of adding stuff like tailwind in this way, then no.

[samant-rags]

Thanks a lot Zuper for the detailed response ! Appreciate your time and effort !

[ZuperZee]

Closing this as it seems to be answered.

Enhancement issue #65 addresses the script tag.

Will reopen if there's any following questions related to this.