Lucid chart&

Harmony

Generate a (workflow) application from a flowchart&

Introducing event driven modeling

• The scope of this presentation is limited to flowcharts. BPMN was introduced to standardise process modelling and, whilst it built on 'standard' flowcharting shapes, its palette and semantics go far beyond the range of flowcharting to really describe how proper processes actually work (ref: NickBroom - expert on BPMN)

Disclaimer

About Lucid chart & Harmony

• LucidChart is great for diagramming:– But flowcharts can be complicated and confusing– Flowcharts don’t deal well with data– Flowcharts should be avoided for detailed processes– Flowcharts can’t be “executed” / tested

• The model must be verified manually

• Harmony is great for creating, worfkflow, applications:– But creating a large system for a complex process without a

graphical model can be cumbersome – Top notch support for decision tables– Joining process + data– Agile / prototyped development

• Focus on validating the process (Prototype)change

check

generate

What is event-driven modeling?

• A technique in which events depend on each other to the least extent practicable

• the focus must be for each event to produce a clearly defined outcome (result);

• Such an outcome can be a pre-condition for an(other) event. • Events are triggered ( “act”) when the condition is met.

• Each event represents an autonomous task / work package

• thus simplifying modeling … analysts/power users don’t have to worry ..

• if I do this - then this must have been doneor• if I do this - then I also must do this, and this, and ….

Why event-driven?

• Event-driven technique leads to “loosely coupled systems/applications”

• “loosely coupled systems/applications” provide enormous flexibility

• Samples of event driven processes• Customer has accepted order [terms] [external trigger] • Stock for product A is less than 10 [number threshold]• Cancelation period has passed [time threshold]

• Samples of event driven applications• email address exists ? Prompt contact details• Customer age < 16? prompt parent authorization required• Customer has not reacted during cancelation period ? (ship)

ordered product

Demonstration goals

• We model the process in Lucidchart– Use a standard (pre-defined) sequence– Showcase an event driven “flow”chart

• Harmony uses flowchart to generate the system– We use the generated system to verify the modeled

process (the sequence, aka workflow )• We then enrich the application:

– Replace with a decision table– Add files / data to match “real” world process– Add authorization / access

• Verify the system ( (workflow / process)• Validate the system with users

decision

change

check

generate

Event driven = loosely coupled system

• event driven processes– define processes using conditions such as

• Customer accepts order [=yes] [external trigger] • product stock less than 10 [number threshold]• Cancelation period more than 3 days [time threshold]

• event driven applications• email address exists ? Prompt contact details• Customer age < 16? prompt parent authorization required• Customer has not reacted during cancelation period ? (ship)

ordered product

• events depend on each other to the least extent practicable• avoid a pre-defined sequence:

• when step1 is done do step2, • when step2 is done do step3

Demonstration goals

• We model the process in LucidChart– Use a standard (pre-defined) sequence– Show case an event driven “flow”chart

• Harmony uses flowchart to generate the system– We use the generated system to verify the modeled process

(the sequence, aka workflow )• We then enrich the application:

– Replace with a decision table– Add files / data – which trigger the process– Add authorization / access

• Verify the system (workflow / process)

decision

change

check

generate

What we’ll do

• Model our process using 4 LucidChart pages:– Process decomposition

• (Not our favourite ; so don’t spend too much time verifying this )

– “Standard” fLowchart• Process flow + datastores (files) + decisions

– “domain” model for customer service processes– Event driven flows (process steps)

• Log on to Harmony instance– Import the diagram & generate app (takes 30 -60 seconds)– Verify the process - log on to the Harmony app

• Data drives the process – checking decision support outcomes

– Change our application - log on to Google DOCS• Insert a Decision Table • Generate the app

– Verify the process change

check

generate

LUCID CHART & HARMONYBridging the GAP between analysis, design & app development

(1) Traditional process decompositionTourism – book an accommodation

(2) The traditional flowchart

• Extract of the flowchart – the selection/booking process

(3) Event driven processCustomer service domain

• The request is processed by the customer service department

• Customer/booker requests extra (non-available) rooms

(4) event driven analysis

• After generating the application– We’ll modify the app and add a decision table which

determines which visitors from foreign countries need an ID

(4) event driven analysis

• After generating the application– Add the decision table which determines which

visitors need an ID

Generate the App

Run the app

• All [Lucidchart] processes are created in our app.– Including the sequence

• Pre-defined• Event driven (depending on data values)• Run the app: https://www.liquidsequence.net/latest/

• Note on authorization• All events (process steps) are visible when logging on using

“Administrator” role

Start workflow: step 0

• The flowchart step-0

• is translated into a Harmony app step

• Harmony’s built-in decision management shows next step

Enter data: firing events

• We’ve modeled the step as “standalone” – Not directly linked to other processes– Instead the step is conditioned by “data””

• Enter data– Step (event) fired

Model vs application

• The flowchart is complex to verify• Application is easy to verify

– Decisions are clear– Simulate by entering any data

Test variances• We set value to Yes• New event is fired

Add a decision table

• the generated app contains a file– A file is one-dimensional

• we will replace the file by a DT– a standard 2-dimensional decision table

• What do we need to do?– delete the datasheet (the file)– import or create the DT– upload the configuration – (after 30 secs the new version is ready: run the app)

The 2-dimensional decision table

For any found combination (like UK, FR) 4 outcomes are generated:brand name, website URL, id required, price multiplierFor samples: http://www.liquidsequence.com/Decision-Table-samples.html

ZERO CODING

Sample of an event/sensor driven The DMN lending application (Decistion Table implementaion)

Click here to view the case

Outcomes of 3 decision tables (1/3)are input for DT # 4

Click on image to view original (LucidChart) diagram online

We create a dialog(2/3)in order to provide input

• One rule: – Ensure that dialog items are match the

inputs to the decision tables

And this is the [Harmony] result !(2hours work (tops))

• Access the app

Useful links

• Run the demo – https://www.liquidsequence.net/demo2/– Creating a system support the product sales process – http://www.slideshare.net/LiquidSequence/online-sales-application-select-produc

t-create-quote-accept-and-ship-from-warehouse

• Lucidchart

– Online diagram (process model)– (same) PDF

• Decision tables– samples– TableSpeak – Decision modeling Lending sample