Data Input

Data Input is used to let users enter data that fits a specific Data Schema with optional use of variables defined by another Data Schema.

It supports complex schemas, lookups, data transformation formulas, and other features useful for configuring integrations.

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

export function PlainDataInputExample() {
  const [value, setValue] = useState<unknown>({})

  const schema = {
    type: 'object',
    properties: {
      String: {
        type: 'string',
        format: 'hostname',
      },
      Integer: {
        type: 'integer',
      },
      Boolean: {
        type: 'boolean',
      },
      Object: {
        type: 'object',
        required: ['String'],
        properties: {
          NoType: {
            title: 'No Type Title',
          },
          String: {
            type: 'string',
          },
          Object: {
            type: 'object',
            properties: {
              String: {
                type: 'string',
              },
            },
          },
        },
      },
    },
    required: ['String', 'Boolean'],
  }

  const variablesSchema: DataSchema = {
    type: 'object',
    properties: {
      'string-value': {
        type: 'string',
        title: 'String Value',
      },
      'array-value': {
        type: 'array',
        title: 'Array Value',
        items: {
          type: 'string',
        },
      },
      numberOfEmployees: {
        type: 'number',
      },
      currentWeekNumber: {
        type: 'integer',
      },
      createdTime: {
        type: 'string',
        format: 'date-time',
      },
    },
  }

  return (
    <DataInput
      schema={schema}
      value={value}
      variablesSchema={variablesSchema}
      onChange={(importValue: unknown) => setValue(importValue)}
    />
  )
}

Nested Components

Combobox