Skip to main content

Ajouter une fonctionnalité dynamique à un bouton

Archived

2 Tâches

10 mins

Visible to: All users
Débutant
Pega Platform 8.6
Expérience utilisateur
Français
This content is now archived and is no longer updated. Progress is not calculated. Pega Cloud instances are disabled, and badges are no longer awarded. Cliquez ici to continue your progress in the latest version.

Scénario

Après qu’une demande d’assistance routière est approuvée, un prestataire est envoyé à l’endroit indiqué par le client. Pour réaliser cette tâche, les conseillers clients ont besoin de pouvoir confirmer et modifier l’adresse de service au moment de la sélection du prestataire de services.

Ajoutez un bouton à la vue Select service provider pour que le conseiller client puisse confirmer l’adresse de service fournie par le client.

Vous trouverez dans le tableau suivant les identifiants dont vous avez besoin pour relever le défi.

Rôle Nom d’utilisateur Mot de passe
Développeur d’applications author@gogoroad pega123!
Note: Votre environnement de travail peut vous permettre de relever plusieurs défis à la fois. Par conséquent, la configuration présentée dans la vidéo de présentation du défi peut ne pas correspondre exactement à votre environnement de travail.  

Présentation du défi

Détail des tâches

1 Ajouter un bouton à la vue Select service provider

  1. Dans le volet de navigation d’App Studio, cliquez sur Case types > Assistance Request.
  2. Cliquez sur Save and run pour créer un nouveau dossier Assistance Request.
  3. Faites progresser le dossier jusqu’à l’étape Identify location , puis saisissez une adresse dans les champs Street, City et State.
    Note: Le champ Address est rempli automatiquement lorsque vous passez à l’étape d’identification du véhicule. 
    New Assistance Request Identify location step
  4. Faites avancer le dossier jusqu’à l’étape Select service provider, en saisissant des informations dans les champs obligatoires.
  5. Dans l’en-tête d’App Studio, cliquez sur Design pour entrer dans le mode de conception.
  6. Sous le libellé Select service provider, passez le curseur sur la carte, puis cliquez sur Edit this section pour ouvrir le volet de configuration Select service provider à droite.
  7. Dans le volet de configuration, cliquez sur l’icône Add pour sélectionner un élément de l’UI.
    select-service
  8. Dans la section Controls , passez le curseur sur Button, puis cliquez sur l’icône Add to view pour ajouter le nouvel élément de l’UI dans la partie inférieure de la zone.
    add-view
     
    Note: Faites défiler vers le bas pour voir le bouton sous le tableau des prestataires de services.
  9. Fermez le volet Add .

2 Configurer le bouton de modification de l’adresse de service

  1. Dans le volet de configuration, passez le curseur sur le libellé Button et cliquez sur l’icône Edit this "Button" pour ouvrir le volet de configuration du bouton.
  2. À l’onglet General , dans le champ Text, saisissez Modify service address.
  3. Cliquez sur Add action sets  pour définir les ensembles d’actions du bouton.
    add-action-sets
  4. Cliquez sur Create an action set.
  5. Dans la section Action set 1, cliquez sur Add an event pour sélectionner un événement pour le bouton.
  6. Dans la section Mouse events, cliquez sur Click.
    add-event
  7. Dans la section Action set 1, cliquez sur Add an action > All actions pour afficher toutes les actions disponibles. 
  8. Dans la section Launch , cliquez sur Local action.
    add-action
  9. Dans le champ Local Action, saisissez ou sélectionnez IdentifyLocation.
  10. Dans la liste Target, sélectionnez Modal Dialog.
    Action set local action Identify location modal dialogue
  11. Cliquez sur Add another action set.
  12. Dans la section Action set 2 , cliquez sur Add an event.
  13. Dans la section Mouse events , cliquez sur Hover.
    Tip: Nous vous conseillons de désactiver l’événement de souris Hover sur les appareils mobiles.
  14. Cliquez sur Add an action > All actions.
  15. Dans la section Display , cliquez sur Show smart info.
  16. Cochez la case Display header.
  17. Dans la liste déroulante Header Source, sélectionnez Plain text.
  18. Dans le champ Plain Text, saisissez Current service address.
  19. Dans le champ Section, saisissez ou sélectionnez ServiceAddress.
  20. Cliquez sur OK pour terminer de configurer l’ensemble d’actions.
  21. Dans le volet de configuration du bouton, cliquez sur Apply pour enregistrer les modifications apportées au bouton.
  22. Fermez le volet de configuration du bouton.
  23. Glissez-déposez le bouton Modify service address au-dessus de la carte de l’adresse.
  24. Cliquez sur Design pour quitter le mode de conception.

Vérifier votre travail

  1. Dans la vue Select service provider, passez votre curseur sur le bouton Modify service address.
  2. Vérifiez que les champs Street, City et State affichent les valeurs que vous avez saisies dans la vue Identify location.
    hover on Modify service address button
  3. Cliquez sur le bouton Modify service address pour modifier l'adresse actuelle.
  4. Changez l'adresse dans la boîte de dialogue modale Identify location.
    Identify location modal dialogue box
  5. Cliquez sur Submit.
  6. Vérifiez les modifications apportées à l'adresse en passant le curseur sur Modify service address. La liste des prestataires est mise à jour pour afficher la liste des prestataires proches de l'adresse actuelle.


Disponible dans les missions suivantes :

We'd prefer it if you saw us at our best.

Pega Academy has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice