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. step - The step parameter allows you to specify the starting point for the import process, which can be one of three options: header, mapping, or review step. data - The data parameter is used to upload the data that needs to be imported. When using the header or mapping step, 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 the review 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 the data, you can specify its position by passing an integer value for the headerIndex parameter. If you do so, that row will be used as the header row. If no value is provided for headerIndex or if it's undefined, the system will automatically detect the header row using its built-in detection mechanism.
	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

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;

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"> Import Data </nuvo-importer>

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

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>
    <button @click="openSession">Start session</button>
    <nuvo-importer
      :license-key="licenseKey"
      :on-results="onResults"
      :settings="settings"
      text="Select File"
    />
  </div>
</template>

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

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>
    <button @click="openSession">Start session</button>
    <nuvo-importer
      :license-key="licenseKey"
      :on-results="onResults"
      :settings="settings"
      text="Select File"
    />
  </div>
</template>

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

JavaScript

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