Créer une liste de tâches intégrée sans dialogues

Introduction

L’utilisation de formulaires intégrés permet à l’utilisateur de remplir des champs sans avoir une fenêtre de dialogue ouverte.

Dans cet exemple, une liste de tâches sera ajoutée à un nouvel onglet de la page de détail de l’Opportunity. L’option d’ajouter une tâche et de marquer une tâche comme complétée sera réalisée sans l’aide de dialogues.

Étapes à suivre

1. Configurer l’onglet Tasks et créer le champ Task

Commencez par un onglet « Tasks » vide dans la page de détail de l’Opportunity. Créez un champ « tasks » avec « new Entity » comme type et définissez-le comme collection, sous l’Aggregate Opportunity. Ensuite, ajoutez « name » (string) et « isCompleted » (Boolean) dans les champs de l’Entity.

2. Ajouter un bouton de création de tâche et un repeater

Ajoutez un « Entity Create Command » à l’Aggregate Opportunity. Choisissez « tasks » comme nom de champ conteneur. À la deuxième étape de l’assistant, ajoutez « name » comme paramètre unique et définissez-le comme champ obligatoire.

Glissez-déposez la commande nouvellement créée dans votre onglet task et affichez-la comme bouton.

Ensuite, ajoutez un repeater « tasks » juste en dessous du bouton.

Passez en Live Mode et testez le processus de création de tâche.

À ce stade, un Dialogue s’affichera.

3. Créer une commande de mise à jour pour la complétion des tâches

Ajoutez une commande de mise à jour à « tasks », avec « complete » comme nom. À la deuxième étape de l’assistant, ajoutez « isCompleted » comme paramètre unique et laissez-le comme non obligatoire.

4. Lier une case à cocher pour marquer les tâches comme complétées

Depuis la toolbox, déposez un composant « checkbox » dans le repeater, à gauche du nom de la tâche. Ensuite, depuis l’onglet Attribute, changez la valeur pour le champ « isCompleted ».

Pour lier la commande à la case à cocher, ajoutez un comportement « execute a command », « on change », modify, command name: complete.

À ce stade, un Dialogue s’affichera.

5. Désactiver les dialogues pour les mises à jour de tâches

Pour que cette commande fonctionne sans dialogue, activez l’option « don’t show action dialogue », puis sélectionnez le champ « isCompleted » et ajoutez cette ligne JavaScript comme valeur :

!data.isCompleted

Cette ligne JS choisit automatiquement la valeur opposée aux données sélectionnées.

6. Ajouter des tâches sans dialogues à l’aide d’un Command Text Input

Dans cette prochaine étape, l’objectif est d’ajouter une tâche sans utiliser de dialogue. Pour ce faire, commencez par ajouter une boîte sous le bouton et insérez un composant « command text input » à l’intérieur. À cette boîte, ajoutez un comportement « command form », de type « modify » et avec la commande « add task ».

Depuis l’onglet Attribute du « command text input », sélectionnez « name » comme champ et masquez le label.

Pour ajouter un placeholder dans la section input, ajoutez cette ligne dans la section props :

{"placeholder":"Add new task..."}

Ensuite, ajoutez une icône + après le composant « command text input ».

Avec le composant « icon » sélectionné, ajoutez un comportement « command form action » avec le type d’action défini sur « submit ».

À partir de ce moment, de nouvelles tâches peuvent être créées sans utiliser de dialogue.

L’activation de « hide when non applicable » masquera l’icône + avant que quoi que ce soit ait été saisi dans la section input.

7. Activer la fonctionnalité « Enter » du clavier pour la création de tâches

Pour permettre aux utilisateurs finaux d’ajouter une tâche en utilisant « enter » sur leur clavier, ajoutez un comportement « execute JavaScript code » au composant « command form input », avec l’événement défini sur « onEnter ». Ensuite, ajoutez cette ligne de code :

onSubmit()

8. Afficher le nombre de tâches complétées

Pour afficher le nombre de tâches complétées sur le total des tâches associées à cette opportunité, sélectionnez l’onglet task et ajoutez cette ligne JavaScript à la section title de l’onglet Attribute :

`Tasks (${data.tasks.filter({isCompleted: true}).length}/${data.tasks.length})`

Conclusion

En intégrant des formulaires et en éliminant le besoin de fenêtres de dialogue, les utilisateurs peuvent gérer efficacement les tâches directement dans la page de détail de l’opportunité. Cette approche simplifiée améliore l’expérience utilisateur en permettant une création et des mises à jour rapides des tâches, tout en offrant un aperçu clair de la progression des tâches.