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

​
id
string
required
Unique identifier for this step. Used as a fallback label in the stepper progress bar if label is omitted.
​
insertAfter
"HEADER_SELECT" | "COLUMN_MATCH" | "SELECT_MATCH"
required
Which built-in step this custom step is inserted after.
ValueInserted after
"HEADER_SELECT"Header row detection
"COLUMN_MATCH"Column mapping
"SELECT_MATCH"Select field matching, just before Review
​
label
string
Text shown in the stepper progress bar. Defaults to id if omitted.
​
url
string
URL of the page to render inside an <iframe> within Dromo’s modal.
​
onMessage
(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

dromo.registerCustomStep(config): void
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: 
<DromoUploader
  customSteps={[
    {
      id: "terms",
      insertAfter: "SELECT_MATCH",
      label: "Terms & Conditions",
      url: "https://your-app.com/terms-step.html",
    },
  ]}
  {/* other required props */}
>
  Import
</DromoUploader>

​
Angular

Bind a config array to the [customSteps] input on lib-dromo-uploader: 
customSteps = [
  {
    id: "terms",
    insertAfter: "SELECT_MATCH",
    label: "Terms & Conditions",
    url: "https://your-app.com/terms-step.html",
  },
];

<lib-dromo-uploader [customSteps]="customSteps" ...>
  Import with Dromo!
</lib-dromo-uploader>

​
postMessage API

Your iframe page communicates with Dromo by posting messages to window.parent.
​
{ type: "DROMO_NEXT" }
Advance to the next step.
​
{ type: "DROMO_BACK" }
Return to the previous step.
​
{ type: "DROMO_MESSAGE", payload: any }
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.
​
addField(field, position?) => Promise<void>
Dynamically add a field to the import schema. See instance.addField.
​
removeField(key) => Promise<void>
Remove a field from the schema. See instance.removeField.
​
addRows(rows) => Promise<string[]>
Inject rows into the dataset. Returns the IDs of the added rows. See instance.addRows.
​
removeRows(ids) => Promise<void>
Remove rows from the dataset by ID. See instance.removeRows.
​
setUser(user) => Promise<void>
Update the current user associated with the import.