Skip to main content

Create a Form Element

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

Prerequisites​

Set up the VertiGIS Studio 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/elements 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 VertiGIS Studio Workflow TypeScript SDK, form elements are represented by TypeScript React Components.

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

interface DemoProps extends FormElementProps {}

function Demo(props: DemoProps) {
    return <div>Hello. I'm a form element!</div>;
}

Registering Form Elements​

Form elements must be registered by exporting a registration object declaring your new element.

const DemoElementRegistration: FormElementRegistration<DemoProps> = {
    component: Demo,
    id: "Demo",
};

export default DemoElementRegistration;

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

Get Started

Form Element Reference

Learn more about implementing custom form elements

Get Started

Implement a Custom Activity

Implement a custom activity for web applications

Get Started

Reference a Third Party Library

Reference a third party library in web applications

Get Started