Mappage des composants Jutro

Ce document couvre la logique utilisée par les extensions d'interface utilisateur du SDK Digital lors de l'identification du composant Jutro à mapper à un champ lors de la génération d'un composant de champ d'entité associé.

Table de référence de mappage de composants

Cette table indique le composant Jutro qui sera choisi dans chaque scénario. Les valeurs de la dernière colonne sont liées à la section de ce document qui détaille le mappage des propriétés pour le composant spécifié.

Type de propriété simple	Cas particulier	→	Composant choisi
Tous	A une série x-gw-choices	→	Sélectionner
S/O	Références un MonetaryAmount	→	CurrencyInput
Booléen	Tous	→	ToggleButtonGroup
Nombre	Tous	→	NumberInput (cas 1)
Chaîne	Le format du schéma est gw-bigdecimal	→	NumberInput (cas 2)
Chaîne	Le format du schéma est date	→	DatePicker
Chaîne	Le format du schéma est date-time	→	DatePicker et TimePicker
Chaîne	Le schéma de champ a une propriété maxLength supérieure à 255 caractères	→	TextArea
Chaîne	Le schéma de champ a une propriété maxLength inférieure à 255 caractères	→	TextInput

Mappage de propriété par défaut

Ces mappages sont utilisés dans n'importe quel composant Jutro, sauf mention contraire.

Raccourcis de propriété HTML

Comme indiqué dans la documentation sur les crochets d'entité, il existe pour chaque champ des raccourcis qui mappent les valeurs de schéma à un attribut standard équivalent pour les entrées HTML. Ces raccourcis sont mappés vers les propriétés de composant Jutro suivantes.

Raccourci	Propriété du composant Jutro
étiquette	étiquette
désactivé	désactivé
lecture seule	lecture seule
requis	requis

Messages d'erreur

Comme indiqué dans la documentation sur les crochets d'entité, la propriété de champ errors affiche les erreurs liées à un champ spécifique. Une série de toutes les chaînes de message renvoyées par cette propriété sera utilisée comme valeur pour la propriété stateMessages du composant Jutro associé.

Fonctions onChange

La propriété onChange par défaut des composants Jutro sera définie comme (e, newValue) => setState(newValue). Cette fonction utilise le raccourci de champ setState pour mettre à jour la valeur d'un champ spécifique de l'état.

Sélectionner un composant

S'il existe une série x-gw-choices pour une propriété, elle sera affichée avec un composant Select, quel que soit son type.

À l'aide des propriétés selectProps ou overrideProps, vous pouvez transmettre n'importe quelle propriété Select. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant Select.

Reportez-vous à la section relative au mappage des propriétés par défaut pour comprendre comment les valeurs de propriété sont attribuées.

Autres aspects à prendre en considération :

• La propriété placeholder sera définie comme { defaultMessage: 'Select an option', id: 'jutro.select.placeholder'}.
• L'option showPlaceholderAsOption sera définie sur true.
• La propriété onChange sera une fonction qui attribue la propriété id de la valeur du composant à la propriété code de l'état : (e, newValue) => setState(newValue ? { code: newValue.id } : undefined).
• Chaque élément d'une série x-gw-choices est une valeur de choix. Ces éléments sont utilisés pour définir des propriétés pour les composants enfants SelectOption à l'aide du mappage suivant :

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

Note: En outre, une propriété peut également avoir une série x-gw-forbidden qui désigne les options interdites de la série x-gw-choices. Aucun composant SelectOption ne sera créé pour les options interdites.

Composant CurrencyInput

Si le schéma du champ fait référence à un MonetaryAmount, il est affiché à l'aide d'un élément CurrencyInput.

À l'aide des propriétés currencyInputProps ou overrideProps, vous pouvez transmettre n'importe quelle propriété CurrencyInput. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant CurrencyInput.

Reportez-vous à la section relative au mappage des propriétés par défaut pour comprendre comment les valeurs de propriété sont attribuées.

Autres aspects à prendre en considération :

• La propriété availableCurrencies du composant sera toujours la série d'élément unique ['USD'].
• Une conversion de type est requise entre le type de schéma du SDK Digital (string) et le type de composant Jutro (number) :
  • valeur : { amount: state?.amount ? Number(state.amount) : undefined, currency: 'USD' }
  • onChange : (e, newValue) => setState(newValue?.amount ? { amount: String(newValue.amount), currency: 'USD' } : undefined)

Composant ToggleButtonGroup

Si le champ est un type boolean, il est défini à l'aide d'un ToggleButtonGroup. Il comportera deux composants enfants ToggleButton, le bouton intitulé « Oui » correspondant à la valeur true de l'état, et le bouton intitulé « Non » correspondant à la valeur false de l'état.

À l'aide des propriétés toggleButtonProps ou overrideProps, vous pouvez transmettre n'importe quelle propriété ToggleButton. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant ToggleButton.

Autres aspects à prendre en considération :

