Using properties panel pre-packaged with bpmn-js

raangs4u · March 30, 2016, 12:38pm

Hello,

I am using bpmn-js modeler by adding webjar of bpmn-js. I want to add properties panel to it. My project is not in nodejs environment. I can only use properties panel if it available as a single javascript file or a webjar of it. How do I achieve it ?
Please let me know.

nikku · March 30, 2016, 3:08pm

You can create your own bundle with the properties panel and the Modeler inside.

Checkout this example to learn more.

carrchang · May 21, 2016, 6:36am

I got a errors,

"Error: Cannot find module 'events'"
"TypeError: undefined is not a constructor (evaluating 'new BpmnViewer({ container: '#canvas' })')"

And the code,

package.json

{
  "name": "bpmn-js-custom-bundle",
  "version": "0.0.0",
  "description": "Create custom bower bundles of bpmn-js",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-browserify": "^3.3.0"
  },
  "dependencies": {
    "bpmn-js": "^0.15.0",
    "diagram-js": "^0.15.0",
    "bpmn-js-properties-panel": "^0.7.0"
  }
}

index.js

// get bpmn-js
var BpmnViewer = require('bpmn-js/lib/Viewer');

// load additional modules
var additionalModules = [
  require('bpmn-js-properties-panel'),
  require('bpmn-js-properties-panel/lib/provider/bpmn'),
];

// add additional (default!) modules to bpmn-js
BpmnViewer.prototype._modules = BpmnViewer.prototype._modules.concat(additionalModules);

// export
module.exports = BpmnViewer;

Gruntfile.js

'use strict';

module.exports = function(grunt) {

  // project configuration
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    browserify: {

      // create customized bower bundle
      bower: {
        files: {
          'dist/bpmn-viewer-custom.js': [ 'index.js' ]
        },
        options: {
          browserifyOptions: {
            standalone: 'BpmnJS',
            // make sure we do not include browser shims unnecessarily
            builtins: false,
            insertGlobalVars: {
              process: function () {
                  return 'undefined';
              },
              Buffer: function () {
                  return 'undefined';
              }
            }
          }
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-browserify');

  grunt.registerTask('default', [ 'browserify:bower' ]);
};

app.js

'use strict';

// we use $.ajax to load the diagram.
// make sure you run the application via web-server (ie. connect (node) or asdf (ruby))

// require the viewer, make sure you added the bpmn-js bower distribution
// along with all its dependencies to the web site
var BpmnViewer = window.BpmnJS;

var viewer = new BpmnViewer({ container: '#canvas' });

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        viewer.importXML(xhr.response, function(err) {

          if (!err) {
            console.log('success!');
            viewer.get('canvas').zoom('fit-viewport');
          } else {
            console.log('something went wrong:', err);
          }
        });
    }
};

xhr.open('GET', 'pizza-collaboration.bpmn', true);
xhr.send(null);

app.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <style>
    html, body, #canvas {
      height: 100%
    }
  </style>

  <!--
    this is an example of how to use bpmn-js in a standalone application built with
    bower-bpmn-js
  -->

  <title>bpmn-js bower example - bpmn-js-examples</title>
</head>
<body>

  <h1>Pizza Collaboration Viewer</h1>

  <div id="canvas"></div>

  <!-- viewer -->
  <script src="dist/bpmn-viewer-custom.js"></script>

  <!-- app -->
  <script src="./app.js"></script>
</body>
</html>

Have any mistakes in the code? anybody help me, thank you!

nikku · May 28, 2016, 3:45pm

builtins: false is the problem since we dependencies use the builtin events module.

Remove that line and you are O.K.

carrchang · May 29, 2016, 1:13am

It worked. Thank you!

Noman · June 22, 2016, 10:03am

In my case I receive following error when I try to use custom properties panel

bpmn-viewer-custom.js:28342 Error: No provider for “commandStack”! (Resolving: commandStack)

my html has this

<script src="bower_components/bpmn-viewer-custom.js"></script>

My GruntFile.js looks like this

‘use strict’;

