Saltar al contenido principal

Introducción a los componentes de campo de entidad

Descripción general​

Como parte de las extensiones de la interfaz de usuario del SDK de Digital, Jutro CLI genera componentes de React para todos los campos de una entidad. Con este propósito, utiliza la definición del tipo de campo para seleccionar el mejor ajuste para el componente de Jutro que exista en el sistema de diseño.

Estos componentes generados se deben renderizar como elementos secundarios del proveedor de entidad correspondiente y, sin ninguna configuración adicional, aprovecharán el gancho de la entidad para:

  • Conectar el estado de la entidad con el valor del componente de Jutro.
  • Actualizar el estado de la entidad cuando el usuario interactúa con el componente de Jutro.
  • Extraer la información relevante del esquema de la entidad y utilizarla como las propiedades para el componente de Jutro, lo que incluye:
    • propiedades visuales como label;
    • propiedades afectadas por la aplicación de reglas dinámicas, como required o disabled;
    • mensajes de error resultantes de validar el estado de la entidad (desactivado de forma predeterminada).

Encontrará detalles sobre cómo se asigna la información de entidad al componente de Jutro en la página de referencia Asignación para componentes de Jutro.

Note: El proveedor de la entidad ejecuta las funciones de esquema y de validación en cada renderización, pasando el state actual como argumento. Esto garantiza que los componentes de campo utilicen la información actualizada del esquema y los resultados de validación de la entidad.

Estos componentes son la forma más rápida de crear formularios mediante esquemas de entidad de InsuranceSuite, pero son muy dogmáticos en cuanto a las asociaciones que se realizan entre estos esquemas y los componentes de Jutro.

Hay diferentes maneras de anular este dogmatismo predeterminado, pero si su caso de uso requiere aún más flexibilidad, o si tiene su propio sistema de diseño, los ganchos de entidad le permitirán crear sus propias asociaciones personalizadas aprovechando la misma lógica con estados.

Uso de componentes de campo de entidad​

Como se explica en Contrato de la API de extensiones de la interfaz de usuario del SDK de Digital, el generador del SDK de Jutro crea un directorio para cada entidad utilizada por cada una de las API disponibles en un SDK generado. Puede importar los componentes de campo de entidad generados desde la ruta raíz del directorio de entidades.

Se nombran siguiendo el patrón Field_<field-name>, y se deben utilizar como componentes secundarios de su proveedor de entidad asociado.

import {
  PhoneNumberProvider,
  Field_number,
  Field_countryCode,
} from 'src/generated/JutroUtils/PcSDK/account/PhoneNumber';

export const MyPage = (): JSX.Element => (
  <PhoneNumberProvider>
    <Field_number />
    <Field_countryCode />
  </PhoneNumberProvider>
);

Esto conectará automáticamente los componentes con el estado, el esquema y los resultados de validación de la entidad, a los que se puede acceder en cualquier momento mediante el gancho de entidad correspondiente.

Cómo mostrar errores de validación​

Los componentes del campo de entidad leen el valor showValidationErrors definido por el usuario desde su proveedor de entidad. Si esta propiedad es true, todos los componentes de campo generados relacionados con esa entidad mostrarán los errores de validación del esquema, si hubiera.

Además, los componentes de campo generados también proporcionan una propiedad showValidationErrors que se puede utilizar para invalidar el valor del proveedor para ese campo específico.

En el siguiente ejemplo, el campo number mostrará automáticamente los errores de validación del esquema, si hubiera, ya que la propiedad showSchemaValidationErrors está establecida en true al nivel del proveedor. El campo countryCode no mostrará los errores de validación del esquema, incluso si hubiera, ya que la propiedad se invalida para false al nivel del campo.

import {
  PhoneNumberProvider,
  Field_number,
  Field_countryCode,
} from 'src/generated/JutroUtils/<your-sdk-name>/<api-name>/PhoneNumber';

export const MyPage = (): JSX.Element => (
  <PhoneNumberProvider showSchemaValidationErrors>
    <Field_number />
    <Field_countryCode showSchemaValidationErrors={false} />
  </PhoneNumberProvider>
);

Matriz fieldsList​

Además de los componentes individuales, puede importar fieldsList para obtener una matriz de todos los componentes de campo generados para una entidad. Los elementos de esta matriz son objetos que tienen las siguientes propiedades:

  • FieldComponent. Componente de React generado para el campo.
  • fieldName. Nombre del campo.

Esto se puede utilizar para crear un formulario que contenga todos los campos para una entidad determinada.

import {
  PhoneNumberProvider,
  fieldsList,
} from 'src/generated/JutroUtils/<your-sdk-name>/<api-name>/PhoneNumber';

export const MyPage = (): JSX.Element => (
  <PhoneNumberProvider showSchemaValidationErrors>
    {fieldsList.map(({ FieldComponent, fieldName }) => (
      <FieldComponent key={fieldName} />
    ))}
  </PhoneNumberProvider>
);