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-export-client [apiBasePath]="_apiBasePath" [bearToken]="_bearToken"></app-tb-export-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 Export Widget with the following UI

The Export Module allows users to export data from a selected module with optional range selection.

1. Select Module

• Choose the module from which you want to export data.
• Example: Customer (customer)

2. Set Data Range (Optional)

• Start Count: Specify the starting point for data export (optional).
• End Count: Define the endpoint for data export (optional).

📌 If Start Count and End Count are left blank, the system will export all available records from the selected module.

After selecting the module, follow these steps to export data:

1. Select Fields to Export

• Once the module is chosen, a list of available fields will be displayed.
• Select the fields you want to include in the export file.

2. Click “Export”

• After picking the desired fields, click the “Export” button.
• The system will generate a CSV file containing the selected data.

This ensures a flexible export process, allowing users to retrieve only the relevant data they need.