Reference a Third Party Library for Web Application Environments

You can reference third party JavaScript libraries to augment custom activities or custom form elements.

Prerequisites

Follow the instructions in the Web Applications SDK page to set up your development environment.

note

A working knowledge of TypeScript is recommended before extending Workflow for web-based hosts.

Adding a Dependency

You can install the dependency in your project using npm. For example, npm install moment. After your package has been installed you can import and use the library as you normally would. This example demonstrates a custom activity that uses the moment library to return the current date and time in a human readable format.

import type { IActivityHandler } from "@vertigis/workflow/IActivityHandler";
import * as moment from "moment";

/**
 * @category Custom Activities
 * @description An activity that returns the current date and time.
 */
export class CurrentTime implements IActivityHandler {
    async execute(): Promise<string> {
        return moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
    }
}

Example: Using the react-color Component

1. Run npm install react-color in the terminal.
2. Follow the instructions above to create and register a new custom form element ColorPicker.tsx React component that just returns a single color picker.

import * as React from "react";
import { SketchPicker } from "react-color";
import {
    FormElementProps,
    FormElementRegistration,
} from "@vertigis/workflow";

interface ColorPickerProps extends FormElementProps<string> {}

function ColorPicker(props: ColorPickerProps): React.ReactElement {
    const { setValue, value } = props;

    const handleColorChange = (newColor) => {
        const newValue = newColor.hex;
        setValue(newValue);
    };

    return (
        <SketchPicker color={value} onChange={handleColorChange} />
    );
}

const ColorPickerElementRegistration: FormElementRegistration<ColorPickerProps> =
    {
        component: ColorPicker,
        getInitialProperties: () => ({ value: "#ff0000" }),
        id: "ColorPicker",
    };

export default ColorPickerElementRegistration;