Zuordnung der Jutro-Komponenten

Dieses Dokument behandelt die Logik, die von den Digital SDK UI Extensions verwendet wird, wenn ermittelt wird, welche Jutro-Komponente beim Generieren einer zugehörigen Entitätsfeldkomponente einem Feld zugeordnet werden soll.

Referenztabelle für die Komponentenzuordnung

Diese Tabelle gibt an, welche Jutro-Komponente in jedem Szenario ausgewählt wird. Die Werte in der letzten Spalte sind mit dem Abschnitt dieses Dokuments verknüpft, in dem die Eigenschaftszuordnung für die angegebene Komponente angegeben ist.

Einfacher Eigenschaftstyp	Sonderfall	→	Ausgewählte Komponente
Beliebig	Hat ein x-gw-choices-Array	→	Select
Nicht zutreffend	Referenziert einen MonetaryAmount	→	CurrencyInput
Boolean	Beliebig	→	ToggleButtonGroup
Number	Beliebig	→	NumberInput (Fall 1)
String	Das Schemaformat ist gw-bigdecimal	→	NumberInput (Fall 2)
String	Das Schemaformat ist date	→	DatePicker
String	Das Schemaformat ist date-time	→	DatePicker und TimePicker
String	Das Feldschema hat eine maxLength-Eigenschaft mit mehr als 255 Zeichen	→	TextArea
String	Das Feldschema hat eine maxLength-Eigenschaft mit weniger als 255 Zeichen	→	TextInput

Standardmäßige Eigenschaftszuordnung

Diese Zuordnungen werden, sofern nicht anders angegeben, in allen Jutro-Komponenten verwendet.

Shortcuts zu HTML-Eigenschaften

Wie in der Dokumentation zu Entitäts-Hooks erwähnt, gibt es für jedes Feld Shortcuts, über die Schemawerte dem entsprechenden Standardattribut für HTML-Eingaben zugeordnet werden. Diese Shortcuts sind den folgenden Eigenschaften der Jutro-Komponenten zugeordnet.

Shortcut	Eigenschaft der Jutro-Komponente
label	label
disabled	disabled
readOnly	readOnly
required	required

Fehlermeldungen

Wie in der Dokumentation zu Entitäts-Hooks erwähnt, zeigt die errors-Feldeigenschaft Fehler an, die sich auf ein bestimmtes Feld beziehen. Ein Array aller Meldungszeichenfolgen, die von dieser Eigenschaft zurückgegeben werden, wird als Wert für die stateMessages-Eigenschaft der zugehörigen Jutro-Komponente verwendet.

onChange-Funktionen

Die Standardeigenschaft onChange für Jutro-Komponenten wird als (e, newValue) => setState(newValue) definiert. Diese Funktion verwendet den Shortcut setState, um den Wert eines bestimmten Feldes des Status zu aktualisieren.

Select-Komponente

Wenn für eine Eigenschaft ein x-gw-choices-Array vorhanden ist, wird es unabhängig vom Typ mit einer Select-Komponente gerendert.

Mit der Eigenschaft selectProps oder overrideProps können Sie eine beliebige Select-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der Select-Komponenteneigenschaften.

Lesen Sie den Abschnitt Standardmäßige Eigenschaftszuordnung, um zu verstehen, wie die Eigenschaftswerte zugewiesen werden.

Weitere Erwägungen:

• Die placeholder-Eigenschaft wird als { defaultMessage: 'Select an option', id: 'jutro.select.placeholder'} definiert.
• Die Option showPlaceholderAsOption wird auf true gesetzt.
• Die onChange-Eigenschaft ist eine Funktion, die die id-Eigenschaft des Komponentenwerts der code-Eigenschaft des Zustands:(e, newValue) => setState(newValue ? { code: newValue.id } : undefined) zuweist.
• Jedes Element eines x-gw-choices-Arrays ist ein Auswahlwert. Diese Elemente werden verwendet, um Eigenschaften für untergeordnete SelectOption-Komponenten mithilfe der folgenden Zuordnung zu definieren:

