Overview
dataHandler
Use our dataHandler feature on top of our cleaning functions to solve complex and complicated import scenarios. Take advantage of the advanced data access directly after the upload or after the mapping to customize your importer suiting your requirements.

Description | The dataHandler is a powerful tool that can be executed before the “Header Selection”- and/or “Review Entries”-step, providing access to the original data and its metadata as well as enabling you to add/remove columns and rows. It can be configured to run based on your needs. |
With the dataHandler function, you can solve complex data manipulation scenarios, such as transposing data, merging and splitting columns, joining sheets, de-nesting data, and more. Unlike other cleaning functions that iterate through every entry, the dataHandler function works on the entire data at once, giving you complete control over input data. | |
In addition, with the dataHandler function, you can add, delete, and modify columns and rows in the data, providing even greater flexibility in data manipulation. | |
Whether you need to transform a single column or an entire dataset, the dataHandler function provides the flexibility and power required to do the job effectively and efficiently. | |
Run Event | The execution of this function can occur before the “Header Selection”- or before the “Review Entries”-step, or even both, depending on the configuration. |
Parameter | data: The data parameter is a data structure that provides detailed information about the imported file(s). It includes attributes such as the file size, file name, and file extension, as well as the original data of the input. The data includes the following properties:
|
modifier: The modifier parameter is a function that enables modifiying the data by adding or deleting columns and rows. This function allows customization of the data per your requirements. The modifier function includes the following sub-functions:
| |
Syntax | Below are the parameters’ syntax and examples of how to use them: |
- addRow()
- removeRow()
- addColumn()
- removeColumn()
- metaData
index: | Specifies the position in the data where the new row will be inserted. If you pass an integer value for the index, the new row will be added to that specific index . If no index is passed or the index is null, a new row will be created at the end of the data. |
data: | In the headerStep function, the data parameter comprises an array of arrays, where each inner array represents a new row of values to be added.In the reviewStep function, the data parameter is an array of objects where each key represents a column name, and the corresponding value denotes the data to be added to the new row.It should be noted that the addRow() function allows for adding multiple rows of data to the dataset at once. |
dataHandler: {{
headerStep: async (modifier, metaData) => {
modifier.addRow({
index: 0,
data: [["value 1", "value 2"]]
});
},
reviewStep: async (modifier, metaData) => {
modifier.addRow({
index: 0,
data: [{key: "value"}]
});
},
}},
index: | Specifies the position in the dataset where the row will be removed. If you passes an integer value for the index, the row will be removed at that specific index . Nothing is changed if no index is passed or the index is null. |
dataHandler: {{
headerStep: async (modifier, metaData) => {
modifier.removeRow(index);
},
reviewStep: async (modifier, metaData) => {
modifier.removeRow(index);
},
}},
parameters: | In the headerStep function, the addColumn() function accepts a single parameter: label , a string representing the name of the column being added. The label parameter is required, and must be specified for the function to work correctly.In the reviewStep function, the addColumn() function accepts three parameters: key , label , and columnType . The key parameter is required and represents the unique identifier for the newly added column. The label parameter is required and represents the new column's name. The columnType parameter is also required and represents the data type of the new column. |
dataHandler: {{
headerStep: async (modifier, metaData) => {
modifier.addColumn({ label: "column_label" });
},
reviewStep: async (modifier, metaData) => {
modifier.addColumn({
key: "column_key",
label: "column_label",
columnType: "column_type",
});
},
}},
parameters: | In the headerStep function, the removeColumn() function accepts a column index, an integer representing the position of the column being removed.In the reviewStep function, the removeColumn() function accepts a column key, which is a string that represents the key of the column being removed. |
dataHandler: {{
headerStep: async (modifier, metaData) => {
modifier.removeColumn(index);
},
reviewStep: async (modifier, metaData) => {
modifier.removeColumn(column_key);
},
}},
data: | In the headerStep function, the data refers to the original dataset that the user uploaded. This dataset is always represented as a 2D array, where each inner array represents the content of a single sheet. Accessing the original data allows you to transform and rearrange the uploaded content to suit your import process more effectively. If needed, you can also access and/or save the file name, file size, file extension, and the uploaded raw data. The 2D array structure of the data allows you to access and manipulate individual sheets within a larger dataset easily. This can be particularly useful when working with large or complex datasets that contain multiple sheets. In the reviewStep function, data refers to the dataset mapped and transformed by the system into the desired output format. By working with the transformed data, you can review and validate the user's mapping and imported data in your preferred format and make any necessary adjustments or corrections to the target data schema and the content before finalizing their output. |
fileSize: | Size of the uploaded file in mb |
fileType: | Type of the uploaded file |
fileName: | Name of the uploaded file |
sheetName: | Sheet name in case of an uploaded .xls(x) |
dataHandler: {{
headerStep: async (modifier, metaData) => {
console.log(metaData.data)
console.log(metaData.fileSize)
console.log(metaData.fileType)
console.log(metaData.fileName)
console.log(metaData.sheetName)
},
reviewStep: async (modifier, metaData) => {
console.log(metaData.data)
console.log(metaData.fileSize)
console.log(metaData.fileType)
console.log(metaData.fileName)
console.log(metaData.sheetName)
},
}},
Implementation Example | In the given example, the address column is filled by merging the street , city , and country columns . Subsequently, the street , city , and country columns are removed from the output schema. |
- React
- Angular
- Vue.js 2
- Vue.js 3
- JavaScript
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
columns: [
{
key: "full_name",
label: "Full name",
columnType: "string",
},
{
key: "street",
label: "Street",
columnType: "string",
},
{
key: "city",
label: "City",
columnType: "string",
},
{
key: "country",
label: "Country",
columnType: "string",
},
{
key: "Address",
label: "Address",
columnType: "string",
},
],
}}
dataHandler={{
reviewStep: async (modifier, data) => {
const dataLength = data.length;
const newData = data;
for (let i = 0; i < dataLength; i++) {
const element = data[i];
if (!element.Address && element.street && element.city && element.country) {
newData[i].Address = `${element.street}, ${element.city}, ${element.country}`;
}
}
modifier.removeColumn("street");
modifier.removeColumn("city");
modifier.removeColumn("country");
return newData;
},
}}
/>
- Add the NuvoImporter module to the file
app.module.ts
.
import { NuvoImporterModule } from "nuvo-angular";
@NgModule({
declarations: [AppComponent],
imports: [NuvoImporterModule, BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
- Add the nuvo component inside the HTML file
app.component.html
.
<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" [dataHandler]="dataHandler">
Import Data
</nuvo-importer>
- Define the property inside the component file
app.component.ts
.
export class AppComponent implements OnInit {
settings!: SettingsAPI;
licenseKey!: string;
dataHandler!: DataHandler;
ngOnInit(): void {
this.licenseKey = "Your license key";
this.settings = {
identifier: "product_data",
developerMode: true,
columns: [{
key: "full_name",
label: "Full name",
columnType: "string",
},
{
key: "street",
label: "Street",
columnType: "string",
},
{
key: "city",
label: "City",
columnType: "string",
},
{
key: "country",
label: "Country",
columnType: "string",
},
{
key: "Address",
label: "Address",
columnType: "string",
}
],
};
this.dataHandler = {
reviewStep: async (modifier, data) => {
const dataLength = data.length;
const newData = data;
for (let i = 0; i < dataLength; i++) {
const element = data[i];
if (!element.Address && element.street && element.city && element.country) {
newData[i].Address = `${element.street}, ${element.city}, ${element.country}`;
}
}
modifier.removeColumn("street");
modifier.removeColumn("city");
modifier.removeColumn("country");
return newData;
},
}
}
}
info
For Vue.js 3, the setup is slightly different. Please check out the "Vue.js 3"-tab.
- Add the nuvo component inside the
<template>
tag in the fileApp.vue
.
<template>
<div id="app">
<NuvoImporter :settings="settings" :licenseKey="licenseKey" :dataHandler="dataHandler" />
</div>
</template>
- Define the property inside the
<script>
tag in the component file.
export default {
name: "App",
components: {
NuvoImporter,
},
data: () => {
return {
licenseKey: "Your License Key",
settings: {
developerMode: true,
identifier: "product_data",
columns: [
{
key: "full_name",
label: "Full name",
columnType: "string",
},
{
key: "street",
label: "Street",
columnType: "string",
},
{
key: "city",
label: "City",
columnType: "string",
},
{
key: "country",
label: "Country",
columnType: "string",
},
{
key: "Address",
label: "Address",
columnType: "string",
},
],
},
dataHandler: {
reviewStep: async (modifier, data) => {
const dataLength = data.length;
const newData = data;
for (let i = 0; i < dataLength; i++) {
const element = data[i];
if (!element.Address && element.street && element.city && element.country) {
newData[i].Address = `${element.street}, ${element.city}, ${element.country}`;
}
}
modifier.removeColumn("street");
modifier.removeColumn("city");
modifier.removeColumn("country");
return newData;
},
},
};
},
};
info
For Vue.js 2, the setup is slightly different. Please check out the "Vue.js 2"-tab.
- Add the nuvo component inside the
<template>
tag in the fileApp.vue
.
<template>
<div id="app">
<NuvoImporter :settings="settings" :licenseKey="licenseKey" :dataHandler="dataHandler" />
</div>
</template>
- Define the property inside the
<script>
tag in the component file.
export default {
name: "App",
components: {
NuvoImporter,
},
setup() {
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
key: "full_name",
label: "Full name",
columnType: "string",
},
{
key: "street",
label: "Street",
columnType: "string",
},
{
key: "city",
label: "City",
columnType: "string",
},
{
key: "country",
label: "Country",
columnType: "string",
},
{
key: "Address",
label: "Address",
columnType: "string",
},
],
};
return { settings };
},
data: () => {
return {
licenseKey: "Your License Key",
dataHandler: {
reviewStep: async (modifier, data) => {
const dataLength = data.length;
const newData = data;
for (let i = 0; i < dataLength; i++) {
const element = data[i];
if (!element.Address && element.street && element.city && element.country) {
newData[i].Address = `${element.street}, ${element.city}, ${element.country}`;
}
}
modifier.removeColumn("street");
modifier.removeColumn("city");
modifier.removeColumn("country");
return newData;
},
},
};
},
};
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
key: "full_name",
label: "Full name",
columnType: "string",
},
{
key: "street",
label: "Street",
columnType: "string",
},
{
key: "city",
label: "City",
columnType: "string",
},
{
key: "country",
label: "Country",
columnType: "string",
},
{
key: "Address",
label: "Address",
columnType: "string",
},
],
};
const nuvoImporter = new window.nuvo.NuvoImporter("Your License Key", settings);
nuvoImporter.registerDataHandlerReviewStep(async (modifier, data) => {
const dataLength = data.length;
const newData = data;
for (let i = 0; i < dataLength; i++) {
const element = data[i];
if (!element.Address && element.street && element.city && element.country) {
newData[i].Address = `${element.street}, ${element.city}, ${element.country}`;
}
}
modifier.removeColumn("street");
modifier.removeColumn("city");
modifier.removeColumn("country");
return newData;
});
nuvoImporter.setText("Import Product Data");
nuvoImporter.launch();
Use cases
Here, you can access a list of some use cases that can be solved with the dataHandler
: