Zum Hauptinhalt springen

Überschreiben des standardmäßigen Verhaltens der Entitätsfeldkomponenten

Note: Auf dieser Seite werden Anpassungsalternativen für die generierten Entitätsfeldkomponenten beschrieben. Wenn die bereitgestellten Optionen jedoch nicht ausreichen oder der Grad der Anpassung zu komplex ist, können Sie mit den von den Entitäts-Hooks bereitgestellten Informationen auch Ihre eigene benutzerdefinierte Komponente erstellen.

Die Entitätsfeldkomponenten bieten die folgenden Anpassungsoptionen.

Anzeigen von Validierungsfehlern in bestimmten Feldern​

Wie auf der Seite Einführung in Entitätsfeldkomponenten erwähnt, werden bei Entitätsfeldkomponenten Fehler basierend auf dem Wert von showSchemaValidationErrors in ihrem Anbieter angezeigt.

Jede Entitätsfeldkomponente verfügt außerdem über eine eigene showSchemaValidationErrors-Eigenschaft, die zum Überschreiben des vom Anbieter erhaltenen Werts verwendet werden kann.

Ändern der Eigenschaften der Jutro-Komponenten​

Das Digital SDK wählt die Jutro-Komponente aus, die für eine Entitätsfeldkomponente verwendet wird, und bestimmt die Werte der an diese Komponente übergebenen Eigenschaften. Dies geschieht basierend auf einer Reihe von Faktoren, die auf der Referenzseite Zuordnung zu Jutro-Komponenten näher erläutert werden. Wenn das Feld beispielsweise vom Typ Number ist, handelt es sich um eine Jutro-NumberInput-Komponente.

Sie können nicht ändern, welche Jutro-Komponente für eine Entitätsfeldkomponente ausgewählt ist. Aber Sie können die Werte der Eigenschaften, die an die ausgewählte Komponente übergeben werden, mit der typsicheren <component-name>Props-Eigenschaft (benannt nach der ausgewählten Komponente) oder der overrideProps-Eigenschaft steuern.

Note: Wenn sowohl overrideProps als auch eine typsichere <component-name>Props-Eigenschaft verwendet werden, haben die Werte in overrideProps Vorrang.

Typsichere Komponenteneigenschaften​

Es werden typsichere <component-name>Props-Eigenschaften zugeordnet, je nachdem, welche Komponenten für das Feld ausgewählt wurden. Diese Eigenschaft nimmt ein Objekt an, dessen Typ den Eigenschaften für eine Jutro-Komponente entspricht.

Wenn es sich bei der ausgewählten Komponente beispielsweise um eine Select-Komponente handelt, verfügt sie über eine Eigenschaft selectProps, die als ein Objekt typisiert ist, dessen Eigenschaften wiederum aus den Eigenschaften der Select-Komponente zugeordnet werden. Die Select-Komponente verfügt über eine label-Eigenschaft, die basierend auf dem Schema automatisch gefüllt wird, sowie über eine labelPosition-Eigenschaft, die standardmäßig nicht festgelegt ist. Der folgende Code übergibt Werte an diese beiden Eigenschaften:

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

Die Seite Zuordnung der Jutro-Komponenten bietet eine vollständige Liste der möglichen Komponenten und der Objekte, die von der <component-name>Props-Eigenschaft akzeptiert werden.

Note: In der Regel wird nur eine Jutro-Komponente für ein Feld ausgewählt und deshalb ist nur eine typsichere <component-name>Props-Eigenschaft in der Feldkomponente der Entität verfügbar.

Mehrere typsichere <component-name>Props-Eigenschaften sind nur in zwei Fällen verfügbar:

  1. Felder, in denen Datums-/Uhrzeitwerte aufgezeichnet werden, werden mit zwei Komponenten gleichzeitig gerendert: einem DatePicker und einem TimePicker. Daher sind die beiden Eigenschaften datePickerProps und timePickerProps verfügbar.
  2. Einige Zeichenfolgenfelder können entweder als TextInput oder als TextArea gerendert werden. Während das System nur eine Option zum Rendern auswählt, sind beide Eigenschaften textInputProps und textAreaProps verfügbar.

Weitere Informationen zu den Fällen, in denen diese Komponenten ausgewählt werden, finden Sie auf der Seite Jutro-Komponentenzuordnung.

overrideProps​

Die overrideProps-Eigenschaft ist eine alternative Möglichkeit zum Überschreiben von Eigenschaften in Komponenten, die von einer Entitätsfeldkomponente ausgewählt wurden. Im Gegensatz zur typsicheren <component-name>Props hat die Eigenschaft overrideProps keinen Typ. Verwenden Sie nach Möglichkeit die typisierte komponentenspezifische Eigenschaft. Aber es kann Fälle geben, in denen die Verwendung der nicht typisierten Eigenschaft overrideProps den Code vereinfachen kann.

Wie auf der Referenzseite Zuordnung zu Jutro-Komponenten angegeben, können string-Felder entweder TextInput- oder TextArea-Komponenten zugeordnet werden, je nachdem, ob für das Feld eine maximale Länge von mehr als 255 Zeichen angegeben ist. Da beide eine label-Eigenschaft haben, können Sie mit overrideProps die gleiche Bezeichnung für beide Fälle angeben.

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

Die Eigenschaft overrideProps kann auch in Verbindung mit dem fieldsList-Array verwendet werden, um eine einfache Schleife zu erstellen, um jeder Komponente, die von den Feldkomponenten einer Entität gerendert wird, denselben Wert zuzuweisen. Beispiel: Wenn Sie jedes Feld als erforderlich markieren möchten:

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: Die Verwendung von overrideProps in Verbindung mit fieldsList kann unbeabsichtigte Folgen haben. Denn es kann Situationen geben, in denen einige Komponenten möglicherweise nicht über die angegebene Eigenschaft verfügen.