Présentation des composants des champs d'entité

Présentation

Dans le cadre des extensions d'interface utilisateur du SDK Digital, la CLI Jutro génère des composants React pour tous les champs d'une entité. À cette fin, elle utilise la définition de type du champ pour sélectionner le composant Jutro le mieux adapté existant dans le système de conception.

Ces composants générés doivent être rendus en tant qu'éléments enfants du fournisseur d'entité correspondant et, sans qu'aucune configuration supplémentaire ne soit nécessaire, ils utiliseront le crochet de l'entité pour :

• Connecter l'état de l'entité avec la valeur du composant Jutro.
• Mettre à jour l'état de l'entité lorsque l'utilisateur interagit avec le composant Jutro.
• Extraire les informations pertinentes du schéma de l'entité et les utiliser comme propriétés pour le composant Jutro, notamment :
  • Propriétés visuelles comme label.
  • Propriétés affectées par l'application de règles dynamiques, comme required ou disabled.
  • Messages d'erreur issus de la validation de l'état de l'entité (désactivé par défaut).

Vous trouverez des détails sur la façon dont les informations d'entité sont mappées vers le composant Jutro dans la page de référence Mappage vers les composants Jutro.

Note: Le fournisseur d'entité exécute les fonctions de schéma et de validation à chaque rendu, en transmettant le state actuel en tant qu'argument. Cela garantit que les composants de champ utilisent les informations à jour du schéma de l'entité et des résultats de validation.

Ces composants constituent le moyen le plus rapide de créer des formulaires à l'aide de schémas d'entité InsuranceSuite, mais ils ont des opinions très tranchées sur les associations établies entre ces schémas et les composants Jutro.

Il existe différentes façons de remplacer ces opinions par défaut, mais si votre cas d'utilisation nécessite encore plus de flexibilité ou si vous disposez de votre propre système de conception, les crochets d'entité vous permettront de créer vos propres associations personnalisées en utilisant la même logique avec état.

Utilisation des composants de champ d'entité

Comme expliqué dans le cahier des charges de l'API des extensions d'interface utilisateur du SDK Digital, le générateur de SDK Jutro crée un répertoire pour chaque entité utilisée par chacune des API disponibles dans un SDK ayant été généré. Vous pouvez importer les composants des champs d’entités générés à partir du chemin d’accès racine du répertoire des entités.

Ils sont nommés selon le modèle Field_<field-name>, et doivent être utilisés comme composants enfants de leur fournisseur d'entité associé.

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

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

Cela connecte automatiquement les composants à l'état, au schéma et aux résultats de validation de l'entité, auxquels vous pouvez accéder à tout moment à l'aide du crochet d'entité correspondant.

Affichage des erreurs de validation

Les composants de champ d'entité consultent la valeur showValidationErrors définie par l'utilisateur auprès de leur fournisseur d'entité. Si cette propriété est true, alors tous les composants de champ générés associés à cette entité afficheront les erreurs de validation de schéma s'il y en a.

En outre, les composants de champ générés fournissent également une propriété showValidationErrors qui peut être utilisée pour remplacer la valeur du fournisseur pour ce champ spécifique.

Dans l'exemple ci-dessous, le champ number affiche automatiquement les erreurs de validation du schéma, s'il y en a, puisque la propriété showSchemaValidationErrors est définie sur true au niveau du fournisseur. Le champ countryCode n'affichera pas les erreurs de validation de schéma même si elles existent, car la propriété est remplacée par false niveau du champ.

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>
);

Série fieldsList

Outre les composants individuels, vous pouvez importer fieldsList pour obtenir une série de tous les composants de champs générés pour une entité. Les éléments de cette série sont des objets possédant les propriétés suivantes :

• FieldComponent : composant React généré pour le champ.
• fieldName : nom du champ.

Cela peut être utilisé pour créer un formulaire qui contient tous les champs d'une entité donnée.

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>
);