Importer Configuration

This property can be used to configure the <NuvoImporter> so that the importer is tailor-made for your importing process. With this property, you can adjust the design, the display mode, enable or disable certain features and by using the columns property, you can define your preferred output schema. The <NuvoImporter> instance must have settings and licenseKey as properties to launch. A target data model (columns) and an identifier (identifier) must be defined within settings. Otherwise, the component cannot be launched.

identifier


Type	`string`
Required
Description	The `identifier` helps to identify different imports. For example, you have defined one target data model for a customer import and one target data model for a product import. With the identifier option, you can distinguish between the "customer" and the "product" import.

columns


Type	`object`
Required
Description	Use `columns` to define the target data model you want to use within your application. `columns` is an array of objects. Each object is a new column which contains at least the keys `label` and `key`. For more information, check out our columns documentation.

title


Type	`string`
Default	`"Upload"`
Description	This can be used to change the pre-set title currently seen as “Upload” inside the "Upload"-Step when the nuvo importer is started. For instance, the title could be set to “Upload your product data here”. In this case, you would see the following screen:

info

When embedUploadArea equals true, the title won't be displayed.

developerMode


Type	`boolean`
Default	`false`
Description	This value is supposed to be `true` when using the nuvo importer in development or staging environments. The nuvo importer will display a "developer mode"-Banner at the top, and these imports will be marked as test imports, which means that they will not count against your contingent.


Type	`boolean`
Default	`true`
Description	This option controls whether the nuvo importer is implemented as a button or as a full page view. Your users will be guided through the workflow within a modal by default. When set to `false`, the users will go through the process on the implemented page without any modal occurring.

info

Please note the minimum screen width for the nuvo Importer to work:

If modal is set to true, the minimum required screen width is 901px.
If modal is set to false, the minimum required screen width is 948px.

embedUploadArea


Type	`boolean`
Default	`false`
Description	This option enables you to implement the nuvo importer as an embedding area. The nuvo importer is shown as an embedding area when `embedUploadArea` equals `true`, and when it is set to `false`, the nuvo importer is displayed as a button.

info

If modal equals false, embedUploadArea has no effect.

`embedUploadArea: false`	`embedUploadArea: true`

buttonMode


Type	`"import", "edit" or "both"`
Default	`"import"`
Description	Suppose you want to enable your users to also edit/update existing data. In that case, you can use this setting to not only display an "Import data"-Button but also display an "Edit data"-Button. By clicking this button, the user is directly forwarded to the last step ("Review Entries"-Step), where the user can manually add new data or edit and delete existing data. For the latter case, we recommend using the `preloadData` option, which enables you to preload data into the table of the "Review Entries"-Step. With this setting, you can determine if you want to display the import, edit, or both buttons at the time.

info

If modal equals false or embedUploadArea equals true, buttonMode has no effect.

`buttonMode: "import"`	`buttonMode: "edit"`	`buttonMode: "both"`

preloadData


Type	`[{columnName: string, ...}, ...]`
Default	`[]`
Description	With this setting, you can preload data as an array of objects into the importer, which is shown inside the "Review Entries"-Step beside the newly imported data. The cleaning functions `onEntryInit` and `columnHooks` are also applied to this data. If you have set `allowManualInput` to `true` and the user clicks on the "Manual Entry"-Button, the user sees the preloaded data inside the table of the "Review Entries"-Step.

automaticHeaderDetection


Type	`boolean`
Default	`false`
Description	This option enables you to let your users skip the header selection of the import process. When this option is set to `true`, your users are automatically forwarded to the matching step of the import process after selecting the correct spreadsheet(s).

maxEntries


Type	`int`
Default	`null`
Description	Define the highest amount of entries that can be imported. Note that the header row will not be taken into account. When a user's upload exceeds the defined amount of maxEntries, an error message is displayed, and your user cannot continue further.

max-entries-modal

disableTemplates


Type	`boolean`
Default	`false`
Description	This option enables you to disable the "Download Template"-Functionality (for the Excel and CSV template) for your users. When this option is set to `true`, the "Download Template"-Button/Tile won't be displayed inside your application, and your users, therefore, can't download the target data model template as CSV or as .XLSX.

