Field Mapping UI Using Components

Create a Field Mapping

Before building a field mapping UI, you need to create a Field Mapping.
Select what you want to map your fields from and to, and the mapping direction. Then continue.

Configure a Field Mapping Instance

To configure a field mapping instance it is enough to use a combination of a specific hook and component.
In this case, you can use the useFieldMappingInstance hook and DataInput component.

Read more about DataInput here.

import { useFieldMappingInstance, DataInput } from "@integration-app/react";

export function FieldMappingExample() {
  const { fieldMappingInstance, patch, loading, error } =
    useFieldMappingInstance({
      integrationKey: '{INTEGRATION_KEY}',
      fieldMappingKey: '{FIELD_MAPPING_KEY}',
      autoCreate: true,
    });

  if (loading) {
    return <p>Loading</p>;
  }

  if (error) {
    return <p>{String(error)}</p>;
  }

  if (!fieldMappingInstance) {
    return <p>Field mapping is missing</p>;
  }

  if (!fieldMappingInstance?.appSchema) {
    return <p>This field mapping does not have a schema to map to.</p>;
  }

  return (
    <DataInput
      schema={fieldMappingInstance.appSchema}
      value={fieldMappingInstance.importValue}
      variablesSchema={fieldMappingInstance.externalSchema}
      onChange={(importValue: unknown) => patch({ importValue })}
    />
  );
}