Skip to main content

Défi

Afficher des données de listes dans des vues

Scénario

L’application GoGoRoad présente une liste de fournisseurs de services disponibles dans un tableau. Le consultant IU souhaite que vous apportiez les changements suivants à l’interface utilisateur : présenter uniquement les informations pertinentes du fournisseur de services et configurer le contenu à l’écran pour prendre en compte différentes tailles d’écran. Réalisez la mise en forme de la liste des fournisseurs de manière à la présenter dans un format non tabulaire en utilisant une mise en page visant à afficher un seul élément et à intégrer la section dans une repeating dynamic layout.

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 est susceptible de prendre en charge la réalisation de plusieurs défis. Par conséquent, la configuration montrée dans la vidéo de présentation du défi peut ne pas correspondre exactement à votre environnement.

Présentation du défi

You must initiate your own Pega instance to complete this Défi.

L'initialisation peut prendre jusqu'à 5 minutes, donc soyez patient.

Détail des tâches

1 Créer la vue Providers List

  1. Dans le volet de navigation deDev Studio, cliquez sur Data types > Service provider pour ouvrir le type de données Service provider.
  2. Cliquez sur l’onglet Views.
    1.2
  3. Cliquez sur Create new view pour créer une nouvelle vue.
  4. En haut à gauche de la fenêtre New View, cliquez sur New View pour modifier le nom de la vue.
  5. Saisissez Providers list pour renommer la vue.
  6. Dans le volet gauche de la fenêtre, cliquez sur Fields.
    Expand fields in the left pane of the New View window
  7. Placez le curseur sur le champ Name, puis cliquez sur Add to view.
    Add to view icon
  8. Dans la liste Options, sélectionnez Read-only.
  9. Répétez l’étape 7 pour ajouter les champs Address et LatLong
    1.9
  10. Cliquez sur Submit pour fermer la fenêtre.
  11. En haut à droite, cliquez sur Save pour enregistrer la vue Liste des fournisseurs.

2 Créer une vue adaptative

  1. Dans le volet de navigation de Dev Studio, cliquez sur App pour ouvrir l’App Explorer.
  2. Dans le champ de recherche, saisissez ou sélectionnez GoGo-GoGoRoad-Data-ServiceProvider et appuyez sur la touche Entrée. Les règles de la classe indiquée s’affichent.
  3. Cliquez sur User Interface > Section.
    App Explorer with GoGoRoad-Data-ServiceProvider selected
  4. Faites un clic droit sur Section et cliquez sur Create. Le formulaire Create Section s’affiche.
  5. Dans le champ Label, saisissez Providers List Responsive pour nommer la section.
  6. En haut à droite, cliquez sur Create and open pour créer la section. La section Providers List Responsive s’affiche.
  7. Dans le volet à droite, cliquez sur Change pour modifier le modèle. La fenêtre Select a template s’affiche.
    Change section template button
  8. Dans la fenêtre Select a template, cliquez sur Inline wrapping.
  9. Dans le volet de droite, cliquez sur l’icône Add pour ajouter un contrôle.
    Add control to a section
  10. Dans la liste Add , cliquez sur Action > Button pour ajouter le contrôle de bouton.
  11. Dans le volet de droite, passez le curseur sur le contrôle Button, puis cliquez sur Edit this "Button". La fenêtre Cell properties s’affiche.
  12. Dans la fenêtre Cell Properties, dans le champ Text, saisissez Select provider.
    Cell properties for the Select provider button
  13. Cliquez sur Submit pour fermer la fenêtre.
  14. Dans le volet de droite, cliquez sur l’icône Add.
  15. Dans la liste Add , cliquez sur Data display > Embedded section. La boîte de dialogue Section Include Modal s’affiche.
  16. Dans la boîte de dialogue Section Include Modal, au niveau du champ Section, saisissez ou sélectionnez ProvidersList.
    Section include modal for an embedded section
  17. Cliquez sur Submit pour fermer la boîte de dialogue.
  18. En haut à droite, cliquez sur Save pour enregistrer la vue adaptative.
     

3 Ajouter la vue nouvellement créée à votre application

  1. Créez un nouveau dossier de demande d’assistance et allez à l’étape Select service provider.
    Tip: Tous les sites n’ont pas de prestataires de services à proximité. À l’étape Identify location, dans le champ State, saisissez MA pour afficher la liste des prestataires de services situés dans l’État du Massachusetts aux États-Unis.
  2. Dans la barre d’outils Developer, cliquez sur Live UI.
  3. Dans le dossier Assistance Request, cliquez sur la section Service provider
    image which shows the Select service provider
    Tip: Vous pouvez ouvrir les règles de section UI en utilisant l’outil Live UI ou depuis l’Appli ou le Data Explorer. Live UI est le meilleur outil pour les sections utilisées de manière active dans le type de dossier.
  4. Dans le volet de droite, à droite de SelectServiceProvider, cliquez sur Open in Dev Studio pour ouvrir la règle de section dans Dev Studio.
    Open in Dev Studio icon from Live UI
  5. Dans la règle de section, cliquez sur Structural, puis cliquez sur une Repeating dynamic layout et faites-la glisser vers la section Service provider.
  6. Dans l’en-tête Repeating dynamic layout, cliquez sur View properties. La fenêtre Repeating dynamic layout properties s’affiche.
  7. Dans la fenêtre Repeating dynamic layout properties, au niveau du champ List/Group, saisissez ou sélectionnez .ServiceProvider.
    Repeating dynamic layout properties window with source specified as Service provider
  8. Cliquez sur Submit pour fermer la fenêtre.
  9. Dans l’App Explorer, cliquez sur Options > Refresh App Explorer.
    Refresh App Explorer
  10. Cliquez sur User Interface > Section.
  11. Depuis l’App Explorer, glissez-déposez la section ProvidersListResponsive au niveau de Repeating Dynamic Layout. 
    Drag the ProvidersListResponsive section from the App Explorer
  12. En haut à droite, cliquez sur Save pour enregistrer les modifications apportées à la section.
Note: Seule la repeating dynamic layout ou table est nécessaire pour afficher les fournisseurs. Conservez les deux pour comparaison.

Vérifier votre travail

  1. Revenez au dossier Assistance Request que vous avez créé.
  2. Dans le coin supérieur droit, cliquez sur Actions > Refresh.
  3. Dans la section To do, cliquez sur Go pour revenir à la vue Select service provider.
  4. Vérifiez que la section mise à jour s’affiche. 
    confirm your work screen


Disponible dans les missions suivantes :

If you are having problems with your training, please review the Pega Academy Support FAQs.

Did you find this content helpful?

Want to help us improve this content?

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