disableExcelTemplate


Type	`boolean`
Default	`false`
Description	With this setting, you can disable the "Download Template"-Functionality (only for the Excel template) for your users. When this option is set to `true`, the "Excel template (.xlsx)"-Button won't be displayed inside your application, and your users, therefore, can only download the CSV template of the target data model. They cannot download the template as an Excel/.xlsx file.

disableSuccessModal


Type	`boolean`
Default	`false`
Description	This option defines whether the "Successful Upload"-Modal is shown at the end of the importing process or not. If it is set to true, no modal is displayed after the user clicks on the "Complete Import"-/"Submit"-Button within the "Review Entries"-Step.

allowManualInput


Type	`boolean`
Default	`false`
Description	Defines if the "Upload"-Step contains a "Manual Entry"-Button or not. If set to `true` and the user clicks on the button, the user is directly forwarded to the "Review Entries"-Step and can add its values manually. For customizing the button's styling, please check out the following part of our documentation ((link)).

manual-input-button

allowCustomColumns


Type	`boolean`
Default	`false`
Description	This property enables the user to add customized columns to the defined target schema. If this option is set to `true`, the user can add custom columns to the target data model within the dropdown menu inside the "Match Columns"-Step and map its imported columns to them. The result array object will contain the key of each created custom column which was also mapped to an imported column. Validation rules or the `columnType` of a custom column cannot be defined. By default, the `columnType` is set to `string`.

info

Note that the custom columns will be considered for creating the result array object of the current importing process but not for future ones. If you want that custom columns are permanently added to the target schema, you need to generate the columns array dynamically before initializing our component. Please contact us via [email protected] if you have any questions regarding this topic.

allowCustomOptions


Type	`boolean`
Default	`false`
Description	This property enables the user to add custom dropdown options to a category column (`columnTypes` equals `category`). If this option is set to `true`, the user can add custom options to a category column within the category dropdown menu and map the unique values of an imported column to them. By default, the option's `type` is set to `string` and cannot be changed.

info

Note that the options will not be permanently added to the dropdownOptions array of the target column. If you want that custom options are permanently added to the specific column, you need to generate the dropdownOptions array dynamically before initializing our component. Please contact us via [email protected] if you have any questions regarding this topic.

completeImportAction


Type	`"discard", "submit" or "block"`
Default	`"discard"`
Description	This property lets you define how rows with errors are handled inside the “Review Entries”-Step. Apart from discarding (`"discard"`) all rows with an error from the result array object or submitting every row (`"submit"`), you also have the option to block the “Complete Import”-Button if the data contains at least one error (`"block"`).

info

The allowInvalidEntries property is deprecated since React version 1.14.3, Angular version 1.6.5, Vue.js version 1.0.2 and vanilla JavaScript version 0.3.3. Please use completeImportAction instead. If you have used allowInvalidEntries equals true, you need to set completeImportAction to "submit".

`completeImportAction` = `"block"`	`completeImportAction` = `"discard"`	`completeImportAction` = `"submit"`

allowInvalidEntries (deprecated)


Type	`boolean`
Default	`false`
Description	This option enables you to allow users to submit entries with at least one error. If set to `true`, the entries which include an error will also be submitted.

info

enableMassiveErrorAlert


Type	`number`
Default	`null`
Description	This option enables you to display an error message to your users as a pop-up after there are more than x cells with an error. This error message tells the user that the user can either continue to correct its data within the application or that the user can download the matched data as .XLSX to continue the work within Excel.

massive-error-alert

onlyMappedColumns


Type	`boolean`
Default	`false`
Description	This option defines if the user is supposed to see all target data model columns within the "Review Entries"-Step or just the mapped ones. If this prop is set to `true`, only the mapped target data model columns are shown and imported.

info

Note that the result array object does not contain the keys of the unmapped columns.

enableExamples


Type	`boolean`
Default	`false`
Description	This option enables you to display examples for each column of the target data model within the last step of the import process. When it is set to `true`, you can define the `example` property for each object of the `columns` array. These values are displayed within the table of the last step of the import process.

enable-example-equals-true

i18nOverrides


