Skip to main content

Workflow Editors

The Sequential Workflow Designer requires editors for each step type to enable editing of step properties. You must implement an editor for every step type you wish to use in your workflow. Additionally, the designer expects a special editor called the "root editor", which is used to edit the workflow definition itself. This editor is visible when no step is selected.

Important

This article explains the implementation of editors for the Sequential Workflow Designer. NoCode JS also offers the Sequential Workflow Editor product, which allows you to create editors using a builder. With this product, you don't need to write HTML or JavaScript code to create editors. The following article describes how to implement editors without using the Sequential Workflow Editor.

Regardless of the framework you are using, there is a central concept behind the implementation of editors. The designer expects you to provide components or callbacks that will be used to render the editors for the steps or the root editor. These components or callbacks receive the following information as an argument:

  • Step Editor:
    • step - the step to be edited,
    • context - the context object that is required to inform the designer about the changes made in the editor,
    • definition - the workflow definition object that is being edited.
    • isReadonly - a boolean value indicating if the editor should be read-only.
  • Root Editor:
    • definition - the workflow definition object that is being edited,
    • context - the context object that is required to inform the designer about the changes made in the editor.
    • isReadonly - a boolean value indicating if the editor should be read-only.

Based on the information provided, you can create an editor for each step type or the root editor. The most important part of the editor is to inform the designer about the changes made in the editor. This is done by calling one of the methods provided by the context object. The context object is a bit different for the root editor and the step editor.

interface StepEditorContext {
  notifyNameChanged(): void; // Name of step changed
  notifyPropertiesChanged(): void; // Any property of step changed
  notifyChildrenChanged(): void; // Children of step changed (refers to steps with children like switch, container, etc.)
}

interface RootEditorContext {
  notifyPropertiesChanged(): void; // Any property of workflow definition changed
}

As you can notice the context object distinguishes the notification for the name change, properties change, and children change. Depends on the change you made in the editor, you should call the appropriate method to inform the designer about the change. Please be sure to call the appropriate method after any change, otherwise, the designer may not work as expected.

Example​

Check the below example.

const configuration = {
  editors: {
    stepEditorProvider: (
      step: Step,
      context: StepEditorContext,
      isReadonly: boolean) => 
    {
      const root = document.createElement('div');
      const nameInput = document.createElement('input');
      nameInput.value = step.name;
      nameInput.addEventListener('input', () => {
        step.name = nameInput.value;
        context.notifyNameChanged();
      });
      root.appendChild(nameInput);
      // ...
      return root;
    },
    globalEditorProvider: (
      definition: Definition,
      context: GlobalEditorContext,
      definition: Definition,
      isReadonly: boolean) => 
    {
      // ...
    }
  },
  // ...
};

More examples with using only JavaScript can be found in the examples folder.

Hide Editor​

If you don't need the editor, you can disable it by setting the editors property to false. This may be useful when you want to show only the workflow diagram without the ability to edit the workflow.

const configuration = {
  editors: false,
  // ...
};

External Editor​

The default editor provided by the designer is attached to the canvas and covers a part of the canvas. If you want to customize this behavior, you can use the external editor feature provided by the pro version of the designer.