Saltar al contenido principal

Invalidar el comportamiento predeterminado del componente de campo de entidad

Note: Esta página describe alternativas de personalización para los componentes de campo de entidad generados. Sin embargo, si las opciones proporcionadas son insuficientes, o si el nivel de personalización es demasiado complejo, analice la posibilidad de crear su propio componente personalizado utilizando la información proporcionada por los ganchos de entidad.

Los componentes de campo de entidad proporcionan las siguientes opciones de personalización.

Cómo mostrar errores de validación en campos específicos​

Como se mencionó en la página Introducción a los componentes de campo de entidad, estos componentes muestran errores en función del valor de showSchemaValidationErrors en su proveedor.

Cada componente de campo de entidad también tiene su propiedad showSchemaValidationErrors que se puede utilizar para invalidar el valor que recibe de su proveedor.

Modificación de las propiedades de los componentes de Jutro​

El SDK de Digital selecciona el componente de Jutro utilizado para un componente de campo de entidad y determina los valores de las propiedades que se le pasan en función de una serie de factores, que se explican con mayor detalle en la página de referencia Asignación para componentes de Jutro. Por ejemplo, si el campo es un tipo Number, entonces será un componente de Jutro NumberInput.

No puede cambiar qué componente de Jutro está seleccionado para un componente de campo de entidad, pero puede controlar los valores de las propiedades pasadas al componente seleccionado utilizando la propiedad <component-name>Props con seguridad de tipos (llamada así por el componente seleccionado) o la propiedad overrideProps.

Note: Si se utilizan tanto overrideProps como una propiedad con seguridad de tipos <component-name>Props, los valores en overrideProps tienen prioridad.

Propiedades del componente con seguridad de tipos​

Habrá propiedades con seguridad de tipos <component-name>Props asociadas según los componentes que se seleccionan para el campo. Esta propiedad toma un objeto cuyo tipo coincide con las propiedades de un componente de Jutro.

Por ejemplo, si el componente elegido es un Select, tendrá una propiedad selectProps con tipo para un objeto cuyas propiedades se asignan desde las propiedades del componente selección. El componente selección tiene una propiedad de rótulo que se rellena automáticamente según el esquema y también tiene una propiedad labelPosition que no está establecida de manera predeterminada. El siguiente código pasará valores a estas dos propiedades:

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

export const MyPage = (): JSX.Element => (
  <PhoneNumberProvider>
    <Field_number />
    <Field_countryCode
      selectProps={{ label: 'Custom label', labelPosition: 'left' }}
    />
  </PhoneNumberProvider>
);

La página de asignación de componentes de Jutro proporciona una lista completa de los posibles componentes y los objetos aceptados por la propiedad <component-name>Props.

Note: Por lo general, solo habrá un componente de Jutro seleccionado para un campo y, por lo tanto, solo estará disponible una propiedad con seguridad de tipos <component-name>Props en el componente de campo de entidad.

<component-name>Props con seguridad de tipos múltiple está disponible solo en dos casos:

  1. Los campos que registran valores de fecha y hora se renderizarán con dos componentes simultáneamente: un DatePicker y un TimePicker. Como tal, tanto la propiedad datePickerProps como timePickerProps estarán disponibles.
  2. Algunos campos de string se pueden renderizar como TextInput o TextArea. Si bien el sistema selecciona solo una opción para renderizar, tanto la propiedad textInputProps como textAreaProps están disponibles.

Consulte la página de asignación de componentes de Jutro para obtener más información sobre los casos en los que se seleccionan estos componentes.

overrideProps​

La propiedad overrideProps es una forma alternativa de invalidar propiedades en componentes seleccionados por un componente de campo de entidad. A diferencia de <component-name>Props con seguridad de tipos, la propiedad overrideProps no tiene un tipo. Utilice la propiedad específica del componente con tipo cuando sea posible, pero puede haber casos en los que el uso de overrideProps sin tipo puede simplificar el código.

Por ejemplo, como se indica en la página de referencia Asignación para componentes de Jutro, los campos string se pueden asignar a componentes TextInput o TextArea dependiendo de si el campo tiene una longitud máxima especificada superior a 255 caracteres. Dado que ambos tienen una propiedad label, puede usar overrideProps para especificar el mismo rótulo para ambos casos.

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

export const MyPage = (): JSX.Element => (
  <PhoneNumberProvider>
    <Field_number overrideProps={{ label: 'Enter a phone number:' }} />
    <Field_countryCode />
  </PhoneNumberProvider>
);

La propiedad overrideProps también se puede utilizar junto con la matriz fieldsList para crear un bucle simple que dé el mismo valor a cada componente renderizado por los componentes de campo de una entidad. Por ejemplo, si desea marcar cada campo como obligatorio:

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

export const MyPage = (): JSX.Element => (
  <PhoneNumberProvider>
    {fieldsList.map(({ FieldComponent, fieldName }) => (
      <FieldComponent
        key={fieldName}
        overrideProps={{ required: true }}
      />
    ))}
  </PhoneNumberProvider>
);
Warning: Usar overrideProps junto con fieldsList puede tener consecuencias no deseadas. Esto se debe a que hay situaciones en las que algunos componentes pueden no tener la propiedad dada.