Extending properties panel with jQuery plugin

Developers Modeler
1

Hi,

I’m struggling with integration of a third party jQuery plugin with properties panel. I followed well written tutorial on camunda blog. Extension was easy with default factory items. Once I decided to replace SelectEntryFactory with jQuery plugin Select2, things got a little bit complicated…

I debugged property panel generation line by line, but I didn’t find any event firing after panel properties are inserted to DOM. Is there a way how to capture the event and instantiate plugin after element addition to DOM? My current solution includes lodash delay function and component initialization after a period of time, even if I’m not happy about this solution.

My second problem is a plugin integration with Modeler. I installed both jQuery (v. 3.2.1) and Select 2 (v. 4.0.6-rc.1) npm packages and inserted them to custom Select2EntryFactory with require module as following:

var $ = require("jquery"),
      select2 = require("select2");

Both modules are available and require.resolve returns a correct path of javascript files. When I try to instantiate select2, jQuery is available and selects target element correctly, but select2 initialization function $(’#id’).select2(); is not available with message “.select2 is not a function”. I tried to add jQuery to window object with both jQuery and $ properties, but plugin initialization can’t find a select2 function anyway. I’m new to electron / node development world and I’m not sure where I made a mistake.

I saw there were some posts asking similar question about select2 trigger event, but without a final solution.

Can you guys point me out in a correct direction and help me with custom plugin integration?

Thanks a lot!
Have a nice day

2

Hi @Libor,

Have you already got the solution? I’m facing the same problem now.
Thanks!

3

So you are implementing a plugin for the Camunda Modeler, is that correct? Can you share a bit more code for some context?

4

Yes, we are writing an own factory very similar to the “SelectEntryFactory”, but using the Select2 jQuery plugin.
Im Code we have this:

var $ = require('jquery'); var select2 = require("select2")();

And just now we have fixed the error “select2 is not function” by adding the brackets in require :slight_smile:

And we have the following simple code for testing in the factory:

resource.html = '<select id="camunda-' + resource.id + '-select" class="form-control"><option>orange</option><option>white</option><option>purple</option></select>';

if ($(".form-control").length > 0){ $(".form-control").select2({ placeholder: "Select sth" }); }

But the select2 component does not work as expected. e.g. the placeholder has not been shown, And If I set tags: true attribute, that I’m expecting one additional text field inside the drop down, it also does not happens.

Do you have some ideas? Thanks a lot!