Créer un dialogue personnalisé avec un formulaire intégré

Introduction

Le comportement component dialog permet à un utilisateur d’afficher un composant réutilisable avec un formulaire intégré au lieu d’un dialogue standard. Cela permet d’économiser de l’espace entre les champs et de personnaliser l’apparence du dialogue.

Étapes à suivre

1. Créer le composant réutilisable pour le dialogue

Créez le composant réutilisable (AccountAddressDialog) qui sera utilisé comme dialogue et définissez la source de données sur account :

db.Account.all.first

2. Ajouter le comportement Command Form au composant de dialogue

Pour pouvoir utiliser ce composant réutilisable comme dialogue plus tard, ajoutez un comportement Command Form à la boîte principale et liez-le à la commande appropriée. Dans cet exemple, nous utilisons celle « modify info », qui contient tous les champs d’adresse des comptes comme paramètres.

3. Intégrer des champs de saisie dans le formulaire

Glissez-déposez un « command form input » de la toolbox sous le placeholder de texte. Depuis l’onglet Attribute, sélectionnez le champ nécessaire. Répétez ce processus jusqu’à ce que tous les champs aient été ajoutés. Dans cet exemple, nous avons ajouté phone number, website, street address, city, state, country et postal code.

Utilisez horizontal wrap, item spacing et spacing pour organiser ces champs dans l’espace.

4. Ajouter les boutons Save et Cancel au formulaire

Pour permettre aux utilisateurs finaux de soumettre le formulaire, ajoutez un bouton avec « save » comme label.

Répétez l’étape 4 pour ajouter une option « cancel » et ajoutez un peu de style aux deux.

5. Implémenter JavaScript pour fermer automatiquement le dialogue

Sur le bouton « save », ajoutez un comportement « execute JavaScript code », onClick avec cette ligne de code :

onClose()

Cela fera que le dialogue se ferme automatiquement après que l’utilisateur final clique sur « save ».

Ensuite, ajoutez un comportement « command form action » avec le type d’action défini sur « submit » et « hide when non applicable ».

Répétez l’étape 6 pour le bouton « cancel », avec le type d’action défini sur « cancel » à la place.

6. Appliquer le composant réutilisable dans la page de détail

Pour appliquer notre composant réutilisable dans la page de détail des comptes, ajoutez un comportement « component dialog » à la boîte contenant nos champs d’information d’adresse. Choisissez « onClick » comme événement et sélectionnez notre composant réutilisable nouvellement créé dans le menu déroulant « component ».

Testez-le en passant en Live Mode

Conseils et notes supplémentaires

L’option « allow dismiss », une fois activée, permet aux utilisateurs finaux de simplement cliquer à l’extérieur du dialogue pour le fermer. L’option « show cancel button » a été désactivée, car dans notre exemple, le bouton cancel a été ajouté manuellement, à des fins de style.

Conclusion

La personnalisation d’un dialogue avec un formulaire intégré offre une façon flexible et économe en espace de gérer les informations de compte. En combinant des composants réutilisables avec un style et des comportements personnalisés, les utilisateurs peuvent simplifier les processus de saisie de données, ce qui donne une interface plus dynamique et conviviale.