Skip to content

Slickflow Coding Graphic Model User Manual

besley edited this page Dec 2, 2019 · 4 revisions

Process diagram can be generated by c# code rathan than GUI interface.

Introduction

When the business personnel draw the process, they usually use the GUI interface interaction operation to complete it. However, for the system management users who need frequent operation or management of more processes, they need an auxiliary tool to help them quickly complete the process creation, editing and updating.Slickflow.graph graphic coding modeling tool directly writes code through the command line to create graphics, which realizes the rapid improvement of the efficiency of drawing process graphics.

Background

The open source project slickflow.engine can be downloaded from http://github.com/besley/slickflow

The code text html page can be accessed from http://demo.slickflow.com/sfd/model

Using the code

1. Graphic creation code text

First of all, it is explained by a code snippet, which creates a simple sequence flow.The code is as follows:

using Slickflow.Engine.Common;
//firstly, create a process model builder
var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");
var process = pmb.Start("Start")
    .Task("Package Books", "003") 
    .Task("Deliver Books", "005") 
    .End("End")
    .Store();

The screenshot is as follows:

sequence flow chart

1.1 process creation command

Example command:

var pmb = ProcessModelBuilder.CreateProcess("BookSellerProcess", "BookSellerProcessCode", "3");

Parameters: (processname, processcode, processversion)

1.2 active node creation command

1.2.1 start node creation: Start()

Example command:

pmb.Start("Start")

Parameters: (activityname, activitycode)

1.2.2 end node creation: End()

Example command:

pmb.End("End")

Parameters: (activityname, activitycode)

1.2.3 task node creation: Task()

1.2.3.1 basic methods

Example command:

pmb.Task("Package Books", "003")

Parameters: (activityname, activitycode)

1.2.3.2 extension method

Example command:

Pmb.Task(
    VertexBuilder.CreateTask("Task-001", "task001")
      .SetUrl("www.slickflow.com")
      .AddRole("TestRole")
      .AddAction(
    VertexBuilder.CreateAction(ActionTypeEnum.Event,
            FireTypeEnum.Before,
            "Slickflow.Module.External.OrderSubmitService"
     )
)

1) CreateTask(): create task node

Parameters: (task) task is an vertex object

2) SetUrl(): set node URL page properties

Parameter: (pageurl) page address string

3) AddRole(): set node binding role data

Parameter: (rolecode) role code

4) AddAction(): add action action details

Parameter: (action) object

5) CreateAction(): create action action action detail object

Parameters: (actiontype, firetype, methodname)

1.2.4 branch node creation: Split()

Branches and merges are usually created as a whole code snippet, as shown in the following figure. A flow chart of two branches is created, and each branch has two task nodes. A complete code snippet example is as follows:

pmb.Split("split")
    .Parallels(
      ()=>pmb.Branch(
      ()=>pmb.Task("task-010", "task010"),
      ()=>pmb.Task("task-011", "task011")
     )
     ,() => pmb.Branch(
      () => pmb.Task("task-020", "task020"),
      () => pmb.Task("task-021", "task021")
     )
     )
     .Join("join")

The screenshot is as follows:

parallel flow chart

1) Split(): create branch node

Parameters: (activityname, activitycode)

2) Parallels(): external method to create multiple branches

Parameters:

(params Func<ProcessModelBuilder>[] branches)

Description: parameter branches refers to the combination of branch lists. A parallel mode can be composed of multiple branches. Params refers to the keyword of variable parameter list.

3) Branch(): branch specific creation method

Parameters:

(params Func<ProcessModelBuilder>[] nodes)

Description: parameter nodes refers to the combination of node lists. A branch can be composed of multiple nodes. Params refers to variable parameter list keywords.

4) Join(): create merge node

Parameters: (activityname, activitycode)

Note: merging and branching usually occur in pairs to express the branch selection mode of decision type.

1.3 graphic storage command

Example command:

Pmb.Store();

The storage command will serialize the above graph as XML and store it as a record in the database.

2. Graphic maintenance command

2.1 process loading command

  1. Command:
var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");

Parameters: (processcode, processversion)

Description: the unique key identifier consisting of process code and version is used to uniquely determine the process record.

2.2 graphic node edit code

  1. Command:
using Slickflow.Engine.Common;
//firstly load a process model builder
var pmb = ProcessModelBuilder.LoadProcess("BookSellerProcessCode", "3");
//execute deffrient task operation once together
pmb.Add("003", ActivityTypeEnum.TaskNode, "zzz", "zzz-code")
   .Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")
   .Set("003", (a) => pmb.GetBuilder(a).SetUrl("slickflow.com").SetName("mer-sss-ryxmas"))
   .Replace("004", ActivityTypeEnum.TaskNode, "task222", "222")
   .Exchange("222", "zzz-code")
   .Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")
   .Remove("222", true)
   .Update ();

Note: all update operations such as adding, inserting, exchanging, replacing, branching, editing and deleting graphic node elements can be completed through the chain service interface at one time.

2.3 node editing command details

2.3.1 add node: Add()

  1. Command:
//add a new task node zzz after task with code 003(Package Books)
pmb.Add("003", ActivityTypeEnum.TaskNode, "zzz", "zzz-code")

