Importing Widget

Component Type Script File

After installing the widget-lib from the NPM repository, navigate to the component designated for administrators to configure settings. In this component, import the TechBootstrapImportMateModule module.

Next, define two local variables:

_apiBasePath – This variable stores the full base URL of your deployed backend solution. If you are running the backend locally, the value would be:

http://localhost:3000

Ensure this value reflects the correct deployment environment.

_bearToken – This variable holds the access token for your SaaS application or project. It ensures that users accessing the backend API are properly authenticated within your application.

Example of a simple component having the import module

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TechbootstrapImportMateModule } from 'techbootstrap-import-mate';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, TechbootstrapImportMateModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-plugin-workspace';
  _apiBasePath="http://localhost:3000";
  _bearToken="token";
}

HTML file

Once the TypeScript file is set up, you can now add the corresponding HTML tag to your component. Place it in your desired location within the template:

<app-tb-import-client [apiBasePath]="_apiBasePath" [bearToken]="_bearToken"></app-tb-import-client>

This component will utilize the configured _apiBasePath and _bearToken to communicate with the backend, ensuring proper authentication and connectivity.

Once you have successfully followed the above steps and run the app, you will be able to see the Import Widget with the following UI

The Import Widget provides a seamless way to import data. Follow these steps to proceed:

1. Select a Module

• Choose the module where you want to import data.

2. Download the CSV Template (Optional)

• If you need a structured CSV template, click the “Download Template” button.
• The template will contain the configured fields with their alias names for reference.

3. Upload an Existing CSV File

• If you already have a CSV file ready, proceed directly to uploading.
• Click “Upload”, and a file selection popup will appear.

4. Select and Map Fields

• Choose the CSV file from your system.
• After selecting the file, the Field Mapping interface will appear.
• Manually map the configured fields (from your import settings) to the corresponding CSV header fields to ensure proper data alignment.

Once the fields are mapped correctly, the system will process the import, ensuring data consistency and integrity.