• Une conversion de type est requise entre le type de schéma du SDK Digital (boolean) et le type de composant Jutro (string) :
  • valeur : state === true ? "yes" : state === false ? "no" : undefined
  • onChange : (e, newValue) => setState(newValue === "yes" ? true : false)

NumberInput (cas 1)

Si le type de SDK généré est un number, il sera rendu à l'aide d'un élément NumberInput.

À l'aide des propriétés numberInputProps ou overrideProps, vous pouvez transmettre n'importe quelle propriété NumberInput. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant NumberInput.

Reportez-vous à la section relative au mappage des propriétés par défaut pour comprendre comment les valeurs de propriété sont attribuées.

NumberInput (cas 2)

Si le type de SDK généré est un string mais que son format est gw-bigdecimal, il sera affiché à l'aide d'un élément NumberInput.

À l'aide des propriétés numberInputProps ou overrideProps, vous pouvez transmettre n'importe quelle propriété NumberInput. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant NumberInput.

Reportez-vous à la section relative au mappage des propriétés par défaut pour comprendre comment les valeurs de propriété sont attribuées.

Autres aspects à prendre en considération :

• Une conversion de type est requise entre le type de schéma du SDK Digital (string) et le type de composant Jutro (number) :
  • valeur : state ? Number(state) : undefined
  • onChange : (e, newValue) => setState(newValue?.toString())

DatePicker

Si le type de SDK généré est un string mais que son format est date, il sera affiché à l'aide d'un composant DatePicker.

À l'aide des propriétés datePickerProps ou overrideProps, vous pouvez transmettre n'importe quelle propriété DatePicker. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant DatePicker.

Reportez-vous à la section relative au mappage des propriétés par défaut pour comprendre comment les valeurs de propriété sont attribuées.

Autres aspects à prendre en considération :

Une conversion de type est requise entre le type de schéma du SDK Digital (string) et le type de composant Jutro (JutroDate). Un crochet personnalisé est utilisé pour convertir la chaîne de la valeur d'état de l'entité en objet JutroDate. La fonction onChange utilise également une fonction personnalisée pour convertir un objet JutroDate en une chaîne de date avant de mettre à jour l'état.

DatePicker et TimePicker

Si le type de SDK généré est un string mais que son format est date-time, il sera affiché à l'aide de deux composants : un DatePicker et un TimePicker.

À l'aide de la propriété datePickerProps, vous pouvez transmettre n'importe quelle propriété DatePicker. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant DatePicker. À l'aide de la propriété timePickerProps, vous pouvez transmettre n'importe quelle propriété TimePicker. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant TimePicker.

L'utilisation datePickerProps de ou timePickerProps ne modifiera que les propriétés des composants DatePicker et TimePicker respectivement. Le overrideProps peut transmettre des propriétés qui apparaissent dans l'un ou l'autre des composants DatePicker et TimePicker, mais il mettra à jour la propriété dans les deux. Par exemple, overrideProps: {label: "Custom label"} attribue le même texte d'étiquette aux deux composants.

Reportez-vous à la section relative au mappage des propriétés par défaut pour comprendre comment les valeurs de propriété sont attribuées.

Autres aspects à prendre en considération :

Une conversion de type est requise entre le type de schéma du SDK Digital (string) et le type de composant Jutro (JutroDate et JutroTime). Un crochet personnalisé divise la chaîne de l'état en états de date et d'heure distincts, lesquels sont appliqués au composant de date ou d'heure approprié. Ce crochet personnalisé définit également une fonction personnalisée onChange qui s'exécute lorsque l'un des composants est modifié, et génère une nouvelle chaîne de date et d'heure en utilisant la valeur actuelle des deux composants.

Composant de texte

Si le type de SDK généré est un string et qu'il n'a pas les formats mentionnés dans les sections précédentes, il s'affichera dans un composant TextInput ou TextArea. Le choix du composant dépend de si oui ou non la propriété maxLength est supérieure à 255 caractères.

À l'aide de la propriété textInputProps, vous pouvez transmettre n'importe quelle propriété TextInput. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant TextInput. À l'aide de la propriété textAreaProps, vous pouvez transmettre n'importe quelle propriété TextArea. Pour en savoir plus, reportez-vous à la documentation sur les propriétés du composant TextArea.

L'utilisation textInputProps de ou textAreaProps ne modifiera que les propriétés des composants TextInput et TextArea respectivement. Le code d'affichage des composants TextInput ou TextArea sera présent quelle que soit la valeur de maxLength, mais un seul des deux composants sera affiché. Par conséquent, si une propriété <componenent-name>Prop incorrecte est utilisée pour remplacer les propriétés par défaut, les modifications peuvent ne pas être visibles. Le overrideProps peut transmettre des propriétés qui apparaissent dans l'un ou l'autre des composants TextInput ou TextArea, mais il mettra à jour la propriété dans les deux. Par exemple, overrideProps: {label: "Custom label"} attribue le même texte d'étiquette aux deux composants.