Workflow Engine Tutorials

Introduction

The most important Workflow Engine concepts and extended features are described in this section.

You will learn to interact with our solution easily 🚀

— We demonstrate how to create a web application from scratch, and gradually we are going to build it up in order to implement most of the Workflow Engine functionalities.

Solution stack

The technology stack or data ecosystem which includes the technology services used to build and run the sample application, are listed as follows:

• Programming languages: C#, JavaScript.
• Terminal prompt or PowerShell.
• Docker container.
• React JavaScript library.
• SignalR library for Microsoft ASP.NET.
• Lodash JavaScript utility library.
• MS SQL Server Database.
• Node.js runtime environment.
• .NET development frameworks JetBrains Rider or Visual Studio.
• Dependency injection (DI) software design pattern in ASP.NET Core.

Be aware

The code improvements are available through OptimaJet GitHub repository. A new branch is created for each tutorial i.e. the path branches off from previous one.

— You can clone the GitHub repository here.

Common terms

Code changes

Highlighted lines indicate the ones that need attention. If the file is created for the first time, then any modified lines are not marked in it. If the file is modified within the tutorial, then the modified, added, and deleted lines are marked in it as follows.

var x = 42; // highlighted line of code

var x = 42; // modified line of code

var x = 42; // added new line of code

var x = 42; // deleted line of code

Source code

At the beginning of each section, the following branches from GitHub are indicated:

• the branch with the result of the previous tutorial
• the branch with the result of current tutorial
• a link to a pull request with the changes that need to be made in the code in order to complete the tutorial

Info

This way you can take the lessons in any order you need.

Tutorials list 📑

We will present the concepts systematically in the following sections, so you should complete these tutorials step by step. Therefore, we suggest to start with first tutorial by clicking on panel React integration from scratch.

📄️ React integration from scratch

In this guide we will explain how to integrate Workflow Engine with React.

📄️ React sample in Docker

The required steps to run React sample in Docker Compose are described in this guide

📄️ Introducing parameters

Process parameters implementation in React sample application

📄️ Action interaction with SignalR

In this guide we describe how to implement SignalR library in React sample

📄️ States and Activities

In this tutorial we describe how to implement set state, set activity and resume methods

📄️ Dependency injection

In this tutorial we describe how to implement Dependency injection pattern

📄️ Conditional branches

In this tutorial we describe how conditional transitions work in WFE

📄️ Error handling

In this tutorial we describe how exceptions can be handled during process execution

Sample application update

The WFE sample application can be updated to the latest version in this tutorial series by following these simple steps:

1. The Designer templates must be updated. They are available in our GitHub repository WorkflowEngine.NET, so you just should copy the folder templates to the directory frontend/public/templates in your project. The custom activity form weatherActivity.html and the SVG template weatherActivity.svg should remain in the templates folder (see also React integration from scratch).

2. The database scripts must be updated as well. The automatic database update is described in the tutorial React sample in Docker. Therefore, download the SQL script from the GitHub repository, and save it in the Backend/WorkflowApi/Sql/CreatePersistenceObjects.sql file. Then go to the root folder of the tutorial and run the following commands:

   cd ./frontend
   npm install @optimajet/workflow-designer-react@latest --legacy-peer-deps
   cd ..

3. The NuGet packages in the Backend project must be added also by executing:

   cd ./Backend/WorkflowApi
   dotnet add package WorkflowEngine.NETCore-Core
   dotnet add package WorkflowEngine.NETCore-ProviderForMSSQL
   
   cd ../WorkflowLib
   dotnet add package WorkflowEngine.NETCore-Core
   dotnet add package WorkflowEngine.NETCore-ProviderForMSSQL   
   cd ../..

Afterward, all dependencies will be updated. Quite simple isn't?

If you have additional questions, please don't hesitate to contact us at any time.

We'll take a look!