Skip to main content

Overview

Advanced

Dynamic Import

Our dynamic import feature allows you to start the nuvo importer at any step, at any event, and with your preferred data format. Use the flexibility of this option to cover all your use cases:

DescriptionThis feature provides the flexibility to initiate the data import process at different stages, allowing you to customize the importer's behavior according to your requirements. Instead of starting the importer solely during the upload step, you can now choose to begin it during the header, mapping, or review steps. Additionally, you have the ability to define when the importer should open, expanding beyond the initial import performed by the user.

By leveraging this feature, you can trigger the importing process based on various events, such as a specific time event, a user interaction, or the reception of data from an external source. This means you are no longer limited to manually importing data, and you can utilize data obtained from your API or any third-party service. Whether it's fetched data or information already present in the browser, you can leverage it to initiate the importer.

These capabilities empower you to construct your own workflow, providing unparalleled flexibility in how you handle the data import process.
Overall, the Dynamic Import feature provides a lot of flexibility and customization options for the nuvo Importer SDK. By allowing you to start the import process dynamically and choose your own workflow, you can save time and improve your productivity.
Run EventBased on your configuration, this feature allows you to begin the import process from either the "Upload" step, "Sheet Selection" step, “Header Selection” step, “Match Columns” step, or “Review Entries” step.
ParameternuvoSession.parse(): This function enables you to parse one or multiple input files. The output is an object with two keys: accepted and rejected. accepted is an array of file objects from successfully parsed files, with each object containing a fileName and a sheets key. sheets holds an array of sheet objects, each with a sheetName and data key. rejected contains an array of file objects that were rejected. Files can be rejected because their file type is not supported, they are not parsable, their content is invalid, or parsing for a certain file type is not part of your subscription. Before passing this output to nuvoSession.upload(), ensure it has been modified to match the correct input structure. Note that the input format may vary depending on the step you start from, such as "Sheet Selection", "Header Selection", "Match Columns", or "Review Entries".
  • inputFiles - The inputFiles parameter allows you to specify the files to be parsed for upload into the nuvo importer. We currently support the following file types: csv, tsv, xls, xlsx, json, xml and pdf. Ensure that your subscription includes support for the file extensions you intend to use.
  • identifier - It helps pick out a specific importer when you want to perform actions on it using nuvoSession methods, such as parsing, uploading data or starting imports. It needs to be equal to the identifier of the targetted importer instance.
nuvoSession.upload(): This function enables you to upload data either in one go or in multiple parts.
  • step- Thestepparameter allows you to specify the starting point for the import process, which can be one of the following options:header, mapping, or review step.
  • data- Thedataparameter is used to upload the data that needs to be imported.
    • When using theheaderormappingstep, you can provide the data in one of two formats: either as a 2D array where each inner array represents a row or as a JSON array where each inner object represents a row.
    • On the other hand, when using thereview step, you must pass the data as a JSON array where each object represents a row. However, it's important to ensure that the keys of your JSON data match the keys of the target data model (TDM).
  • headerIndex- To determine the header row in thedata, you can specify its position by passing an integer value for the headerIndexparameter. If you do so, that row will be used as the header row. If no value is provided forheaderIndex or if it's undefined, the system will automatically detect the header row using its built-in detection mechanism.
  • identifier - It helps pick out a specific importer when you want to perform actions on it using nuvoSession methods, such as parsing, uploading data or starting imports. It needs to be equal to the identifier of the targetted importer instance.
nuvoSession.start(): The function enables you to start the import process from their preferred step.
  • identifier - It helps pick out a specific importer when you want to perform actions on it using nuvoSession methods, such as parsing, uploading data or starting imports. It needs to be equal to the identifier of the targetted importer instance.
Implementation ExampleIn the given example, the data is fetched from the API and the import process is started dynamically.
import { NuvoImporter, nuvoSession } from "nuvo-react";
import React, { useEffect } from "react";

function App() {
const files = [];

useEffect(() => {
const processFiles = async () => {
try {
const fileData = await nuvoSession.parse(files, "product_data");

nuvoSession.upload(
{
step: "sheetSelection",
data: fileData.accepted,
headerIndex: undefined,
},
"product_data",
);

nuvoSession.start("product_data");
} catch (error) {
console.error("Error processing files:", error);
}
};

processFiles();
}, []);

return (
<div className="App">
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
modal: true,
columns: [],
}}
onResults={(result, errors, complete, logs) => {
complete();
}}
/>
</div>
);
}

export default App;

Start from upload step

DescriptionBy incorporating the parameters described below, the dynamic import feature enables you to initiate the import process directly from the upload step seamlessly.
ParameternuvoSession.upload(): Not required
nuvoSession.start(): Calling this function will open the importer within the "Upload" step.
info

It is only possible to open the importer from the “Upload" step if modal is set to true inside importer settings.


Start from sheet selection step

DescriptionBy incorporating the parameters described below, the dynamic import feature enables you to initiate the import process directly from the sheet selection step seamlessly.
ParameternuvoSession.upload(): With this function, you can enable your users to upload data, and you can specify the exact step at which the importer should be initiated.
  • step - "sheetSelection"
  • data - The data property can take an array consisting of one or multiple file objects that represent an imported file. Each file object contains a fileName and a sheets key-value pair. sheets accepts an array of one or several sheet objects that each represent a sheet inside an imported file. A sheet object consists of a sheetName and a data property. data can have the following formats:
    • JSON: We accept a valid JSON array consisting of objects. Each object within the array represents a row.
    • 2D array: We accept a valid 2D array where each inner array represents a row.
nuvoSession.start(): Calling this function will open the importer within the "Sheet Selection" step.
Implementation ExampleThe following example demonstrates the expected data format for both scenarios.
info

