Dynamic script injection in plugin preview editor

Plugin builders
1

I’m building a table component and I’ve some third party scripts which is essential to render it. I have been stucked on getting the preview of my element in the APP editor.

In the plugin preview function, i have created a script element, set the source and appended it to the iframe’s head tag. But still, scripts are not getting loaded.

Should i need to consider updating in iframe’s srcdoc too ?.
Can someone help me out for this ?

2

ive never seen a plugin thats actually useable in the editor. for the preview, typically i just throw an image there. never thought about making it actually useful and am not sure you actually can make it usefull

1 Like
3

You can dynamically add scripts to the preview, probably your code has some error.
Remember that the iframe preview is reloaded at least every time you interact with the plugin, so it may add up to the editor’s performance.

1 Like
4

“throwing an image” - Thought the same but still trying to see if I could make it !!

5

This is how i injected the script into the head.

image
image980×258 18.3 KB

The class Grid comes from the script, working fine in the output preview but in editor preview it is undefined.

And yes, I’m aware of it!!

6

vanilla js works for me:

const script = document.createElement('script')
script.src=`yourSrc`
script.onload=()=>{
       // your logic
}
document.head.appendChild(s)
1 Like
7

It works! @dorilama. But here is another issue now.
I have fields such as datasource(dynamic APP type), enablePaging(yes/no) in my plugin.
preview function gets triggered whenever i check/uncheck enablePaging in property editor but changing datasource doesn’t. I always receive null in properties.datasource.

I have my source configured in API connector so i use it like Get data from external API → Connector data

Editor preview should reload whenever any property changes right ?
I don’t understand why!!

8

dynamic things are not evaluated in the editor (for example what would be the current user or the result of a search?) so your plugin code will not receive an updated value, in the same way that a text element with a dynamic expression will not receive the actual resolved text in the editor.
You need to load the page preview to actually resolve dynamic expressions.
Building the preview is almost as rewriting your component completely, that’s why a lot of plugins just skip it entirely.

2 Likes
9

Got it thanks mate! That helps…

1 Like