Create a Form Element

This article will walk you through creating a new workflow form element for web applications.

Prerequisites#

Set up the Geocortex Workflow TypeScript SDK.

Create a Form Element#

  1. Open up a terminal shell in the SDK folder.
  2. Run the command npm run generate and follow the instructions to create a new form element named MyCustomElement. This script creates a custom form element skeleton that you can build on with your own custom logic. The script will perform the following operations:
    1. Create a new form element .tsx file with the provided name in the src/activities folder.
    2. Populate the form element .tsx file from a form element template.
    3. Exports the element in src/index.ts to make it available for use.
tip

It's convention to use PascalCase for form element names. You can add multiple activities and form elements to the same project.

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

import * as React from "react";
import {
CustomFormElementProps,
RegisterCustomFormElementBase,
} from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";
function CustomFormElement(props: CustomFormElementProps) {
return <div>Hello. I'm a form element!</div>;
}

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. The name of your element registration activity should not be modified after it has been deployed, as it is a unique identifier used by the Workflow runtime.

import {
CustomFormElementProps,
RegisterCustomFormElementBase,
} from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";
export class RegisterCustomFormElement extends RegisterCustomFormElementBase {
async execute(): Promise<void> {
this.register("CustomFormElement", CustomFormElement);
}
}

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. Enter your element's id in the Custom Type input.

Deploy the Form Element#

Follow the instructions to deploy the activity pack.

Test the Form Element#

Now you can build a workflow that uses your new custom form element!

Next Steps#

Implement a Star Rating Form Element

Implement a custom star rating form element for web applications

Form Element Reference

Learn more about implementing custom form elements

Implement a Custom Activity

Implement a custom activity for web applications

Reference a Third Party Library

Reference a third party library in web applications