Overview
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:

Description | This feature allows you to start the data import process dynamically, meaning you can fetch data from an API instead of uploading a file manually. You can also start the process at any step you want, whether it's the headerStep , mappingStep , or reviewStep step. This gives you the flexibility to decide your own workflow, and makes it possible to import data directly from 3rd party services you are using. |
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 Event | Based on your configuration, this feature allows them to begin the import process from either the “Header Selection”-Step, “Match Columns”-Step, or “Review Entries”-Step. |
Parameter | nuvoSession.upload(): The function enables the user to upload data either in one go or in multiple parts.
|
nuvoSession.start(): The function enables the user to start the import process from their preferred step. | |
Implementation Example | In the given example, the data is fetched from the API and the import process is started dynamically. |
- React
- Angular
- Vue.js 2
- Vue.js 3
- JavaScript
import { NuvoImporter, nuvoSession } from "nuvo-react";
import React, { useEffect } from "react";
function App() {
useEffect(() => {
// fetch data from your API
const records = [];
nuvoSession.upload({
step: "",
data: records,
headerIndex: undefined,
});
nuvoSession.start();
}, []);
return (
<div className="App">
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
columns: [],
}}
onResults={(result, identifier, complete) => {
complete();
}}
/>
</div>
);
}
export default App;
- 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"> Import Data </nuvo-importer>
- Define the property inside the component file
app.component.ts
.
import { RejectSubmitResult, ResultValues, nuvoSession } from 'nuvo-angular';
export class AppComponent implements OnInit {
settings!: SettingsAPI;
licenseKey!: string;
openSession = () => {
// fetch data from your API
const records = [];
nuvoSession.upload({
step: "header",
data: records,
headerIndex: 1,
});
nuvoSession.start();
};
ngOnInit(): void {
this.licenseKey = "Your license key";
this.settings = {
identifier: "product_data",
developerMode: true,
columns: [],
};
}
onResults = (
results: ResultValues,
identifier: string,
complete: (rejection?: RejectSubmitResult) => void
) => {
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 fileApp.vue
.
<template>
<div>
<button @click="openSession">Start session</button>
<nuvo-importer
:license-key="licenseKey"
:on-results="onResults"
:settings="settings"
text="Select File"
/>
</div>
</template>
- Define the property inside the
<script>
tag in the component file.
import { NuvoImporter, nuvoSession } from "nuvo-vuejs";
export default {
name: "App",
components: {
NuvoImporter,
},
data: () => {
return {
licenseKey: "Your License Key",
settings: {
developerMode: true,
identifier: "product_data",
columns: [],
},
};
},
methods: {
openSession: () => {
nuvoSession.upload({
step: "header",
data: [],
headerIndex: 1,
});
nuvoSession.start();
},
onResults: async (result, identifier, complete) => {
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 fileApp.vue
.
<template>
<div>
<button @click="openSession">Start session</button>
<nuvo-importer
:license-key="licenseKey"
:on-results="onResults"
:settings="settings"
text="Select File"
/>
</div>
</template>
- Define the property inside the
<script>
tag in the component file.
import { NuvoImporter, nuvoSession } from "nuvo-vuejs";
export default {
name: "App",
components: {
NuvoImporter,
},
setup() {
const settings = {
developerMode: true,
identifier: "product_data",
columns: [],
};
return { settings };
},
data() {
return {
licenseKey: "Your license key",
};
},
methods: {
openSession: () => {
nuvoSession.upload({
step: "header",
data: [],
headerIndex: 1,
});
nuvoSession.start();
},
onResults: async (result, identifier, complete) => {
complete();
},
},
};
const nuvoImporter = new window.nuvo.NuvoImporter("Your license key", {
identifier: "card_data",
developerMode: 1,
columns: [],
});
nuvoImporter.setText("Select File");
nuvoImporter.launch();
const target = document.getElementById(nuvoImporter.getId());
document.getElementById("container").append(target);
const button = document.getElementById("start-session");
button.addEventListener("click", () => {
window.nuvo.nuvoSession.upload({
step: "header",
data: [],
headerIndex: 1,
});
window.nuvo.nuvoSession.start();
});