If you want to enable your users to select multiple sheets/files at once, you need to set multipleFileUpload to true in the settings. Please note that this feature can only be used if it is included in your plan. If you are interested in testing or activating it, please contact your salesperson or send an email to [email protected].

nuvoSession.upload(
{
step: "sheetSelection",
data: [
{
fileName: "product_data.xlsx",
sheets: [
{
sheetName: "Product Data",
data: [
{ product_id: "1", product_name: "StellarGlow Pro 2000" },
{ product_id: "2", product_name: "QuantumTune Elite X9" },
],
},
{
sheetName: "Address Data",
data: [{ street: "1234 Elm Street", city: "Meadowville", country: "Echovia" }],
},
],
},
{
fileName: "customer_data.csv",
sheets: [
{
sheetName: "Customers",
data: [{ first_name: "Harper", last_name: "Mitchell" }],
},
],
},
],
},
"Your importer's identifier",
);

Start from header step

DescriptionBy incorporating the parameters described below, the dynamic import feature enables you to initiate the import process directly from the header step seamlessly.
ParameternuvoSession.upload():With this function, you can enable your users to upload data, and you can specify the exact step at which the importer should be initiated.
  • step - "header"
  • data - The data can have the following formats:
    • JSON: We accept a valid JSON array consisting of objects. Each object within the array represents a row.
    • 2D array: We accept a valid 2D array where each inner array represents a row.
  • headerIndex - If the data is passed as JSON, you can set this value to undefined. However, if the data is passed as a 2D array, you can pass an integer representing the index of the header row.
nuvoSession.start(): Calling this function will open the importer within the "Header Selection" step.
Implementation ExampleThe following example demonstrates the expected data format for both scenarios.
nuvoSession.upload(
{
step: "header",
data: [
{ id: 1, country: "Germany" },
{ id: 2, country: "China" },
],
headerIndex: undefined,
},
"Your importer's identifier",
);

Start from mapping step

DescriptionBy incorporating the parameters described below, the dynamic import feature enables you to initiate the import process directly from the mapping step seamlessly.
ParameternuvoSession.upload(): With this function, you can enable your users to upload data, and you can specify the exact step at which the importer should be initiated.
  • step - "mapping"
  • data - The data can have the following formats:
    • JSON: We accept a valid JSON array consisting of objects. Each object within the array represents a row.
    • 2D array: We accept a valid 2D array where each inner array represents a row.
  • headerIndex - If the data is passed as JSON, you can set this value to undefined. However, if the data is passed as a 2D array, you can pass an integer representing the index of the header row.
nuvoSession.start(): Calling this function will open the importer within the "Match Columns" step".
Implementation ExampleThe following example demonstrates the expected data format for both scenarios.
nuvoSession.upload(
{
step: "mapping",
data: [
{ id: 1, country: "Germany" },
{ id: 2, country: "China" },
],
headerIndex: undefined,
},
"Your importer's identifier",
);

Start from review step

DescriptionBy incorporating the parameters described below, the dynamic import feature enables you to initiate the import process directly from the review step seamlessly.
ParameternuvoSession.upload():With this function, you can enable your users to upload data, and you can specify the exact step at which the importer should be initiated.
  • step - "review"
  • data - The data can have the following formats:
    • JSON: We accept a valid JSON array consisting of objects. Each object within the array represents a row.
    • JSON with error information: We accept a valid JSON array consisting of objects. Each object within the array represents a row, and it also includes information about the warning, info, or error messages.
nuvoSession.start(): Calling this function will open the importer within the "Review Entries" step.
Implementation ExampleThe following example demonstrates the expected data format for both scenarios.
info

It is crucial to ensure that the keys in the JSON align with the keys in your target data model.

nuvoSession.upload(
{
step: "review",
data: [
{ id: 1, country: "Germany" },
{ id: 2, country: "China" },
],
headerIndex: undefined,
},
"Your importer's identifier",
);

Managing multiple nuvo importer instances

In certain scenarios, you might need to manage multiple instances of nuvo importers within your application concurrently. This can be particularly beneficial when offering users the option to import data from various sources, each requiring a different output format. For instance, you could allow customers to choose whether to import product data or customer data.

Step 1: Embed the nuvo importers

To start utilizing the nuvo importers, you first need to embed them within your application. Each nuvo importer instance is defined by its unique identifier. Additionally, each instance can have its own settings and columns array, which dictates the structure of the output data.

<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
columns: [],
}}
/>

<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "customer_data",
columns: [],
}}
/>

Step 2: Upload data to the respective importer

The next step involves uploading data to the specific nuvo importer instances. Each instance is identified by its unique identifier, and the uploaded data will be associated with that identifier.

// Upload data to the product instance
nuvoSession.upload(
{
step: "review",
data: [
{ product_id: "1", product_name: "StellarGlow Pro 2000" },
{ product_id: "2", product_name: "QuantumTune Elite X9" },
],
},
"product_data",
);

// Upload data to the customer instance
nuvoSession.upload(
{
step: "review",
data: [
{ customer_id: "1", customer_name: "James" },
{ customer_id: "2", customer_name: "Valentin" },
],
},
"customer_data",
);

Step 3: Start the importers

Finally, you can trigger the import process by starting the respective nuvo importer instances. The identifier you provide to the nuvoSession.start() method corresponds to the unique identifier of the desired nuvo importer instance. Upon triggering, the nuvo importer associated with the specified identifier will open from the defined stage, utilizing the data that was previously uploaded with the same identifier.

For instance:

nuvoSession.start("product_data"); // Opens the "product_data" importer
nuvoSession.start("customer_data"); // Opens the "customer_data" importer

By following these steps, you can seamlessly manage and utilize multiple nuvo importer instances within your application, catering to various data import needs.