Einführung in Entitätsfeldkomponenten

Überblick

Als Teil der Digital SDK UI Extensions generiert die Jutro CLI React-Komponenten für alle Felder in einer Entität. Zu diesem Zweck verwendet sie die Typdefinition des Feldes, um die am besten passende Jutro-Komponente auszuwählen, die im Design-System vorhanden ist.

Diese generierten Komponenten müssen als untergeordnete Elemente des entsprechenden Entitätsanbieters gerendert werden und nutzen ohne zusätzliche Konfiguration den Hook der Entität, um:

• den Status der Entität mit dem Wert der Jutro-Komponente zu verbinden.
• den Status der Entität zu aktualisieren, wenn der Benutzer mit der Jutro-Komponente interagiert.
• die relevanten Informationen aus dem Schema der Entität zu extrahieren und als Eigenschaften für die Jutro-Komponente zu verwenden. Dazu gehören u. a.:
  • visuelle Eigenschaften wie label.
  • von der Anwendung dynamischer Regeln betroffene Eigenschaften wie required oder disabled.
  • Fehlermeldungen, die sich aus der Validierung des Status der Entität ergeben (standardmäßig deaktiviert).

Ausführliche Informationen darüber, wie die Entitätsinformationen der Jutro-Komponente zugeordnet werden, finden Sie auf der Referenzseite Zuordnung zu Jutro-Komponenten.

Note: Der Entitätsanbieter führt die Schema- und Validierungsfunktionen für jedes Rendering aus und übergibt den aktuellen state als Argument. Dadurch wird sichergestellt, dass die Feldkomponenten die aktuellen Informationen aus dem Schema und den Validierungsergebnissen der Entität verwenden.

Diese Komponenten sind die schnellste Möglichkeit, Formulare mit InsuranceSuite-Entitätsschemas zu erstellen, aber sie geben strikt vor, wie diese Schemas den einzelnen Jutro-Komponenten zugeordnet werden.

Es gibt verschiedene Möglichkeiten, diese standardmäßigen Vorgaben (Opinions) zu überschreiben. Aber wenn Ihr Anwendungsfall noch mehr Flexibilität erfordert oder Sie über ein eigenes Designsystem verfügen, können Sie mit den Entitäts-Hooks Ihre eigenen benutzerdefinierten Zuordnungen erstellen, die dieselbe zustandsbehaftete Logik nutzen.

Verwenden von Entitätsfeldkomponenten

Wie im Digital SDK UI Extensions API-Vertrag erläutert, erstellt der Jutro SDK-Generator ein Verzeichnis für jede Entität, die von den einzelnen verfügbaren APIs in einem generierten SDK verwendet wird. Sie können die generierten Entitätsfeldkomponenten aus dem Stammpfad des Entitätsverzeichnisses importieren.

Sie werden nach dem Muster Field_<field-name> benannt und müssen als untergeordnete Komponenten des zugehörigen Entitätsanbieters verwendet werden.

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

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

Dadurch werden die Komponenten automatisch mit dem Zustand, dem Schema und den Validierungsergebnissen der Entität verbunden, auf die jederzeit über den entsprechenden Entitäts-Hook zugegriffen werden kann.

Validierungsfehler anzeigen

Entitätsfeldkomponenten lesen den benutzerdefinierten showValidationErrors-Wert von ihrem Entitätsanbieter. Wenn diese Eigenschaft true ist, zeigen alle generierten Feldkomponenten, die mit dieser Entität verbunden sind, die Schemavalidierungsfehler an, sofern welche vorhanden sind.

Darüber hinaus enthalten die generierten Feldkomponenten auch die Eigenschaft showValidationErrors, die verwendet werden kann, um den Wert des Anbieters für dieses spezifische Feld zu überschreiben.

Im folgenden Beispiel werden im number-Feld gegebenenfalls automatisch die Schemavalidierungsfehler angezeigt, da die Eigenschaft showSchemaValidationErrors auf Anbieterebene auf true festgelegt ist. Auch wenn sie vorhanden sind, werden die Schemavalidierungsfehler nicht im Feld countryCode angezeigt, da die Eigenschaft auf Feldebene auf false überschrieben wird.

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

fieldsList-Array

Zusätzlich zu den einzelnen Komponenten können Sie fieldsList importieren, um ein Array mit allen generierten Feldkomponenten für eine Entität abzurufen. Die Elemente in diesem Array sind Objekte mit den folgenden Eigenschaften:

• FieldComponent: Die für das Feld generierte React-Komponente.
• fieldName: Der Name des Felds

Damit kann ein Formular erstellt werden, das alle Felder für eine bestimmte Entität enthält.

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