How to implement Properties Panel Extensions without NodeJS?

[Vruum]

Hello folks!

I’m trying to embed the bpmn-io in a web application and everything is working until now. Now i need to implement the properties panel but i can not use nodejs.

My application is running on visual studio and i only can use javascript. The main problem when i check the examples (https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension) is that every example is running nodejs.

Anyone have an example how can i use properties panel only using Javascript (without anything from NodeJS)?

[pedesen]

Hey @Vruum,

currently we don’t provide a prepackaged version of the properties panel. To give you some more background: Basically NodeJS is only needed for the development setup (because there is no server backend using NodeJS or something like that). So you could build your own bundled version which you can use in your web application. Use npm to fetch bpmn-js and bpmn-js-properties-panel which takes care of getting all necessary dependencies. The third thing you need is browserify to bundle all dependencies in one single JavaScript file:

npm i bpmn-js
npm i bpmn-js-properties-panel
npm i browserify

You can then require ‘bpmn-js’ and ‘bpmn-js-properties-panel’ in a file called index.js:

var BpmnJS = require('bpmn-js');
var propertiesPanelModule = require('bpmn-js-properties-panel');

On the command line you can then create a bundled version using browserify which you can use in your web application without NodeJS. It contains bpmn-js and the properties panel.

node_modules/.bin/browserify index.js > bundled.js

Here you can find more information on how to integrate the properties panel: https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel

Hope that helps

[gcalvo]

Hi everybody,

I managed to integrate a packaged version of bpmn-modeler into my webapp. Now I’m trying to extend it’s functionality by implementing a properties panel. I’ve followed the example of how to create a custom bundle and the example given in the previous answer. All the bundles I’ve generated so far fail at some point when I load them in the browser. So I have 2 questions:

1. Has someone managed to generate a packaged version of propeties-panel?

2. Is there any other way of integrating the project without using bundles?

[waqdev]

Hi , i am looking for similar solution. i am also trying to include it as simple js files without bundles. Have you manged to achieved it?

[gcalvo]

Sorry but I didn’t managed to achieve it. At the end I only need to work with a little subset of the properties so I made my little panel myself.

[nikku]

A quick update: We added an issue for providing a modeler + properties panel bundle (or an example how to build it). We have no concrete plan yet to work on that any time soon.

If you guys have concrete problems, i.e. bundling errors or loading errors: Please post them and we are happy to help out.

[lxqjss]

@gcalvo As you said,now i just need change id property.So I want to know how can i
modify id property (not generated by program)?maybe you have already made a panel with it

[ruzzles]

Hi everyone

I am new to this forum and I am on for a project where I used bpmn-js as the modeler and wanted to extend this with the properties-panel.

This Topic is kinda outdated, that’s why I wanted to ask if there is a solution for the above mentioned problem.
I don’t use node-js and as I understood - the precondition for the usage of npm is to install node-js.

I would like to user the properties panel without using node-js and all.

Thanks in advance!!

In Addition:
Acually I am trying to use the properties panel for file attachements.
My goal is it to make it possible for the user to attach files on each bpmn-element.
Maybe there is another solution than the properties-panel?

[philippfromme]

You don’t need the porperties panel to attach custom data to BPMN elements. How would you like to attach your custom data?

[ruzzles]

@philippfromme thanks for the answer

The attachements can be other files like images or pdf files.
Additionally a user should be able to link some urls on an element.

The idea was to create a properties panel with the sections “Images” and “Links”.

Hope you understand what I am trying to do

[philippfromme]

How exactly do you want to attach the files? I assume you don’t want to inline them. If you don’t need the properties panel’s other functionaltiy have a look at a simplified example of a properties panel that only has some basic functionality. It’s likely that you need to extend the BPMN model to store your custom data in the diagram so this model extension example will probably be helpful, too.

[ruzzles]

Hi Philipp
Thank you for your advice.
In our project we decided we won’t use attachements in that form anymore (since our deadline is too soon).
Now I am about to build a workaround which will be as followed:

• interpret a textAnnotation in BPMN js as url when it fits a pre-defined RegEx

Now I actually have one more question regarding that new use case now:
How do I create new bpmn-tags in a .bpmn file? That file should be able to be downloaded and uploaded and interpreted
Unfortunately we are not using Node-Js and npm.

If you have any example I would be really thankful.

[philippfromme]

What are you referring to as bpmn-tags? Do you mean BPMN elements?

[ruzzles]

It’s more about the property of an element.
The element is “TextAnnotation” which is predefined with:

{
			name: "TextAnnotation",
			superClass: [
				"Artifact"
			],
			properties: [
				{
					name: "text",
					type: "String"
				},
				{
					name: "textFormat",
					"default": "text/plain",
					isAttr: true,
					type: "String"
				}
			]
		}

Now I am trying to create a new property (other than ‘text’) which should be able to show the content as a link.

				{
					name: "link",
					type: "String"
				}

This new property is of course inside the TextAnnotation (and probably “String” won’t do, since it’s actually the same as the property “text”).

What I’ve tried is to convert a plain-text in the “text”-property into an url, if it fits the regEx. Now I am stuck with the content of the text-property which is now " <a href=“http://www.google.de” target="_blank">www.google.de</a>" (Shown as text).

Any hint would be helpful. Thanks a lot.

[philippfromme]

Adding a link property to text annotations can be achieved using a model extension. I’ve already pointed to an example. What do you expect the link to look like in a rendered diagram?

[Jitender_Kumar]

Hi Can u help me above problem ?

[nikku]

Please do not necrobump old topics. Instead link to this thread from new topic.