Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An update on bpmn.io

Nico Rehwaldt
September 18, 2014

An update on bpmn.io

An update on the current state of http://bpmn.io. Talk given at camunda community event 2014.

Nico Rehwaldt

September 18, 2014
Tweet

More Decks by Nico Rehwaldt

Other Decks in Technology

Transcript

  1. Viewer embed BPMN 2.0 diagrams into web pages annotate process

    diagrams via JavaScript API 100% web based (no backend needed) easily integratable into existing web applications usable offline / standalone as an app
  2. Embedding a BPMN 2.0 diagram v a r B p

    m n V i e w e r = w i n d o w . B p m n J S ; v a r v i e w e r = n e w B p m n V i e w e r ( { c o n t a i n e r : ' # c a n v a s ' } ) ; v i e w e r . i m p o r t X M L ( p i z z a D i a g r a m , f u n c t i o n ( e r r ) { i f ( ! e r r ) { c o n s o l e . l o g ( ' s u c c e s s ! ' ) ; v i e w e r . g e t ( ' c a n v a s ' ) . z o o m ( ' f i t - v i e w p o r t ' ) ; } e l s e { c o n s o l e . l o g ( ' s o m e t h i n g w e n t w r o n g : ' , e r r ) ; } } ) ; h t t p s : / / g i t h u b . c o m / b p m n - i o / b p m n - j s - e x a m p l e s / m a s t e r / s i m p l e - b o w e r
  3. Overlays v a r o v e r l a

    y s = b p m n V i e w e r . g e t ( ' o v e r l a y s ' ) ; / / a t t a c h a n o v e r l a y t o a n o d e o v e r l a y s . a d d ( ' S E L E C T _ A _ P I Z Z A _ T A S K ' , { p o s i t i o n : { b o t t o m : 0 , r i g h t : 0 } , h t m l : ' M o r e D e t a i l s n e e d e d ? ' } ) ; h t t p s : / / g i t h u b . c o m / b p m n - i o / b p m n - j s - e x a m p l e s / m a s t e r / o v e r l a y s
  4. Markers v a r c a n v a s

    = b p m n V i e w e r . g e t ( ' c a n v a s ' ) ; / / a d d a m a r k e r c a n v a s . a d d M a r k e r ( ' S E L E C T _ A _ P I Z Z A _ T A S K ' , ' n e e d s - d i s c u s s i o n ' ) ; . n e e d s - d i s c u s s i o n : n o t ( . d j s - c o n n e c t i o n ) . d j s - v i s u a l > : n t h - c h i l d ( 1 ) { f i l l : r e d ! i m p o r t a n t ; / * f o r c e s t y l e o v e r r i d e * / }
  5. Interaction v a r c a n v a s

    = b p m n V i e w e r . g e t ( ' c a n v a s ' ) ; / / a d d a m a r k e r c a n v a s . g e t G r a p h i c s ( ' S E L E C T _ A _ P I Z Z A _ T A S K ' ) . c l i c k ( f u n c t i o n ( ) { a l e r t ( ' y o u w a n t t o s e l e c t a p i z z a ? ' ) ; } ) ;
  6. Modeler the future (and a bit of now) create BPMN

    2.0 diagrams on the web embeddable (web only) rich user interaction open your local files export BPMN 2.0 XML or SVG