Zum Hauptinhalt springen

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

Note: Die auf dieser Seite beschriebenen Optionen bieten Anpassungsalternativen, die auf die generierten Entitätsfeldkomponenten angewendet werden können. Für den Fall, dass die bereitgestellten Optionen jedoch nicht ausreichen oder der Grad der Anpassung zu komplex ist, können Sie in Betracht ziehen, eine eigene benutzerdefinierte Komponente zu erstellen, indem Sie die von den Entitäts-Hooks bereitgestellten Informationen verwenden.

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​

Wie auf der Seite Einführung in Entitätsfeldkomponenten erwähnt, hängen die übergebenen Eigenschaften der ebenfalls verwendeten Jutro-Komponente von einer Reihe von Faktoren ab, die auf der Referenzseite Zuordnung zu Jutro-Komponenten ausführlicher erläutert werden.

Entitätsfeldkomponenten verfügen über Eigenschaften, mit denen die Standard-Eigenschaftenzuordnung überschrieben oder Werte für Eigenschaften hinzugefügt werden können, die nicht automatisch ausgefüllt werden. Eine typsichere <component-name>Props-Eigenschaft, die nach der verwendeten Komponente und der overrideProps-Eigenschaft benannt ist.

Note: Wenn sowohl overrideProps und 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 typisierte Eigenschaft selectProps für ein Objekt, dessen Eigenschaften unter Komponenteneigenschaften auswählen zugeordnet werden.

Beispielsweise verfügt die Select-Komponente über eine label-Eigenschaft, die basierend auf dem Schema automatisch ausgefüllt wird, sowie über eine labelPosition-Eigenschaft, die nicht ausgefüllt wird. 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>
);

Eine vollständige Liste der möglichen Komponenten und der Objekte, die von der <component-name>Props-Eigenschaft akzeptiert werden, finden Sie auf der Seite Jutro-Komponentenzuordnung.

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 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. Obwohl nur eine der beiden Optionen zum Rendern ausgewählt wird, sind die beiden 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. Es wird empfohlen, nach Möglichkeit die typisierte komponentenspezifische Eigenschaft zu verwenden, 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 wird. Da beide eine Eigenschaft label aufweisen, 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. Wenn Sie beispielsweise 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. Der Grund dafür ist, dass es Situationen gibt, in denen einige Komponenten möglicherweise nicht über die angegebene Eigenschaft verfügen.