Skip to content

3.6.10. Custom Activity

Jump to bottom
Ettiene Mare edited this page May 27, 2021 · 8 revisions

You can add your own Custom Activity to the workflow engine.
You will need to add a reference to your library to the page that host the workflow.
You need to register your activity with the Workflow engine.
The Custom Activity is configured in the process definition.

Specification

The Custom Activity is configured in the process definition.
Add a reference to your library to the page that host the workflow.
You need to conform to the Activity interface.

export interface Activity {
    name: string;
    type: string;
    execute(): Promise<boolean>;
}

Html Page

<!DOCTYPE html>
<html>
   <head>
      <script src="activities/custom.activity.js"></script>
      <script src="activities/custom.activity-alt.js"></script>
   </head>
   <body>
       <polaris-workflow url="wf/settings" process="default"></polaris-workflow>
       <script>
            const wf = document.querySelector("polaris-workflow");

            customElements.whenDefined('polaris-workflow')
                          .then(() => wf.addActivity(new CustomActivity()));   
    
            const replace = true;
            customElements.whenDefined('polaris-workflow')
                          .then(() => wf.addActivity(new CustomAltActivity(), replace));    
       </script>    
   </body>
<html>

Process You need to have a name and type defined in the definition.

{
   "name" : "my-process",
   "activities": [
     {
         "name": "my-custom-activity",
         "type": "custom-activity"
     }
   ]
}

Parameters

Parameter Description
name The name of the activity.
type The type of the activity, it should be adecision-activity.
other You need to add all the properties or your activity you wish to configure here.

Custom Activity

class CustomActivity {
    get ctx() { return this._ctx; }
    set ctx(value) { this._ctx = value; }

    // This is your own property, add it on the process definition.
    // {"name": "send-mail", "type": "custom-activity", "next": "success" }     
    get next() { return this._next; }
    set next(value) { this._next = value; }

    constructor() {
        this.name = 'my-custom-activity';
        this.type = 'custom-activity';
    }
    
    execute() {
        return new Promise((resolve) => {
            alert('Custom Activity');

            this.ctx.wf.goto(this.next);
            resolve(true);
        });
    };
}

Home

  1. Setup

  2. Configure

  3. Design

    3.1.Introduction

    3.2. Core

    3.2.1. Workflow
    3.2.2. Analytics
    3.2.3. Messages

    3.3. Services

    3.3.1. Workflow
    3.3.2. Analytics
    3.3.3. Config
    3.3.4. Model
    3.3.5. Validator
    3.3.6. Http

    3.4. Validators

    3.4.1. Required
    3.4.2. Regex
    3.4.3. Range
    3.4.4. Custom

    3.5. Pipes

    3.5.1. Currency

    3.6. Activities

    3.6.1. Page
    3.6.2. Api
    3.6.3. Assign
    3.6.4. Decision
    3.6.5. Code
    3.6.6. IPC
    3.6.7. Finish
    3.6.8. Redirect
    3.6.9. Switch
    3.6.10. Custom

    3.7. Web Components

    3.7.1. React

Clone this wiki locally