Workflow Form Element Reference

Styling Form Elements

A custom form element can be styled using CSS in a few different ways:

Inline CSS

Inline CSS is the simplest way to style your elements, but doesn't have the same flexibility as a CSS style sheet.

const CustomFormElement = (props: FormElementProps) => (
    <button style={{ backgroundColor: "blue", color: "white" }}>
        Click me
    </button>
);

CSS File

You can separate your element styles into a separate CSS style sheet alongside your element. It is important that you import your CSS file within your component for the styles to be injected at runtime.

import "./CustomFormElement.css";

const CustomFormElement = (props: FormElementProps) => (
    <button className="CustomFormElement-button">Click me</button>
);

CustomFormElement.css

.CustomFormElement-button {
    background-color: blue;
    color: white;
}

Properties of Form Elements

value

A custom form element may produce a value that a workflow needs to access at runtime. To update the value of your element, you can use the setValue() API provided on the props interface.

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

// We've declared the type of `value` to be `string` here.
interface CustomFormElementProps extends FormElementProps<string> {}

const CustomFormElement = (props: CustomFormElementProps) => (
    <input
        onChange={(event) =>
            props.setValue(event.currentTarget.value)
        }
        value={props.value}
    />
);

You can then use the Get Form Element Property activity to access the value property, along with other properties supported by custom form elements.

Custom Public Properties

You can declare additional properties on your props interface that should be publicly accessible in the workflow.

import {
    FormElementProps,
    FormElementRegistration,
} from "@vertigis/workflow";

interface CustomFormElementProps extends FormElementProps<string> {
    value2: string;
}

const CustomFormElement = (props: CustomFormElementProps) => {
    return (
        <div>
            <input
                onChange={(event) =>
                    props.setValue(event.currentTarget.value)
                }
                value={props.value}
            />
            <input
                onChange={(event) =>
                    props.setProperty(
                        "value2",
                        event.currentTarget.value
                    )
                }
                value={props.value2}
            />
        </div>
    );
};

Internal State

For any state that you need to maintain for your element that doesn't need to be public, you can use React component state to store your state locally within your element.

import { useState } from "react";
import {
    FormElementProps,
    FormElementRegistration,
} from "@vertigis/workflow";

interface CustomFormElementProps extends FormElementProps<string> {}

const CustomFormElement = (props: CustomFormElementProps) => {
    const [showInput, setShowInput] = useState(true);

    return (
        <div>
            <button onClick={() => setShowInput(!showInput)}>
                Toggle input
            </button>
            {showInput && (
                <input
                    onChange={(event) =>
                        props.setValue(event.currentTarget.value)
                    }
                    value={props.value}
                />
            )}
        </div>
    );
};

Raising Events

Workflow form elements can raise events. A custom form element can also raise a custom event.

Events are raised through the raiseEvent() function on the element props. The following custom form element demonstrates how events can be raised.

/**
 * A simple React Component that demonstrates raising events.
 */
const CustomFormElement = (props: FormElementProps) => {
    const raiseCustom = (event) => {
        // Raise the custom event with a custom event value.
        // The event value is arbitrary and can be defined
        // however you would like.
        const eventValue = {
            customEventType: "custom1",
            data: new Date(),
        };

        props.raiseEvent("custom", eventValue);
    };

    return (
        <div>
            <p>A simple custom form element</p>
            <button onClick={raiseCustom}>Raise custom event</button>
        </div>
    );
};