How to include juqery UI

Developers
1

Hi ,

I am using properties panel extension build the application using npm and bower. i need to create popup on click event of element. But when i included the jquery dialog then it says dialog not defined. What is best way to create popup on click event of process element?

MagicPropertiesProvider.js:31 Uncaught TypeError: $(…).dialog is not a functionlinkEelements @ MagicPropertiesProvider.js:31(anonymous function) @ MagicPropertiesProvider.js:10dispatch @ jquery.js:4832elemData.handle @ jquery.js:4644

Thanking you in advance
Waq

2

Hi,

If you need only modal dialog functionality then do not include jQuery UI, instead use the following example here:
http://www.w3schools.com/howto/howto_css_modals.asp

If you insist on jQuery UI then you need to require it through nodejs NPM module.

  1. Edit package.json file to add jquery-ui dependency.
  2. Modify your application javaScript file to require jquery-ui.
    3* I am not using jquery-ui for some time and of course through NPM module, so it can be that you need to modify Gruntfile.js also to copy or less additional static contents like css to your distribution.

And of course in your code add the following:
modelerInstance.get(‘eventBus’).on(‘element.click’, function(e) {
openModal();
});

Hope it helps.

1 Like
3

Thank you very much!!! indeed it is great help!!! I would like know after step 3 would i need to build the package again

e.g npm install bpmn-js-properties-panel

Thanks for you help and indeed i will give try to the mentioned link.

Many thanks,
Waq