{choices.map(({ code, name, description }) => (
                <SelectOption key={`option_${code}`} value={{id: code, label: name ?? description ?? code}} />
            ))}

Note: Zusätzlich kann eine Eigenschaft auch ein x-gw-forbidden-Array haben, das verbotene Optionen aus dem x-gw-choices-Array angibt. Für die verbotenen Optionen werden keine SelectOption-Komponenten erstellt.

CurrencyInput-Komponente

Wenn das Schema des Feldes auf einen MonetaryAmount verweist, wird es mit einem CurrencyInput gerendert.

Mit der Eigenschaft currencyInputProps oder overrideProps können Sie eine beliebige CurrencyInput-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der CurrencyInput-Komponenteneigenschaften.

Lesen Sie den Abschnitt Standardmäßige Eigenschaftszuordnung, um zu verstehen, wie die Eigenschaftswerte zugewiesen werden.

Weitere Erwägungen:

• Die availableCurrencies-Eigenschaft der Komponente ist immer das einzelne Element-Array ['USD'].
• Es ist eine Typumwandlung zwischen dem Digital SDK-Schematyp (string) und dem Jutro-Komponententyp (number) erforderlich:
  • Wert: { amount: state?.amount ? Number(state.amount) : undefined, currency: 'USD' }
  • onChange: (e, newValue) => setState(newValue?.amount ? { amount: String(newValue.amount), currency: 'USD' } : undefined)

Komponente ToggleButtonGroup

Wenn das Feld ein boolean-Typ ist, wird es mit einer ToggleButtonGroup definiert. Es verfügt über zwei untergeordnete ToggleButton-Komponenten, wobei die Schaltfläche mit der Bezeichnung „Ja“ dem Wert true im Zustand und die Schaltfläche mit der Bezeichnung „Nein“ dem Wert false im Zustand entspricht.

Mit der Eigenschaft toggleButtonProps oder overrideProps können Sie eine beliebige ToggleButton-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der ToggleButton-Komponenteneigenschaften.

Weitere Erwägungen:

• Es ist eine Typumwandlung zwischen dem Digital SDK-Schematyp (boolean) und dem Jutro-Komponententyp (string) erforderlich:
  • Wert: state === true ? "yes" : state === false ? "no" : undefined
  • onChange: (e, newValue) => setState(newValue === "yes" ? true : false)

NumberInput (Fall 1)

Wenn für das Feld der generierte SDK-Typ ein number ist, wird es mit einem NumberInput gerendert.

Mit der Eigenschaft numberInputProps oder overrideProps können Sie eine beliebige NumberInput-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der NumberInput-Komponenteneigenschaften.

Lesen Sie den Abschnitt Standardmäßige Eigenschaftszuordnung, um zu verstehen, wie die Eigenschaftswerte zugewiesen werden.

NumberInput (Fall 2)

Wenn für das Feld der generierte SDK-Typ ein string ist, sein Format aber gw-bigdecimal, wird es mit einem NumberInput gerendert.

Mit der Eigenschaft numberInputProps oder overrideProps können Sie eine beliebige NumberInput-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der NumberInput-Komponenteneigenschaften.

Lesen Sie den Abschnitt Standardmäßige Eigenschaftszuordnung, um zu verstehen, wie die Eigenschaftswerte zugewiesen werden.

Weitere Erwägungen:

• Es ist eine Typumwandlung zwischen dem Digital SDK-Schematyp (string) und dem Jutro-Komponententyp (number) erforderlich:
  • Wert: state ? Number(state) : undefined
  • onChange: (e, newValue) => setState(newValue?.toString())

DatePicker

Wenn für das Feld der generierte SDK-Typ ein string ist, sein Format jedoch date, wird es mit einer DatePicker-Komponente gerendert.

Mit der Eigenschaft datePickerProps oder overrideProps können Sie eine beliebige DatePicker-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der DatePicker-Komponenteneigenschaften.

Lesen Sie den Abschnitt Standardmäßige Eigenschaftszuordnung, um zu verstehen, wie die Eigenschaftswerte zugewiesen werden.

