Workflow Form Element Reference
#
Styling Form ElementsA custom form element can be styled using CSS in a few different ways:
#
Inline CSSInline 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 FileYou 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-button { background-color: blue; color: white;}
#
Properties of Form Elementsvalue
#
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 "@geocortex/workflow/runtime";
// 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 PropertiesYou can declare additional properties on your props
interface that should be publicly accessible in the workflow.
import { FormElementProps, FormElementRegistration,} from "@geocortex/workflow/runtime";
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 StateFor 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 "@geocortex/workflow/runtime";
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 EventsWorkflow 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> );};