Type	`object`
Default	`null`
Description	This option allows you to overwrite every UI text inside the nuvo importer with your text. With this setting, you can support multiple languages.

info

You can use the i18nOverrides property to translate and customize every UI text of the nuvo importer. Visit our multi-language support documentation for more details. If you require an i18n file for a specific language, we can provide you a template of your preferred language so that you do not need to invest time in translating it by yourself. Please contact us via [email protected].

style


Type	`object`
Default	`null`
Description	The `style` setting enables you to customize the style of the nuvo importer. You can adjust the theme for the importer to match your branding.

info

Please notice that using your own CSS to override ours can lead to bugs. To avoid that, please use our provided style option. Visit our style documentation for more details on our styling options.

automaticMapping


Type	`boolean`
Default	`false`
Description	If this property is set to `true`, the user skips the "Match Columns"-Step within the importing process and is directly forwarded to the "Review Entries"-Step. The skipping only occurs if the user uploads a file with the same structure as a previous uploaded one. As a result, the column and option mappings of the last time that this data structure was uploaded will be applied to the imported data. The user is notified by an additional info box above the table if the "Match Columns"-Step was skipped, and the user can always go back and enter the mapping step to correct wrong mappings.

info

Please note that if this option is activated that option mappings will be saved on our server-side. Option mappings, in comparison to column mappings, can contain sensitive data.

multipleFileUpload


Type	`boolean`
Default	`false`
Description	This option enables you to allow users to upload multiple files and to select multiple sheets. Enable this option to show the "Join Sheets"-Step to your users within the importing process where they can select the key columns for joining data from multiple sheets.

info

Currently, we support uploading a maximum of 5 files in one importing process. All files must have the same identifier/key column to join them together in one table.

allowNestedData `BETA`


Type	`boolean`
Default	`false`
Description	By enabling this feature, users can upload nested .json files which will be de-nested based on a predefined set of rules. The de-nesting process involves replacing arrays with underscores `_` and objects with periods `.` to facilitate the display of data in a 2D table.

info

Currently, we support .json files with maximum depth of 4.

Input
De-nested

Input = [
  { id: 1, games: "football", equipment: ["gloves", "ball"] },
  { id: 2, games: "cricket", equipment: ["bat", "ball"] },
];

Input
De-nested

  Input: [
      {
        id: 7856,
        address: {
          city: "Hamburg",
          country: "Germany",
          coordinates: ['89.3454', '34.6565'],
        },
      },
     {
        id: 7857,
        address: {
          city: "Bremen",
          country: "Germany",
          coordinates: ['99.3454', '14.6565'],
        },
      },
      {
        id: 7858,
        address: {
          city: "Paris",
          country: "France",
          coordinates: ['45.3454', '74.6565'],
        },
      },
    ],

id	games	equipment_1	equipment_2
1	football	gloves	ball
2	cricket	bat	ball

id	address.city	address.country	address.coordinates_1	address.coordinates_1
7856	Hamburg	Germany	89.3454	34.6565
7857	Bremen	Germany	99.3454	14.6565
7858	Paris	France	45.3454	74.6565

Importer Configuration

identifier​

columns​

title​

developerMode​

modal​

embedUploadArea​

buttonMode​

preloadData​

automaticHeaderDetection​

maxEntries​

disableTemplates​

disableExcelTemplate​

disableSuccessModal​

allowManualInput​

allowCustomColumns​

allowCustomOptions​

completeImportAction​

allowInvalidEntries (deprecated)​

enableMassiveErrorAlert​

onlyMappedColumns​

enableExamples​

i18nOverrides​

style​

automaticMapping​

multipleFileUpload​

allowNestedData BETA​

identifier

columns

title

developerMode

modal

embedUploadArea

buttonMode

preloadData

automaticHeaderDetection

maxEntries

disableTemplates

disableExcelTemplate

disableSuccessModal

allowManualInput

allowCustomColumns

allowCustomOptions

completeImportAction

allowInvalidEntries (deprecated)

enableMassiveErrorAlert

onlyMappedColumns

enableExamples

i18nOverrides

style

automaticMapping

multipleFileUpload

allowNestedData `BETA`