Configurazione

Registra l’elemento una volta, poi configura ogni istanza con attributi (stringhe) e proprietà (oggetti/funzioni).

import { defineImportSuiteElement, mountImportFlow } from '@capitality-io/mildport-widget';
await defineImportSuiteElement('mildport-import');

Un’unica superficie di configurazione: `targets`

Dichiara quali tipi di record possono essere creati e quali campi ciascuno contiene. Mildport deriva internamente abbinamento, validazione e UX capture-first da questo catalogo.

Scenario	Esempio
Capture-first (PDF, foto, note)	Più target — Contact, Lead, Task…
Foglio di calcolo multi-entità	`{ id: 'person', fields: [...] }`, `{ id: 'organization', fields: [...] }`
CSV piatto singolo	Un target — `{ id: 'contact', fields: [...] }`

Consigliato: usa mountImportFlow() per raggruppare target, flag di upload, modalità di apply e memoria delle mappature. Vedi Importazioni capture-first.

Attributi

Attributo	Descrizione
`api-base-url`	Origin del tuo motore self-hosted (o pilota), es. `https://imports.your-infra.example`.
`license-key`	La chiave di licenza del tenant firmata che il motore verifica offline.
`grid-impl`	Implementazione della griglia di revisione (es. `slickgrid`).

<mildport-import
  api-base-url="https://imports.your-infra.example"
  license-key="SIGNED_TENANT_KEY"
  grid-impl="slickgrid"
></mildport-import>

Proprietà

Proprietà	Tipo	Descrizione
`targets`	`TargetCatalog`	Obbligatorio — tipi di record + metadati dei campi (tipi, validatori, alias di abbinamento).
`applyMode`	`'webhook' \| 'browser'`	Consegna tramite un webhook di apply firmato, o restituisci le righe nella pagina.
`mappingIdentifier`	`string \| null`	Id stabile affinché le mappature confermate vengano ricordate tra le importazioni.
`hostConfig`	`ImportSuiteHostConfig`	Formati accettati, join multi-file, hook di pulizia, dati di esempio, livello di pulizia IA (`aiTransforms: 'off' \| 'suggest' \| 'full'`) e `actor` per l’audit.
`profile`	`ImportProfile`	Un profilo di importazione versionato (`{mapping?, recipe?}`): il mapping si applica automaticamente, la ricetta appare come suggerimento di pulizia con un clic nella revisione.
`onResults`	`(rows, mapping) => void`	Callback in modalità browser con le righe consegnate + la mappatura.

Esempio — `mountImportFlow` (consigliato)

const el = document.querySelector('mildport-import')!;

mountImportFlow(el, {
  id: 'tenant-contacts',
  version: 'v1',
  targets: [
    {
      id: 'person',
      label: 'Persona',
      fields: [
        {
          key: 'person.firstName',
          label: 'Nome',
          alternativeMatches: ['given name', 'vorname'],
        },
        {
          key: 'person.email',
          label: 'Email',
          columnType: 'email',
          required: true,
        },
      ],
    },
    {
      id: 'organization',
      label: 'Organizzazione',
      fields: [{ key: 'organization.name', label: 'Nome azienda' }],
    },
  ],
  input: { acceptedFormats: ['spreadsheet', 'text', 'pdf', 'image'] },
  delivery: { mode: 'browser' },
});

el.onResults = (rows, mapping) => sync(rows, mapping);

Esempio — impostare `targets` direttamente

el.targets = [
  {
    id: 'contact',
    label: 'Contatto',
    fields: [
      { key: 'contact.email', label: 'Email', columnType: 'email', required: true },
      { key: 'contact.name', label: 'Nome' },
    ],
  },
];
el.applyMode = 'browser';
el.hostConfig = { acceptedFormats: ['pdf', 'image', 'text', 'spreadsheet'] };

Avanti: Eventi e apply.