importOK

Guides

Import Wizard

importOK provides various options to customize the wizard to meet your needs. For example you can provide a custom title for the wizard or even a sample import file, to help your users getting started.

Title

By default the title displayed at the top left corner of the wizard is called "Import". You can overwrite this by providing the title as illustrated in the example below. On top of that, you can also customize the text being displayed right below the title. The corresponding option is called subtitles.

 1ImportOK.add(
 2  document.getElementById('my-app-element'),
 3  {
 4    fields: {...},
 5    meta: {...},
 6    title: 'My custom title', 
 7    subtitles: [
 8      'Upload your file to get started',
 9      'Match source to target columns',
10      'Review validation errors and fix your data',
11      'Please do not close this window during the import process.',
12    ]
13  }
14);

Sample file

To help your users getting started your can provide a sample file, as a CSV or Excel. The sampleFile must point to a valid location - both relative and absolute URLs are accepted.

1ImportOK.add(
2  document.getElementById('my-app-element'),
3  {
4    fields: {...},
5    meta: {...},
6    sampleFile: '/sample.csv' 
7  }
8);

Events

In addition to the available webhooks, the following JavaScript events are provided to help you monitor user navigation between steps in the wizard, but also to track the import progress.

onImportProgress

Description Triggered when the progress changes.
Event props
  • processed How many records processed so far, including failed.
  • failed How many records failed so far.
  • total Total number of records.

onStepEnter

Description Triggered when the user enters a new step of the wizard.
Event props
  • step The index of the step the user is entering.
  • previousStep The index of the step the user is leaving.

onStepExit

Description Triggered when the user is about to exit the current step.
Event props
  • step The index of the step the user is exiting.
  • nextStep The index of the step the user previously exited.

Here is a simple example on how you can use the above events:

 1{
 2  fields: {...},
 3  onStepEnter: function (step, previousStep) {
 4    console.log(`Step ${step} entered, from ${previousStep}`);
 5  },
 6  onStepExit: function (step, nextStep) {
 7    console.log(`Step ${step} exited, going to ${nextStep}`);
 8  },
 9  onImportProgress: function (processed, failed, total) {
10    console.log(`Processed: ${processed} of ${total} (${failed} failed)`);
11  }
12}