Passer au contenu principal

Remplacement du comportement par défaut du composant de champ d'entité

Note: Cette page décrit les alternatives de personnalisation pour les composants de champs d’entité générés. Toutefois, si les options proposées ne suffisent pas ou si le niveau de personnalisation est trop complexe, vous pouvez envisager de créer votre propre composant personnalisé à l'aide des informations fournies par les crochets d'entité.

Les composants du champ d'entité offrent les options de personnalisation suivantes.

Affichage des erreurs de validation sur des champs spécifiques​

Comme expliqué à la section Présentation des composants de champs d'entité, les composants de champs d'entité affichent des erreurs en fonction de la valeur de showSchemaValidationErrors dans leur fournisseur.

Chaque composant de champ d'entité possède également sa propre propriété showSchemaValidationErrors qui peut être utilisée pour remplacer la valeur de son fournisseur.

Modification des propriétés des composants Jutro​

Le SDK Digital sélectionne le composant Jutro utilisé pour un composant de champ d’entité et détermine les valeurs des propriétés qui lui sont transmises en fonction d’un certain nombre de facteurs, qui sont expliqués plus en détail sur la page de référence Mappage vers les composants Jutro. Par exemple, si le champ est de type Number, il s’agira d’un composant NumberInput Jutro.

Vous ne pouvez pas changer le composant Jutro sélectionné pour un composant de champ d’entité, mais vous pouvez contrôler les valeurs des propriétés transmises au composant sélectionné à l’aide de la propriété <component-name>Props type-safe (nommée d’après le composant sélectionné) ou de la propriété overrideProps.

Note: Si overrideProps et une propriété <component-name>Props type-safe sont utilisés, les valeurs dans overrideProps prévalent.

Propriétés de composant type-safe​

Des propriétés <component-name>Props type-safe seront associées en fonction des composants sélectionnés pour le champ. Cette propriété prend un objet dont le type correspond aux propriétés d'un composant Jutro.

Par exemple, si le composant choisi est un Select, il aura une propriété selectProps typée pour un objet dont les propriétés sont mappées à partir de Sélectionner propriétés du composant. Le composant Select possède une propriété label qui est renseignée automatiquement en fonction du schéma et une propriété labelPosition qui n’est pas définie par défaut. Le code ci-dessous transmettra des valeurs à ces deux propriétés :

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 page de mappage des composants Jutro propose une liste complète des composants possibles et des objets acceptés par la propriété <component-name>Props.

Note: En général, un seul composant Jutro est sélectionné pour un champ et, par conséquent, une seule propriété <component-name>Props « type-safe » est disponible dans le composant de champ d'entité.

Plusieurs propriétés <component-name>Props type-safe sont disponibles dans deux cas seulement :

  1. Les champs qui enregistrent des valeurs de date/heure seront affichés à l'aide de deux composants simultanément : un sélecteur de date et un sélecteur d'heure. À ce titre, les propriétés datePickerProps et timePickerProps seront disponibles.
  2. Certains champs de chaîne peuvent être affichés sous la forme TextInput ou TextArea. Bien que le système ne sélectionne qu’une seule option à afficher, les propriétés textInputProps et textAreaProps sont toutes les deux disponibles.

Consultez la page Mappage des composants Jutro pour en savoir plus sur les cas dans lesquels ces composants sont sélectionnés.

overrideProps​

La propriété overrideProps est une autre façon de remplacer des propriétés dans les composants sélectionnés par un composant de champ d'entité. Contrairement à la propriété <component-name>Props type-safe, la propriété overrideProps n'a pas de type. Utilisez la propriété spécifique au composant typé lorsque cela est possible, mais sachez qu'il peut y avoir des cas où l'utilisation de la propriété overrideProps non typée peut simplifier votre code.

Par exemple, comme indiqué dans la page de référence Mappage vers les composants Jutro, les champs string peuvent être mappés vers les composants TextInput ou TextArea selon que le champ a une longueur maximale spécifiée de 255 caractères. Étant donné que ces deux éléments ont une propriété label, vous pouvez utiliser overrideProps pour spécifier la même étiquette dans les deux cas.

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 propriété overrideProps peut également être utilisée conjointement avec la série fieldsList pour créer une boucle simple afin de donner la même valeur à chaque composant affiché par les composants de champ d'une entité. Par exemple, si vous souhaitez marquer chaque champ comme obligatoire :

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: L'utilisation de overrideProps en association avec fieldsList peut avoir des conséquences inattendues. En effet, il existe des situations où certains composants peuvent ne pas avoir la propriété donnée.