Result of the nuvo importer

General

After a successful file import, the data is provided as an array object (result) containing a JSON object for each submitted row. In the following, you can see an example output of a file import with three rows:

[
  {
    "customer_code": "2345678954",
    "customer_name": "Nuvo GmbH",
    "domain_name": "getnuvo.com",
    "address": "Schoeneberger Allee 6",
    "region": "Hamburg, Germany",
    "deal_size": 10000,
    "deal_stage": "Follow Up",
    "pipeline": "Pipeline Nr.1",
    "deal_ongoing": true
  },
  {
    "customer_code": "2345678955",
    "customer_name": "ComDocks Ltd.",
    "domain_name": "www.comdocks.com",
    "address": "Suedring 28",
    "region": "Berlin, Germany",
    "deal_size": 25000,
    "deal_stage": "Lead",
    "pipeline": "Pipeline Nr.2"
    "deal_ongoing": false
  },
  {
    "customer_code": "2345678956",
    "customer_name": "Nuvo GmbH",
    "domain_name": "getnuvo.com",
    "address": "Garden Street 12",
    "region": "New York, US",
    "deal_size": 30000,
    "deal_stage": "Follow Up",
    "pipeline": "Pipeline Nr.1"
    "deal_ongoing": true
  }
]

The keys of each JSON object are the keys you defined in your target data model. The values come from the matched columns of the file that was uploaded. Notice that the output values can either be a String, an Integer, a Float or a Boolean. This depends on how you have defined columnType of each target data model column. You can also use the columnType property to ensure that the user-submitted data has - apart from the right data type - the correct format. You can access the user-submitted data as an array of JSON objects with the result parameter within onResults. With this callback function you can process, transform and/or send the returned data to your preferred API endpoint. It is executed, after the users completes the upload process by clicking the "Complete Import"-Button within the "Review Entries"-Step. You can find a code example showing the best practice for handling asynchronous server calls inside the onResults function here.

info

Within the onResults function, you have a lot of possibilities at your disposal. For instance, you can do external server calls, define variables, modify the structure and the values of each object, or call a function that leads to an XLSX- or CSV-Download.

Handling errors and success

You can configure when the import was successfully completed and when the import completion is to be intercepted, and an error modal needs to be displayed to the user. You can define these cases using the parameter complete(). If it is called and nothing is passed into it, the import is successful, and the workflow ends. If you want to intercept the completion process and show a customized error modal, you can call the parameter complete() and pass a RejectSubmitResult object into it. If you want to customize the title, the text or the image of the success modal, you can pass a PassSubmitResult object into complete(). It is also possible to show an additional area inside the success modal where the number of successfully imported and failed records are displayed.

In the following, we display the default success modal, the success modal with the additional area and the error modal:

`Default success modal`	`Custom success modal`	`Custom error modal`

RejectSubmitResult

RejectSubmitResult(title, text)

By passing a RejectSubmitResult into the complete() function, you can intercept the submission process and show a customized error modal to the user. With this, you can modify the displayed title and text. After closing the modal, the user remains inside the "Review Entries"-Step and can update the data as well as finish the import again.

In the following example, we show you how you can intercept the submission process:

onResults={(result, identifier, complete) => {
  console.log("Result:", result)
  console.log("Identifier:", identifier)
  complete(new RejectSubmitResult("Error title", "Your customized error text."));
}} 

PassSubmitResult

PassSubmitResult({ successfulRecords, failedRecords, title, text, imageUrl, duration })

By default, the success modal is displayed after the user completes the import. If you want to customize this modal, you can create a PassSubmitResult object and pass it into complete(). With this you can modify the title, text and the displayed image. If you want to show an additional area inside the modal, which displays the amount of successfully imported and failed records, you can also define successfulRecords and/or failedRecords.

In this following example, we show you how you can customize the success modal and show an additional area:

onResults={(result, identifier, complete) => {
  console.log("Result:", result)
  console.log("Identifier:", identifier)
  complete(
    new PassSubmitResult({
      successfulRecords: 10,
      failedRecords: 5,
      title: 'Your customized title',
      text: 'Your customized text.',
      imageUrl: 'Your image url',
      duration: 3000
    })
  );
}}