Parameters: (currentactivitycode, addactivitytype, addactivityname, addactivitycode)

Note: the add() method is to add a new node after the current node, and keep the newly added node on the process connection.

  1. figure example after command execution:

add new activity

2.3.2 insert node: Insert()

  1. Command:
//insert a new task node named task004 before task 003(Package Books)
pmb.Insert("003", ActivityTypeEnum.TaskNode, "task004", "004")

Parameters: (currentactivitycode, addactivitytype, addactivityname, addactivitycode)

Note: the insert() method is to add a new node in front of the current node, and keep the newly added node on the process connection.

  1. figure example after command execution:

insert an activity

2.3.3 update node attribute: Set()

  1. Command:
//set task 003(Package Books) property url and name
pmb.Set("003", (a) => pmb.GetBuilder(a).SetUrl("slickflow.com").SetName("mer-sss-ryxmas"))

Parameters: (currentactivitycode, vertexbuilder)

Description: according to the code representation of the current node, get the current node object, and then update the URL property and name property.

  1. figure example after command execution:

set activity property

2.3.4 replacement node: Replace()

  1. Command:
//replace task 004(task004) by the new task named task222
pmb.Replace("004", ActivityTypeEnum.TaskNode, "task222", "222")

Parameters: (currentactivitycode, replacedbyactivitytype, replacedbyactivityname, replacedbyactivitycode)

Note: you can replace the current node with a new node. The new node is replacedbyactivity, which is equivalent to performing the remove operation first and then the add operation.The unique ID Guid of the original connection transition will also change after the node is replaced.

  1. figure example after command execution:

replace activity

2.3.5 exchange node: Exchange()

  1. Command:
//exchange task 222 to zzz
pmb.Exchange("222", "zzz-code")

Parameters: (firstactivitycode, secondactivitycode)

Note: in this method, the position of two nodes is changed, and the attributes of other nodes remain unchanged.What's more, after the exchange, the connection transition between nodes is given a unique ID guid again, because the node of the connection has changed, so the value of the connection ID guid needs to be changed.

  1. figure example after command execution:

exchange two activity

2.3.6 branch node: Fork()

  1. Command:
//fork a new Task 555 from task zzz
pmb.Fork("zzz-code", ActivityTypeEnum.TaskNode, "yyy", "555")

Parameters: (currentactivitycode, forkactivitytype, forkactivityname, forkactivitycode)

Note: this method is to add a branch path to the current node. If there is no subsequent node in the current node, it is the same as adding an add method.If the current node already has a subsequent node, a new node is added in the adjacent location.

  1. figure example after command execution:

fork new branch

2.3.7 delete node: Remove()

  1. Command:
//remove the task 222, and afterward nodes will be caught up
pmb.Remove("222", true)

Parameter: (currentactivitycode, iscaughtup)

Note: delete the current node. If the current node already has a subsequent node, you need to advance the subsequent node to the location of the currently deleted node, including adding new connections.

  1. figure example after command execution:

remove activity

2.3.8 add branch / merge: Cover()

  1. Command:
//cover a split/join pattern into canvas
pmb.Cover("003", "005",
      VertexBuilder.CreateSplit(GatewayDirectionEnum.AndSplit,"AndSplit", "AndSplicCode"), 
      VertexBuilder.CreateJoin(GatewayDirectionEnum.AndJoin, "AndJoin", "AndJoinCode"), 
      VertexBuilder.CreateTask("branchTask001", "b001"),
      VertexBuilder.CreateTask("branchTask002", "b002")
   )
   .Update();
  1. figure example after command execution:

cover block

2.3.9 delete branch / merge: Uncover()

  1. Command
//uncover a split/join pattern from canvas
pmb.Uncover("003", "005")
   .Update ();
  1. figure example after command execution:

uncover block

2.3.10 connection node: Connect()

  1. Command
//connect two task node
pmb.Connect("003", "005")
   .Update ();
  1. figure example after command execution:

connect two activity

2.3.11 disconnect node: Disconnect()

  1. Command:
//disconnect two task node
pmb.Disconnect("003", "005")
   .Update ();
  1. figure example after command execution:

disconnect two activity

2.4 process update command Update()

  1. Command:
pmb.Update();

Note: the process node and connection data will be XML serialized again, and the data will be saved to the database.

3. Programming environment

At present, the code programming modeling tool has provided online use experience tool, the left side is the plain text code input area, and the right side is the updated graphic display area.Each time the code text is executed, the graphic display on the right is updated.

code editor

4. Online address

In order to facilitate process enthusiasts to learn and master the slickflow process graphics language model, an example environment for online code writing is specially provided. Please visit according to the following address:

http://demo.slickflow.com/sfd/model

5. Summary

The implementation of the code programming modeling tool facilitates users to create and update graphs quickly, and the code commands are easy to learn. It is suggested that process technicians, process management users and system analysts can invest time in learning and mastering, so as to improve the efficiency of process development.

Points of Interest

The beginner is better to read this manual and practice programming on the online editor page. Then you can grasp some functions with a high level adminstration of process diagram management. Finally, you will like to create and update diagram by code. But it depends which style you like to choose. Thanks your suguesstion here.