Weitere Erwägungen:

Es ist eine Typumwandlung zwischen dem Digital SDK-Schematyp (string) und dem Jutro-Komponententyp (JutroDate) erforderlich. Ein benutzerdefinierter Hook wird verwendet, um die Zeichenfolge im Entitätszustandswert in ein JutroDate-Objekt umzuwandeln. Die onChange-Funktion verwendet auch eine benutzerdefinierte Funktion, um ein JutroDate-Objekt vor der Aktualisierung des Zustands in eine Datumszeichenfolge umzuwandeln.

DatePicker und TimePicker

Wenn für das Feld der generierte SDK-Typ ein string ist, sein Format jedoch date-time, wird es mit zwei Komponenten gerendert: einem DatePicker und einem TimePicker.

Mit der Eigenschaft datePickerProps können Sie eine beliebige DatePicker-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der DatePicker-Komponenteneigenschaften. Mit der Eigenschaft timePickerProps können Sie eine beliebige TimePicker-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der TimePicker-Komponenteneigenschaften.

Mit datePickerProps oder timePickerProps werden nur die Eigenschaften in der Komponente DatePicker bzw. TimePicker geändert. Mit overrideProps können Eigenschaften übergeben werden, die in einer der Komponenten DatePicker und TimePicker angezeigt werden, die Eigenschaft wird jedoch in beiden Komponenten aktualisiert. Beispielsweise wird durch overrideProps: {label: "Custom label"} beiden Komponenten der gleiche Beschriftungstext zugewiesen.

Lesen Sie den Abschnitt Standardmäßige Eigenschaftszuordnung, um zu verstehen, wie die Eigenschaftswerte zugewiesen werden.

Weitere Erwägungen:

Es ist eine Typumwandlung zwischen dem Digital SDK-Schematyp (string) und dem Jutro-Komponententyp (JutroDate und JutroTime) erforderlich. Ein benutzerdefinierter Hook teilt die Zeichenfolge im Status in separate Datums- und Uhrzeitstatus auf, die auf die entsprechende Datums- oder Uhrzeitkomponente angewendet werden. Dieser benutzerdefinierte Hook definiert auch eine benutzerdefinierte onChange-Funktion, die ausgeführt wird, wenn eine der Komponenten geändert wird, und eine neue Datum/Uhrzeit-Zeichenfolge mit dem aktuellen Wert beider Komponenten generiert.

Text-Komponente

Wenn für das Feld der generierte SDK-Typ ein string ist und nicht die in den vorangegangenen Abschnitten erwähnten Formate aufweist, wird es entweder in einer TextInput- oder TextArea-Komponente gerendert. Die Wahl der Komponente hängt davon ab, ob die maxLength-Eigenschaft mehr als 255 Zeichen aufweist.

Mit der Eigenschaft textInputProps können Sie eine beliebige TextInput-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der TextInput-Komponenteneigenschaften. Mit der Eigenschaft textAreaProps können Sie eine beliebige TextArea-Eigenschaft übergeben. Weitere Informationen finden Sie in der Dokumentation der TextArea-Komponenteneigenschaften.

Mit textInputProps oder textAreaProps werden nur die Eigenschaften in der Komponente TextInput bzw. TextArea geändert. Der Code zum Rendern von TextInput- und TextArea-Komponenten ist unabhängig vom Wert von maxLength vorhanden. Es wird jedoch nur eine der beiden Komponenten gerendert. Wenn also die falsche <componenent-name>Prop-Eigenschaft zum Überschreiben der Standardeigenschaften verwendet wird, sind die Änderungen möglicherweise nicht sichtbar. Mit overrideProps können Eigenschaften übergeben werden, die in einer der Komponenten TextInput oder TextArea angezeigt werden, die Eigenschaft wird jedoch in beiden Komponenten aktualisiert. Beispielsweise wird durch overrideProps: {label: "Custom label"} beiden Komponenten der gleiche Beschriftungstext zugewiesen.