Skip to main content

Reference a Third Party Library for Web Application Environments

You can reference third party JavaScript libraries to augment custom activities or custom form elements.

Prerequisites#

Follow the instructions in the Web Applications SDK page to set up your development environment.

note

A working knowledge of TypeScript is recommended before extending Workflow for web-based hosts.

Adding a Dependency#

You can install the dependency in your project using npm. For example, npm install moment. After your package has been installed you can import and use the library as you normally would. This example demonstrates a custom activity that uses the moment library to return the current date and time in a human readable format.

import type { IActivityHandler } from "@geocortex/workflow/runtime/IActivityHandler";import * as moment from "moment";
/** * @category Custom Activities * @description An activity that returns the current date and time. */export class CurrentTime implements IActivityHandler {    async execute(): Promise<string> {        return moment().format("dddd, MMMM Do YYYY, h:mm:ss a");    }}

Example: Using the react-color Component#

  1. Run npm install react-color in the terminal.
  2. Follow the instructions above to create and register a new custom form element ColorPicker.tsx React component that just returns a single color picker.
import {    CustomFormElementProps,    RegisterCustomFormElementBase,} from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";import React, { useEffect, useState } from "react";import { SketchPicker } from "react-color";
/** * A simple React Component that displays a color picker. * @param props The props that will be provided by the Workflow runtime. */const ColorPicker = (props: CustomFormElementProps) => {    const [color, setColor] = useState(props.element.value);
    // Update the form state when the color picker value changes.    const handleColorChange = (newColor) => {        const newValue = newColor.hex;        props.element.value = newValue;        props.raiseEvent("changed", newValue);        setColor(newValue);    };
    // Set local state when the form state changes.    useEffect(() => {        // Provide a default value if no value exists.        setColor(props.element.value ?? "#ff0000");    }, [props.element.value]);
    return (        <SketchPicker color={color} onChange={handleColorChange} />    );};
/** * @displayName Register ColorPicker Form Element * @category Custom Activities * @description Registers a ColorPicker form element. */export class RegisterColorPickerElement extends RegisterCustomFormElementBase {    /** Perform the execution logic of the activity. */    execute() {        this.register("ColorPicker", ColorPicker);    }}