Examples

Displaying the result in the console

This code snippet shows the result array and the identifier logged inside your browser console.

React
Angular
Vue.js 2
Vue.js 3
JavaScript

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  }}
  onResults={(result, identifier, complete) => {
    console.log("Result:", result)
    console.log("Identifier:", identifier)
    complete()
  }}
>
  Import data
</NuvoImporter>

Add the nuvo component in the HTML file.

<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" [onResults]="onResults.bind(this)">
  Import data
</nuvo-importer>

Define the property in the component file.

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  }
}

onResults=(result, identifier, complete) => {
  console.log("Result:", result)
  console.log("Identifier:", identifier)
  complete()
}

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
          {
            label: 'Product ID',
            key: 'product_id',
          },
          {
            label: 'Article Name',
            key: 'article_name',
          },
        ]
      },
    };
  },
  methods: {
    onResults: (result, identifier, complete) => {
      console.log("Result:", result)
      console.log("Identifier:", identifier)
      complete()
    },
  }
};

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
        {
          label: 'Product ID',
          key: 'product_id',
        },
        {
          label: 'Article Name',
          key: 'article_name',
        },
      ]
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
  methods: {
    onResults: (result, identifier, complete) => {
      console.log("Result:", result)
      console.log("Identifier:", identifier)
      complete()
    },
  }
};

<script type="text/javascript">
  const settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

  const nuvoImporter = new window.nuvo.NuvoImporter("Your License Key", settings);

  nuvoImporter.onResults((result, identifier, complete) => {
    console.log("Result:", result)
    console.log("Identifier:", identifier)
    complete()
  });

  nuvoImporter.launch()
</script>

Sending the result to an API endpoint

This code snippet shows how to use the function "onResults" to make an API call. This can be used, for example, to send the output of the import process to your backend.

React
Angular
Vue.js 2
Vue.js 3
JavaScript

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  }}
  onResults={(result, identifier, complete) => {
    return fetch('https://my-json-server.typicode.com/getnuvo/nuvo/customers', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        data: {
          result,
          identifier
        },
      }),
    })
      .then(res => {
        console.log(res);
        complete()
      })
      .catch(err => {
        console.log(err);
        complete(new RejectSubmitResult("Error", err.message));
      });
  }}
>
  Import data
</NuvoImporter>

Add the nuvo component in the HTML file.

<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" [onResults]="onResults.bind(this)">
  Import data
</nuvo-importer>

Define the property in the component file.

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  }
}

onResults=(result, identifier, complete) => {
  return fetch('https://my-json-server.typicode.com/getnuvo/nuvo/customers', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      data: {
        result,
        identifier
      },
    }),
  })
    .then(res => {
      console.log(res);
      complete()
    })
    .catch(err => {
      console.log(err);
      complete(new RejectSubmitResult("Error", err.message));
    });
}

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
          {
            label: 'Product ID',
            key: 'product_id',
          },
          {
            label: 'Article Name',
            key: 'article_name',
          },
        ]
      },
    };
  },
  methods: {
    onResults: (result, identifier, complete) => {
      return fetch('https://my-json-server.typicode.com/getnuvo/nuvo/customers', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          data: {
            result,
            identifier
          },
        }),
      })
        .then(res => {
          console.log(res);
          complete()
        })
        .catch(err => {
          console.log(err);
          complete(new RejectSubmitResult("Error", err.message));
        });
    },
  }
};

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
        {
          label: 'Product ID',
          key: 'product_id',
        },
        {
          label: 'Article Name',
          key: 'article_name',
        },
      ]
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
  methods: {
    onResults: (result, identifier, complete) => {
      return fetch('https://my-json-server.typicode.com/getnuvo/nuvo/customers', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          data: {
            result,
            identifier
          },
        }),
      })
        .then(res => {
          console.log(res);
          complete()
        })
        .catch(err => {
          console.log(err);
          complete(new RejectSubmitResult("Error", err.message));
        });
    },
  }
};

