Skip to main content

Introducing Formengine - The New Formbuilder, try for FREE

Workflow Engine Tutorials


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:

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

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.

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!