Ouvrir une boîte de dialogue de composant dynamique

Aperçu

L'interaction « Ouvrir la boîte de dialogue du composant dynamique » permet aux utilisateurs de lancer un autre composant dynamique directement depuis l'intérieur d'un composant dynamique. Cela vous permet de créer des composants modulaires et réutilisables, de rationaliser les interactions utilisateur et de construire facilement des applications complexes.

Tutoriels

• Transfert de données entre composants dynamiques : Apprenez à connecter vos composants dynamiques et à leur transmettre des données.

• Actualisation automatique après la fermeture de la boîte de dialogue : Cette fonctionnalité actualise automatiquement les données dans le composant d'origine après la fermeture de la boîte de dialogue, garantissant que les utilisateurs voient les informations les plus récentes.

Spécification

L'interaction « Ouvrir la boîte de dialogue du composant dynamique » lance un autre composant dynamique dans une boîte de dialogue modale. Voici une ventilation des attributs configurables :

Lancement du composant dynamique

• Nom API du composant dynamique : Sélectionnez le composant dynamique que vous souhaitez lancer.

Transmission de données au composant lancé (propriétés d'entrée)

• Propriété d'entrée / Nom : Le nom API de la propriété que vous souhaitez définir dans le composant dynamique lancé.

Considération importante

Avant de pouvoir sélectionner un nom ici, vous doivent effectuez d'abord ces étapes dans le composant dynamique que vous avez l'intention de lancer dans la boîte de dialogue:

1. Créez une Ressource Variable pour chaque donnée que vous souhaitez recevoir (par exemple, une variable Texte pour recevoir un ID d'enregistrement).

2. Pour chaque Ressource Variable, assurez-vous que la "Disponible pour l'entrée" case à cocher est cochée dans sa configuration.

Seules les variables marquées comme « Disponible en entrée » dans le composant de dialogue cible apparaîtront dans la liste déroulante « Propriété d'entrée / Nom ». Ce réglage permet au composant de dialogue de recevoir des données de cette interaction.

• Propriété d'entrée / Valeur : La valeur que vous souhaitez transmettre à la propriété d'entrée.

• Propriété d'entrée / Type : Choisissez le type de données que vous transmettez (Texte, Nombre, Booléen, Date, Date/Heure, Personnalisé, etc.).

• Autoriser plusieurs valeurs (collection) : Activez ceci pour transmettre une collection de valeurs.

Configuration de la boîte de dialogue

• En-tête du modal : Saisissez un titre pour la boîte de dialogue.

• Marge intérieure de la modale : Ajustez la marge intérieure de la boîte de dialogue modale pour contrôler l'espacement entre le contenu et la bordure de la boîte de dialogue.

• Taille de la modale : Choisissez la taille de la boîte de dialogue (Petite, Moyenne, Grande).

Gestion des résultats de la boîte de dialogue

• À la fermeture : Définissez une interaction lorsque l'utilisateur ferme la boîte de dialogue.

Conseil pratique

Actualiser le composant d'origine à la fermeture : Sélectionnez l'option « Actualiser toutes les requêtes » si vous souhaitez que les sources de données du composant dynamique d'origine (celui qui a lancé cette boîte de dialogue) s'actualisent automatiquement immédiatement après la fermeture de cette boîte de dialogue.

• But : Cela garantit que toute modification de données effectuée ou initiée dans la boîte de dialogue (comme la création d'un nouvel enregistrement, la mise à jour d'un enregistrement existant affiché dans le composant d'origine, ou la suppression d'un enregistrement) soit immédiatement visible dans l'affichage du composant d'origine sans que l'utilisateur ait à effectuer une actualisation manuelle. Cela maintient les données synchronisées et fournit un retour instantané.

• Exemple : Imaginez que vous utilisez cette boîte de dialogue pour créer un nouvel enregistrement Contact. Si vous activez « Actualiser le composant d'origine à la fermeture », lorsque l'utilisateur termine la création du Contact et que la boîte de dialogue se ferme, la liste ou le tableau de données dans le composant d'origine se mettra automatiquement à jour pour inclure le Contact nouvellement créé. Le nouveau Contact n'apparaîtrait pas sans cette option activée, jusqu'à ce que l'utilisateur actualise manuellement le composant d'origine ou la page.

Guide étape par étape

1. Créer le composant de dialogue : Créez le composant dynamique que vous souhaitez lancer dans la boîte de dialogue. Ce composant effectuera une tâche spécifique ou affichera des informations particulières.

2. Configurer l'interaction « Ouvrir la boîte de dialogue du composant dynamique » : Trouvez l'interaction « Ouvrir la boîte de dialogue du composant dynamique » dans votre composant dynamique d'origine.

3. Configurer les propriétés d'entrée : Localisez la section « Propriétés d'entrée » dans les propriétés de l'interaction. Ajoutez les propriétés d'entrée et saisissez leurs noms API. Ceux-ci doivent correspondre aux noms API des propriétés que vous avez créées dans le composant de dialogue. Fournissez les valeurs que vous souhaitez transmettre.

4. Configurer les paramètres de la boîte de dialogue : Personnalisez l'en-tête de la modale, la description d'accessibilité et la taille de la boîte de dialogue.

5. Définir les interactions de résultat : Spécifiez les actions que vous souhaitez exécuter lorsque la boîte de dialogue se termine, est fermée ou rencontre une erreur.

Exemple

Imaginez que vous avez un composant dynamique qui affiche une liste de produits. Lorsque l'utilisateur clique sur un produit spécifique dans la liste, vous pouvez utiliser l'interaction « Ouvrir la boîte de dialogue du composant dynamique » pour lancer un composant dynamique séparé qui affiche des informations détaillées sur ce produit. Vous pourriez transmettre l'ID du produit comme propriété d'entrée au composant de détails. Vous pourriez actualiser le composant de liste de produits lorsque l'utilisateur ferme la boîte de dialogue de détails.

En utilisant l'interaction « Ouvrir la boîte de dialogue du composant dynamique », vous pouvez créer des composants modulaires et réutilisables qui améliorent l'expérience utilisateur et simplifient le développement.