<script type="text/javascript">
  const settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

  const nuvoImporter = new window.nuvo.NuvoImporter("Your License Key", settings);

  nuvoImporter.onResults((result, identifier, complete) => {
    return fetch('https://my-json-server.typicode.com/getnuvo/nuvo/customers', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        data: {
          result,
          identifier
        },
      }),
    })
      .then(res => {
        console.log(res);
        complete()
      })
      .catch(err => {
        console.log(err);
        complete(new window.nuvo.RejectSubmitResult("Error", err.message));
      });
  });

  nuvoImporter.launch()
</script>

Transforming the result structure

This example shows how the structure of the importer's output can be transformed within the function "onResults". This can be used to rename keys, enrich the data or increase the depth of the output data. Normally, the result array object has a flat hierarchy. So if your backend needs data with a deeper structure, this code snippet could be useful:

React
Angular
Vue.js 2
Vue.js 3
JavaScript

<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
      {
        label: "Street",
        key: "street",
      },
      {
        label: "Postal Code",
        key: "postal_code",
      },
      {
        label: "City",
        key: "city",
      },
    ]
  }}
  onResults={(result, identifier, complete) => {
    const targetOutput = result.map(item => {
      return {
        product_id: item?.product_id ?? "default value id",
        article_name: item?.article_name ?? "default value article name",
        production_address: {
          street: item?.street ?? "default value street",
          postal_code: item?.postal_code ?? "default value code",
          city: item?.city ?? "default value city",
        },
      };
    });

    console.log("Result: ", result);
    console.log("Identifier: ", identifier);
    console.log("Target output: ", targetOutput);
    complete()
  }}
>
  Import data
</NuvoImporter>

Add the nuvo component in the HTML file.

<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" [onResults]="onResults.bind(this)">
  Import data
</nuvo-importer>

Define the property in the component file.

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
      {
        label: "Street",
        key: "street",
      },
      {
        label: "Postal Code",
        key: "postal_code",
      },
      {
        label: "City",
        key: "city",
      },
    ]
  }
}

onResults=(result, identifier, complete) => {
  const targetOutput = result.map(item => {
    return {
      product_id: item?.product_id ?? "default value id",
      article_name: item?.article_name ?? "default value article name",
      production_address: {
        street: item?.street ?? "default value street",
        postal_code: item?.postal_code ?? "default value code",
        city: item?.city ?? "default value city",
      },
    };
  });

  console.log("Result: ", result);
  console.log("Identifier: ", identifier);
  console.log("Target output: ", targetOutput);
  complete()
}

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
          {
            label: "Product ID",
            key: "product_id",
          },
          {
            label: "Article Name",
            key: "article_name",
          },
          {
            label: "Street",
            key: "street",
          },
          {
            label: "Postal Code",
            key: "postal_code",
          },
          {
            label: "City",
            key: "city",
          },
        ]
      },
    };
  },
  methods: {
    onResults: (result, identifier, complete) => {
      const targetOutput = result.map(item => {
        return {
          product_id: item?.product_id ?? "default value id",
          article_name: item?.article_name ?? "default value article name",
          production_address: {
            street: item?.street ?? "default value street",
            postal_code: item?.postal_code ?? "default value code",
            city: item?.city ?? "default value city",
          },
        };
      });

      console.log("Result: ", result);
      console.log("Identifier: ", identifier);
      console.log("Target output: ", targetOutput);
      complete()
    },
  }
};

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
        {
          label: "Product ID",
          key: "product_id",
        },
        {
          label: "Article Name",
          key: "article_name",
        },
        {
          label: "Street",
          key: "street",
        },
        {
          label: "Postal Code",
          key: "postal_code",
        },
        {
          label: "City",
          key: "city",
        },
      ]
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
  methods: {
    onResults: (result, identifier, complete) => {
      const targetOutput = result.map(item => {
        return {
          product_id: item?.product_id ?? "default value id",
          article_name: item?.article_name ?? "default value article name",
          production_address: {
            street: item?.street ?? "default value street",
            postal_code: item?.postal_code ?? "default value code",
            city: item?.city ?? "default value city",
          },
        };
      });

      console.log("Result: ", result);
      console.log("Identifier: ", identifier);
      console.log("Target output: ", targetOutput);
      complete()
    },
  }
};

