Skip to content

Configure

Register the element once, then configure each instance with attributes (strings) and properties (objects/functions).

import { defineImportSuiteElement } from '@capitality-io/import-suite-ng';
await defineImportSuiteElement('mildport-import');

Set these directly in markup.

Attribute Description
api-base-url Origin of your self-hosted (or pilot) engine, e.g. https://imports.your-infra.example.
license-key The signed tenant license key the engine verifies offline.
grid-impl Review-grid implementation (e.g. slickgrid).
<mildport-import
api-base-url="https://imports.your-infra.example"
license-key="SIGNED_TENANT_KEY"
grid-impl="slickgrid"
></mildport-import>

Set these in JavaScript on the element instance.

Property Type Description
columnSchema ColumnSchema[] Your target data model — the fields a clean row maps onto.
applyMode 'webhook' | 'browser' Deliver via a signed apply webhook, or hand rows back in-page.
mappingIdentifier string | null Stable id so confirmed mappings are remembered across imports.
hostConfig ImportSuiteHostConfig Accepted formats, multi-file joins, cleaning hooks, sample data.
onResults (rows, mapping) => void Browser-mode callback with the delivered rows + mapping.
const el = document.querySelector('mildport-import')!;
el.columnSchema = [
{
key: 'person.firstName',
label: 'First name',
columnType: 'string',
alternativeMatches: ['given name', 'vorname'],
},
{
key: 'person.email',
label: 'Email',
columnType: 'email',
validations: [{ validate: 'required' }],
},
// …
];
el.applyMode = 'browser';
el.hostConfig = {
allowMultipleFiles: false,
acceptedFormats: ['spreadsheet', 'text', 'json', 'xml'],
};
el.onResults = (rows, mapping) => sync(rows, mapping);

Next: Events & apply.