Plugin in Test app not showing in Repeating Group

Hi there,

To get more knowledge of plugin building, I started to try something out. Inspired by another topic I am trying to create a plugin based on the loading.io progress bar. This plugin renders an SVG that shows a progress bar.

Disclaimer: I am no developer or have real experience with Javascript. Search/Copy/Paste is my middle name :-).

Despite that, I did make some progress. De plugin is showing up in my test app, and I am able to change the editor preview to my linkings. It also showed up when I put it on a page (directly or nested in a group).

I am also able to change the configuration/look and feel of the plugin using the properties editor and using the Update Function of the plugin. Even dynamic data is working.

But when I tried to put the plugin in a Repeating Group, it stays invisible. Inspecting the page does state that the div is there, but the progress bar is just not visible. I tried to create a unique ID, which is working, but still no luck in having the plugin visible in the repeating group

Can some give any tips how to solve it?

Thanks

Well buddy, making plugins work inside repeating groups is a science on its own hahah.

Gotta say that me and a partner managed to crack that one and I’ll release a general purpose utility soon(ish), then you’ll be able to study it and see how one can make that work.

Until then, if you really want to get into plugin building… which is awesome by the way… do make an HTML/CSS/JS crash course. Will do wonders to your ability! Just a personal suggestion.
You’ll be making good stuff in no time.

Is that actually difficult? If you have a plugin element that renders an interface and that makes its own CSS, and you want those classes to be unique to each plugin instance, you do have to ensure your classes have unique names.

But that’s pretty simple. The approach I take is this:

  • include nanoid in my header
  • in initialize, grab a unique ID: instance.data.nanoid = nanoid()
  • anywhere I need a UID, refer to instance.data.nanoid

(E.g., when constructing a class, its name becomes instance.data.nanoid + “-whateverClassName”)

1 Like

Thanks. So also the classes needs to be unique? I will try that out and check if it is still working then in combination with the js library.

Looking for to your examples

Hi I managed to make it work. The library can also be initiated manually using JavaScript. I initialized the div in the Initialize function, with a unique ID.

Then using the JavaScript init of the library in the bubble update function made it possible to define all the properties dynamically using the bubble properties.

Now just some fine-tuning and my first simple plugin is a fact.

Sometimes I see a bit of error code in the editor as part of the automatic generated preview of the elements in upcoming rows of the RG, but when testing this is not as issue.

Final question: I select a dynamic value based on the progress value of my RG item. How can I show the selected value for example “This cell’s tasks progress” in the preview version of my plugin. I tried to use properties.value but then it is empty.

1 Like