Skip to main content
Custom steps allow you to insert your own UI between any two built-in steps in the Dromo import flow. See the Custom Steps guide for a walkthrough and examples.

Configuration

string
required
Unique identifier for this step. Used as a fallback label in the stepper progress bar if label is omitted.
"HEADER_SELECT" | "COLUMN_MATCH" | "SELECT_MATCH"
required
Which built-in step this custom step is inserted after.
string
Text shown in the stepper progress bar. Defaults to id if omitted.
string
URL of the page to render inside an <iframe> within Dromo’s modal.
(uploader, payload: unknown) => void | Promise<void>
Called when the iframe posts { type: "DROMO_MESSAGE", payload }. The uploader argument exposes the same mutation methods available in step hooks.All uploader methods return Promise<void> — await them when order matters.

Registering custom steps

JavaScript / TypeScript

Call registerCustomStep on the DromoUploader instance before open(). Multiple calls at the same insertAfter position are presented in registration order.

React

Pass an array of config objects to the customSteps prop:

Angular

Bind a config array to the [customSteps] input on lib-dromo-uploader:

postMessage API

Your iframe page communicates with Dromo by posting messages to window.parent.
Advance to the next step.
Return to the previous step.
Trigger the onMessage callback with the uploader instance and payload. Does not automatically navigate — post DROMO_NEXT separately when ready.

Uploader methods in onMessage

The uploader instance passed to onMessage exposes the following methods. These are the same mutation methods available in step hooks.
Dynamically add a field to the import schema. See instance.addField.
Remove a field from the schema. See instance.removeField.
Inject rows into the dataset. Returns the IDs of the added rows. See instance.addRows.
Remove rows from the dataset by ID. See instance.removeRows.
Update the current user associated with the import.