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: fileSize - The size of the file in mb. fileExtension - The extension of the file. fileName - The name of the file. data - Original data of the file.
	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: addRow() - Adds a new row to the data. deleteRow()- Deletes an existing row from the data. addColumn() - Adds a new column to the data. deleteColumn() - Deletes an existing column from the data. By utilizing these sub-functions, you can manipulate the data in a granular manner to meet your specific use case.
Syntax	Below are the parameters’ syntax and examples of how to use them:

addRow()

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"}]
      });
    },
  }},

removeRow()

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);
    },
  }},

addColumn()

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",
      });
    },
  }},

removeColumn()

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);
    },
  }},

metaData

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

<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;
    },
  }}
/>

Angular

1. 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 {}

2. Add the nuvo component inside the HTML file app.component.html.

<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" [dataHandler]="dataHandler">
  Import Data
</nuvo-importer>

3. 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;
      },
    }
  }
}

Vue.js 2

info

For Vue.js 3, the setup is slightly different. Please check out the "Vue.js 3"-tab.

1. Add the nuvo component inside the <template> tag in the file App.vue.

<template>
  <div id="app">
    <NuvoImporter :settings="settings" :licenseKey="licenseKey" :dataHandler="dataHandler" />
  </div>
</template>

2. 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;
        },
      },
    };
  },
};

Vue.js 3

info

For Vue.js 2, the setup is slightly different. Please check out the "Vue.js 2"-tab.

1. Add the nuvo component inside the <template> tag in the file App.vue.

<template>
  <div id="app">
    <NuvoImporter :settings="settings" :licenseKey="licenseKey" :dataHandler="dataHandler" />
  </div>
</template>

2. 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;
        },
      },
    };
  },
};

JavaScript

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:

Use case	Sandbox link
Transpose data	view
Merge sheets based on a unique column	view
Calculate the sum of the rows	view
Nest similar rows	view
De-nesting complex rows	view
Accessing file's metadata	view
Create Un-mappable Columns	view