Todos los componentes (244)

Emparejar campos

Gestión · DataMappingEditor

Qué es y cuándo usarlo

Emparejar los campos de un origen (otro sistema, un fichero, una API) con los de un destino: para cada campo de destino, de qué campo sale y con qué transformación, con un ejemplo de cómo queda.

Cuándo usarlo

Conectar un CRM con la tienda, una hoja de cálculo con la base de datos, una API externa con el esquema propio.
sources son los campos de origen (con un sample para el ejemplo) y targets los de destino, con required y aliases.
«Emparejar por nombre» rellena lo que encaja por clave, etiqueta o alias. Las transformaciones son quitar espacios, mayúsculas, minúsculas y convertir a número.
Avisa de los obligatorios sin origen, de los tipos que no coinciden y de los orígenes usados en más de un destino.

Cuándo no

Importar un fichero de una vez: DataImportWizard ya trae su paso de columnas.
No mueve ningún dato: applyMapping convierte un registro con el emparejado guardado.

Teclado: son desplegables y un botón normales, en una tabla con cabecera de fila.

Accesibilidad: cada desplegable se nombra con su campo («Origen de Teléfono»), el campo de destino es la cabecera de su fila y los avisos van escritos.

Aspecto fino: un obligatorio sin origen lleva el fondo suave de error en su cabecera; la tabla se desplaza de lado si no cabe.

Cómo se ve

Destino	Sale de	Transformación	Ejemplo
Nombreobligatorio	Origen de Nombre Sin origen Cliente Mail Importe Notas	Transformación de Nombre Tal cual Sin espacios a los lados En mayúsculas En minúsculas Como número	lucía ferrer
Correoobligatorio	Origen de Correo Sin origen Cliente Mail Importe Notas	Transformación de Correo Tal cual Sin espacios a los lados En mayúsculas En minúsculas Como número	[email protected]
Total	Origen de Total Sin origen Cliente Mail Importe Notas	Transformación de Total Tal cual Sin espacios a los lados En mayúsculas En minúsculas Como número

<DataMappingEditor
  label="Qué columna va en cada campo"
  sources={columnasDelFichero}
  targets={camposDeDestino}
  value={mapeo}
  onChange={setMapeo}
/>

Props

Se importa con import { DataMappingEditor } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Que se empareja («Campos del CRM con los de la tienda»). Obligatorio.
`onChange`obligatoria	`(value: DataMapping) => void`	—
`sources`obligatoria	`readonly SourceField[]`	—
`targets`obligatoria	`readonly TargetField[]`	—
`value`obligatoria	`Readonly<Record<string, MappingEntry>>`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: