An update on bpmn.io

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

Transcript

1.  An update on bpmn.io Nico Rehwaldt
3. bpmn.io provides a viewer and a web modeler for BPMN 2.0
4. 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
5. 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
7. 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
8. 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 * / }
9. 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 ? ' ) ; } ) ;
12. Try it out demo.bpmn.io bpmn.io/getting-started github.com/bpmn-io/bpmn-js-examples
13. 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
15. Resources bpmn.io bpmn.io/blog @bpmn_io