Workflow Form Element Reference

In the Geocortex Workflow TypeScript SDK, form elements are represented by TypeScript React Components.

import * as React from "react";
import { CustomFormElementProps } from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";

function CustomFormElement(props: CustomFormElementProps) {
    return <div>Hello. Is it me you're looking for.</div>;
}

export default CustomFormElement;

Registering Form Elements

Form elements must be registered with a custom activity that extends RegisterCustomFormElementBase. This custom activity can call this.register to register each form element.

tip

Only one form element registration activity is needed per app, as it can register multiple custom form elements. Learn more about implementing custom activities.

import { RegisterCustomFormElementBase } from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";
import CustomFormElement from "../form-elements/CustomFormElement";

// @category Custom Activities
// @description Registers custom form elements for the application
export class RegisterCustomFormElements extends RegisterCustomFormElementBase {
    static action = "your:unique:namespace::RegisterCustomFormElements";

    static suite = "your:unique:namespace";

    async execute(): Promise<void> {
        this.register("CustomFormElement", CustomFormElement);
        return;
    }
}

Using Form Elements

Custom form elements can be used in a form through the special "custom" form element. This form element displays custom form elements by referencing them by the id they were registered with.

Raising Form Events

Geocortex Workflow form elements can raise events. A custom form element can also raise events, including a custom event type.

Events are raises through the raiseEvent function on the element props. The follow custom form element demonstrates how various form events can be raised.

import * as React from "react";
import { CustomFormElementProps } from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";

// A simple React Component that demonstrates raising events.
export default const CustomFormElement = (props: CustomFormElementProps) => {
    const raiseClick = event => {
        // Raise the clicked event.
        props.raiseEvent("clicked", new Date());
    };

    const raiseChange = event => {
        // Raise the changed event.
        props.raiseEvent("changed", new Date());
    };

    const raiseCustom = event => {
        // Raise the custom event with a custom event value.
        const eventValue = {
            customEventType: "custom1",
            data: new Date()
        };
        props.raiseEvent("custom", eventValue);
    };

    return (
        <div>
            A simple custom form element
            <br />
            <button onClick={raiseClick}>Raise click</button>
            <button onClick={raiseChange}>Raise change</button>
            <button onClick={raiseCustom}>Raise custom</button>
        </div>
    );
};

Access Properties of Custom Form Elements

A custom form element may produce a value that a workflow needs to access at runtime. You can set a property on the props.element object to expose that value to the form.

const CustomFormElement = (props: CustomFormElementProps>) => {
    const handleClick = event => {
        const { element, raiseEvent } = props;

        // Get the value from the button.
        // Parse as an integer because the value will be a string.
        const value = parseInt(event.target.value);

        if (element.value !== value) {

            // Update the element's value.
            element.value = value;

            // Raise the changed event
            raiseEvent("changed", 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.

Registering Form Elements#

tip

Using Form Elements#

Raising Form Events#

Access Properties of Custom Form Elements#

Registering Form Elements

Using Form Elements

Raising Form Events

Access Properties of Custom Form Elements