Camunda commons UI 7.12.0-SNAPSHOT

Common frontend / UI resources, widgets and libraries for the Camunda web application:

Important note: This project is used internally and the API of its components are subject to changes at any time.


  • lib
    • auth - for authentication mechanisms and tools, read more
    • util - commonly used utilities read more
    • directives
    • pages
    • chart
    • plugin
    • resources
    • search
    • services
  • resources
    • locales - translation files
    • img
    • less - base less files to generate CSS stylesheets
  • widgets


Widgets are reusable components which should be easy to integrate in the Camunda webapp and your own projects.


A good way to get familiar with the widgets integration in your projects is by reading the source code of the lib/widgets/*/test/*.spec.html or their online versions (see the widgets menu on the GitHub page).
In those examples, we use uncompiled versions of the library and its dependencies and wire the whole with requirejs.

Available widgets

  • cam-widget-bpmn-viewer
  • cam-widget-cmmn-viewer
  • cam-widget-dmn-viewer
  • cam-widget-debug
  • cam-widget-footer
  • cam-widget-header
  • cam-widget-inline-field
  • cam-widget-loader
  • cam-widget-chart-line
  • cam-widget-search
  • cam-widget-search-pill
  • cam-widget-variable
  • cam-widget-variables-table
  • cam-widget-clipboard
  • cam-widget-var-template

Developing the widgets

grunt auto-build

Testing the widgets

npm install
./node_modules/grunt-protractor-runner/node_modules/protractor/bin/webdriver-manager --chrome update

While developing widgets, you may want to run the tests as a change occurs, here is a way to achieve that:

npm install -g nodemon
nodemon -w lib/widgets/ --exec "protractor ./test/protractor.conf.js"

You can also run the tests on a single widget like that:

TESTED=variable nodemon -w lib/widgets/ --exec "protractor ./test/protractor.conf.js"

This will only run the cam-widget-variable tests.

grunt connect keep alive web server

grunt connect:widgetTests:keepalive


grunt karma

Testing the widgets under macOS

Add to protractor.config.js:

directConnect: true,

Run in commons-ui folder:

rm -rf node_modules
npm install —-legacy-bundling

Open webdriver-manager and change to if you run a newer macOS version.

vim /camunda-commons-ui/node_modules/protractor/bin/webdriver-manager

Run chrome update for protractor

camunda-commons-ui/node_modules/protractor/bin/webdriver-manager --chrome update


The source files in this repository are made available under the Apache License Version 2.0.