Saltar al contenido

Componente de tabla del SDK de Jitterbit Connector

Descripción general

El componente de tabla se puede utilizar donde sea que un usuario necesite proporcionar múltiples entradas para un endpoint o una actividad, pero donde un componente de clave-valor es demasiado limitado. En este ejemplo, el usuario puede ingresar un nombre, especificar un valor booleano y seleccionar de una lista de tipos:

Componente de Tabla

Características del componente

El componente de tabla incluye comportamiento incorporado para agregar, editar y eliminar filas de la tabla:

  • Ícono de más: Hacer clic en el ícono de más agrega una nueva fila en la parte inferior de la tabla.
  • Fila existente: Pasar el cursor sobre una fila existente revela los íconos de Lápiz y Papelera.
  • Ícono de lápiz: Hacer clic activa el modo de edición para una fila.
  • Ícono de papelera: Hacer clic elimina la fila.
  • Modo de edición: Revela el ícono de Variable disponible en los campos de texto. Pasar el cursor mientras está en modo de edición revela los íconos de Marca de verificación y Descartar.
  • Ícono de variable: Indica que el campo de texto admite el uso de variables globales, variables de proyecto y variables de Jitterbit. Comienza escribiendo un corchete cuadrado abierto [ en el campo o haciendo clic en el ícono de variable para mostrar una lista de las variables existentes de las que elegir.

    Importante

    Para que los valores de las variables se completen en tiempo de ejecución, la versión del agente debe ser al menos 10.75 / 11.13.

    Los campos en las tablas no admiten el uso de variables para pasar JSON sin procesar. Si tu caso de uso no admite definir JSON sin procesar en los campos directamente, escapa el contenido JSON antes de pasarlo con una variable. Por ejemplo, escapar {"success": "true"}; se convierte en {\"success\": \"true\"};.

  • Ícono de marca de verificación: Hacer clic guarda todos los cambios en la fila actual y sale del modo de edición.

  • Ícono de descartar: Hacer clic descarta todos los cambios en la fila actual, sale del modo de edición y revierte la fila a su valor anterior.
  • Borrar todo: Hacer clic elimina todas las filas en la tabla.

Al pasar el cursor sobre una fila existente se revelan los íconos de Lápiz y Papelera:

Componente de tabla: Pasando el cursor fuera del modo de edición

En modo de edición después de hacer clic en el ícono de Lápiz, mostrando el ícono de Variable:

Componente de tabla: En modo de edición

Al pasar el cursor mientras se está en modo de edición se revelan los íconos de Marca de verificación y Descartar:

Componente de tabla: Pasando el cursor mientras se está en modo de edición

Componente JSON

{
  "name": "exampleConfiguration",
  "displayName": "Dataset's Metadata fields",
  "type": "table",
  "use": {
    "ui": {
      "items": [
        {
          "name": "name",
          "displayName": "Name",
          "type": "string",
          "defaultValue": "",
          "validators": [
            {
              "name": "required"
            }
          ]
        },
        {
          "name": "number",
          "displayName": "Number",
          "type": "number",
          "defaultValue": 2,
          "validators": [
            {
              "name": "required"
            },
            {
              "name": "max",
              "args": [ 5 ]
            },
            {
              "name": "min",
              "args": [ 0 ]
            }
          ]
        },
        {
          "name": "isUnique",
          "displayName": "Is Unique",
          "type": "boolean",
          "defaultValue": true
        },
        {
          "name": "type",
          "displayName": "Type",
          "type": "select",
          "enumValues": [
            {
              "enumValue": "String",
              "realValue": "string"
            },
            {
              "enumValue": "Number",
              "realValue": "number"
            }
          ],
          "defaultValue": "string"
        }
      ],
      "values": {
        "name": [
          "Test1",
          "Test2"
        ],
        "number": [
          2,
          4
        ],
        "isUnique": [
          true,
          false
        ],
        "type": [
          "string",
          "number"
        ]
      }
    }
  }
}

En el JSON que describe la tabla, se pueden configurar estas propiedades:

  • name: Nombre único para el componente de tabla.
  • displayName: El título mostrado sobre la tabla en la interfaz de usuario de Integration Studio.
  • type: El tipo de componente de tabla debe ser "table".
  • items: Un arreglo de elementos que describe el encabezado de la tabla y el tipo de cada columna. Los tipos de columna soportados son string, number, boolean y select. Cada columna puede tener su propio validador si es necesario. Para cada elemento, se pueden crear estas entradas:

    • name: Nombre único para la columna.
    • displayName: Nombre de visualización para la columna.
    • type: Tipo de dato para la columna.
    • widgetHint: Una pista opcional sobre el tipo de componente a usar al mostrar los valores de la columna.
    • defaultValue: Un valor predeterminado opcional a usar para cualquier nueva entrada en la columna.
    • validators: Una lista opcional de validadores.
  • values: Si se requieren valores de datos predefinidos para una columna, especifíquelos en esta sección usando la misma clave (el valor del campo name) para cada elemento. La selección de un usuario aparecerá en esta sección cuando los datos del componente sean devueltos al conector en el objeto props.

En el ejemplo anterior, el array items tiene cuatro elementos y el mapa values tiene cuatro claves coincidentes (name, number, isUnique y type).

Salida del componente

El componente de tabla devuelve al conector su salida en forma de una cadena JSON. Esta cadena debe convertirse de nuevo en un objeto utilizando un analizador como Jackson antes de que se pueda usar.