<script type="text/javascript">
  const settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
      {
        label: "Street",
        key: "street",
      },
      {
        label: "Postal Code",
        key: "postal_code",
      },
      {
        label: "City",
        key: "city",
      },
    ]
  };

  const nuvoImporter = new window.nuvo.NuvoImporter("Your License Key", settings);

  nuvoImporter.onResults((result, identifier, complete) => {
    const targetOutput = result.map(item => {
      return {
        product_id: item?.product_id ?? "default value id",
        article_name: item?.article_name ?? "default value article name",
        production_address: {
          street: item?.street ?? "default value street",
          postal_code: item?.postal_code ?? "default value code",
          city: item?.city ?? "default value city",
        },
      };
    });

    console.log("Result: ", result);
    console.log("Identifier: ", identifier);
    console.log("Target output: ", targetOutput);
    complete()
  });

  nuvoImporter.launch()
</script>

Download result data as csv

This code snippet triggers a download of the cleaned data as a CSV file once the import is complete (it is possible to do the same for the download of an XLSX file). Please note that you need to install the FileSaver.js library for the code snippet to work:

React
Angular
Vue.js 2
Vue.js 3
JavaScript

import { saveAs } from 'file-saver';  
  
<NuvoImporter
  licenseKey="Your License Key"
  settings={{
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
      {
        label: "Street",
        key: "street",
      },
      {
        label: "Postal Code",
        key: "postal_code",
      },
      {
        label: "City",
        key: "city",
      },
    ]
  }}

onResults={(results, identifier) => {
  if (results.length > 0) {
    const headers = Object.keys(results[0]).map((key) => key);
    const body = [];
    results.forEach((row, rowIndex) => {
      headers.forEach((key) => {
        const value = String(row[key] ?? " ").replace(",", "‚");
        if (body[rowIndex]) {
          body[rowIndex].push(value);
        } else {
          body[rowIndex] = [value];
        }
      });
    });
    const content = [
      headers.join(","),
      body
        .map((row) => {
          return row.join(",");
        })
        .join("\r\n"),
    ].join("\r\n")

    // "saveAs" is a function for download file from "file-saver" library
    // you can see how to install from this link
    // https://github.com/eligrey/FileSaver.js/
    return saveAs(
      new Blob([content], { type: "text/csv;charset=utf-8;" }),
      identifier + ".csv"
    );
   }
 }}

>
  Import data
</NuvoImporter>

Add the nuvo component in the HTML file.

<nuvo-importer [licenseKey]="licenseKey" [settings]="settings" [onResults]="onResults.bind(this)">
  Import data
</nuvo-importer>

Define the property in the component file.

licenseKey!: string
settings!: SettingsAPI;

ngOnInit(): void {
  this.licenseKey = "Your License Key"
  this.settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ]
  }
}

