Reference a Third Party Library for Web Application Environments

You can reference external 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

  1. Install the dependency in the activity sdk. For example, npm install moment.
  2. Copy the dependency to dist/deps/.
important

It's important that you copy and not move the dependency from the node_modules folder, as this will make it accessible to both the development server and production activity pack.

  1. Add a call to mapDependencies() to the configure() method in src/main.ts.

For example, if you wanted to use the moment.js library and had the file moment.js located in a folder called deps/moment within the dist folder, you would write the following:

import { mapDependencies } from "@geocortex/workflow/runtime/app/ActivityPackUtils";
function configure(prefix: string) {
mapDependencies({ moment: "/deps/moment/moment" }, prefix);
}

The root that the library path refers to is the dist folder, and the .js suffix on the library file should be omitted.

  1. Import and use the library as you normally would use a javascript library. This example demonstrates a custom activity that uses the moment.js library to return the current date and time in a human readable format.
import * as moment from "moment";
// @category Custom Activities
// @description An activity that returns the current dat and time.
export class CurrentTime {
static action = "your:unique:namespace::CurrentTime";
static suite = "your:unique:namespace";
async execute(): Promise<string> {
return moment().format("dddd, MMMM Do YYYY, h:mm:ss a");
}
}
important

If the external dependency has other dependencies, you will need to call mapDependencies for each one.

Reference External React Components

If your Activity Pack contains a custom form element that relies upon an external React component, you need to add a call to mapDependencies() to the configure() method in src/main.ts, the same as for other external libraries.

Example: Using the react-circular-color Component.

  1. Run npm install react-circular-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 } from "@geocortex/workflow/runtime/app/RegisterCustomFormElementBase";
import * as React from "react";
import CircularColor from "react-circular-color";
export default class ColorPicker extends React.Component<
CustomFormElementProps
> {
render() {
return <CircularColor size={200} />;
}
}
  1. Copy the react-circular-color folder from your node_modules to dist/deps
  2. Add a call for react-circular-color to mapDependencies() to the configure() method in src/main.ts.
import { mapDependencies } from "@geocortex/workflow/runtime/app/ActivityPackUtils";
function configure(prefix: string) {
mapDependencies(
{ "react-circular-color": "/deps/react-circular-color/build/index" },
prefix
);
}

Limitations

There are some limitations on the types of component you can load:

  • You can only import components that are defined using the AMD or UMD syntax.
  • You cannot import components defined using the CommonJS syntax.
Edit this page