module.exports = function (grunt) {

// project configuration
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    browserify: {

        // create customized bower bundle
        bower: {
            files: {
                'dist/bpmn-viewer-custom.js': ['index.js']
            },
            options: {
                browserifyOptions: {
                    standalone: 'BpmnJS',
                    // strip unnecessary built-ins
                    builtins: ['events'],
                    insertGlobalVars: {
                        process: function () {
                            return 'undefined';
                        },
                        Buffer: function () {
                            return 'undefined';
                        }
                    }
                }
            }
        }
    }
});

grunt.loadNpmTasks('grunt-browserify');

grunt.registerTask('default', ['browserify:bower']);

};

mnosov · August 1, 2016, 2:09pm

I’ve encoutnered the same error as Noman. However there is an additional stacktrace:

I’ve attached app.js and bpmn-viewer-custom.js as xml files because .js extension is not allowed.
Can someone point to what’s causing this?
Thank you.

app.xml (2.4 KB)
bpmn-viewer-custom.xml (1.0 MB)

mnosov · August 1, 2016, 2:41pm

I managed to solve the errors by modifying the index.js file to:

// get bpmn-js
var BpmnViewer = require('bpmn-js/lib/Modeler');

// load additional modules
var additionalModules = [
  require('bpmn-js-properties-panel'),
  require('bpmn-js-properties-panel/lib/provider/bpmn'),
];

// add additional (default!) modules to bpmn-js
BpmnViewer.prototype._modules = BpmnViewer.prototype._modules.concat(additionalModules);

// export
module.exports = BpmnViewer;

After that I rerun the command grunt browserify:bower and used the newly generated bpmn-viewer-custom.js in my web application. However, some css classes for the properties panel are missing, still working on that.

nikku · August 1, 2016, 3:59pm

Make sure you use the bpmn-js/lib/Modeler together with the properties panel.

Eddie_Sandi · December 19, 2016, 3:30pm

I’d like to add, that following needs to be done to support camunda properties:

// get bpmn-js
var BpmnViewer = require(‘bpmn-js/lib/Modeler’);

var camundaModdleDescriptor = require(‘camunda-bpmn-moddle/resources/camunda’);

// load additional modules
var additionalModules = [
require(‘bpmn-js-properties-panel’),
require(‘bpmn-js-properties-panel/lib/provider/bpmn’),
require(‘bpmn-js-properties-panel/lib/provider/camunda’)
];

// add additional (default!) modules to bpmn-js
BpmnViewer.prototype._modules = BpmnViewer.prototype._modules.concat(additionalModules);

// export
module.exports = {Viewer:BpmnViewer, camundaModdleDescriptor: camundaModdleDescriptor};

At the moment, I am not sure how to return only one object in the module.exports, but using AMD, we can be able to create the modeller an use the moddle extension as follow:

define(‘scripts/Modeler’, function(BpmnModeler)
{
function Modeler(modelerDiv, modelerPanelProperties)
{
bpmnModeler = new BpmnModeler.BpmnViewer({
container: modelerDiv,
propertiesPanel: {
parent: modelerPanelProperties
},
moddleExtensions: {
camunda: BpmnModeler.camundaModdleDescriptor
}
});
}
// more code here

prasad · April 27, 2017, 9:44am

I have created a distribution ready property panel with modeler by following the this Link

However the generated index.js file inside the dist folder is of size more than 5 MB . How could I minimize the size of this file. I find it difficult to load it in the browser .(I am not using a node environment).

vntbrto · July 30, 2017, 12:38pm

Hi @nikku, is it possible to add the properties panel to BpmnViewer?

I would like to keep using bpmn-js/lib/Viewer instead of bpmn-js/lib/Modeler as the viewer prevents the user from changing the workflow. We do already use it in our application and it works fine, but without the properties panel.

Our purpose here is to allow the user to view the properties (configuration) after the workflow has been started, without being able to change it. This could help on some troubleshooting issues for running workflows.

Thanks and regards,
Bruno

philippfromme · August 1, 2017, 7:18am

There is currently no easy way to make the properties panel read-only. You’d have to disable every field manually.

vntbrto · August 2, 2017, 6:03am

Hi @philippfromme. Thanks for the answer!

I guess we will need to figure out another way to do that, then, because disabling fields manually looks like a big workaround for me.