onResults={(results, identifier) => {
  if (results.length > 0) {
    const headers = Object.keys(results[0]).map((key) => key);
    const body = [];
    results.forEach((row, rowIndex) => {
      headers.forEach((key) => {
        const value = String(row[key] ?? " ").replace(",", "‚");
        if (body[rowIndex]) {
          body[rowIndex].push(value);
        } else {
          body[rowIndex] = [value];
        }
      });
    });
    const content = [
      headers.join(","),
      body
        .map((row) => {
          return row.join(",");
        })
        .join("\r\n"),
    ].join("\r\n")

    // "saveAs" is a function for download file from "file-saver" library
    // you can see how to install from this link
    // https://github.com/eligrey/FileSaver.js/
    return saveAs(
      new Blob([content], { type: "text/csv;charset=utf-8;" }),
      identifier + ".csv"
    );
   }
 }}

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
          {
            label: 'Product ID',
            key: 'product_id',
          },
          {
            label: 'Article Name',
            key: 'article_name',
          },
        ]
      },
    };
  },
  methods: {
    onResults: (results, identifier) => {
  if (results.length > 0) {
    const headers = Object.keys(results[0]).map((key) => key);
    const body = [];
    results.forEach((row, rowIndex) => {
      headers.forEach((key) => {
        const value = String(row[key] ?? " ").replace(",", "‚");
        if (body[rowIndex]) {
          body[rowIndex].push(value);
        } else {
          body[rowIndex] = [value];
        }
      });
    });
    const content = [
      headers.join(","),
      body
        .map((row) => {
          return row.join(",");
        })
        .join("\r\n"),
    ].join("\r\n")

    // "saveAs" is a function for download file from "file-saver" library
    // you can see how to install from this link
    // https://github.com/eligrey/FileSaver.js/
    return saveAs(
      new Blob([content], { type: "text/csv;charset=utf-8;" }),
      identifier + ".csv"
    );
   }
 },
  }
};

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 file App.vue.

<template>
  <div id="app">
    <NuvoImporter
      :settings="settings"
      :licenseKey="licenseKey"
      :onResults="onResults"
    />
  </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: [
        {
          label: 'Product ID',
          key: 'product_id',
        },
        {
          label: 'Article Name',
          key: 'article_name',
        },
      ]
    };
    return { settings };
  },
  data: () => {
    return {
      licenseKey: "Your License Key",
    };
  },
  methods: {
    onResults: (results, identifier) => {
  if (results.length > 0) {
    const headers = Object.keys(results[0]).map((key) => key);
    const body = [];
    results.forEach((row, rowIndex) => {
      headers.forEach((key) => {
        const value = String(row[key] ?? " ").replace(",", "‚");
        if (body[rowIndex]) {
          body[rowIndex].push(value);
        } else {
          body[rowIndex] = [value];
        }
      });
    });
    const content = [
      headers.join(","),
      body
        .map((row) => {
          return row.join(",");
        })
        .join("\r\n"),
    ].join("\r\n")

    // "saveAs" is a function for download file from "file-saver" library
    // you can see how to install from this link
    // https://github.com/eligrey/FileSaver.js/
    return saveAs(
      new Blob([content], { type: "text/csv;charset=utf-8;" }),
      identifier + ".csv"
    );
   }
 },
  }
};

<script type="text/javascript">
  const settings = {
    developerMode: true,
    identifier: "product_data",
    columns: [
      {
        label: "Product ID",
        key: "product_id",
      },
      {
        label: "Article Name",
        key: "article_name",
      },
    ],
  };

  const nuvoImporter = new window.nuvo.NuvoImporter("Your License Key", settings);

  nuvoImporter.onResults((results, identifier) => {
  if (results.length > 0) {
    const headers = Object.keys(results[0]).map((key) => key);
    const body = [];
    results.forEach((row, rowIndex) => {
      headers.forEach((key) => {
        const value = String(row[key] ?? " ").replace(",", "‚");
        if (body[rowIndex]) {
          body[rowIndex].push(value);
        } else {
          body[rowIndex] = [value];
        }
      });
    });
    const content = [
      headers.join(","),
      body
        .map((row) => {
          return row.join(",");
        })
        .join("\r\n"),
    ].join("\r\n")

    // "saveAs" is a function for download file from "file-saver" library
    // you can see how to install from this link
    // https://github.com/eligrey/FileSaver.js/
    return saveAs(
      new Blob([content], { type: "text/csv;charset=utf-8;" }),
      identifier + ".csv"
    );
   }
 });

  nuvoImporter.launch()
</script>

Result of the nuvo importer

General​

Handling errors and success​

RejectSubmitResult​

PassSubmitResult​

Examples​

Displaying the result in the console​

Sending the result to an API endpoint​

Transforming the result structure​

Download result data as csv​

General

Handling errors and success

RejectSubmitResult

PassSubmitResult

Examples

Displaying the result in the console

Sending the result to an API endpoint

Transforming the result structure

Download result data as csv