Skip to main content

Afficher des données de listes dans des vues

4 Tâches

10 mins

Visible to: All users
Débutant Pega Platform 8.4 Expérience utilisateur Français
Verify the version tags to ensure you are consuming the intended content or, complete the latest version.

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!

Vous devez initier votre votre propre instance Pega pour compléter ce Défi.

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

Présentation du défi

Détail des tâches

1 Créer la vue Liste des fournisseurs

  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.
    Views tab of the Service provider data type
  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. Renommez la vue Providers list.
  6. Dans le volet gauche de la fenêtre, développez 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 déroulante Options, sélectionnez Read-only.
  9. Répétez l’étape 7 pour ajouter les champs Address et LatLong.
  10. À droite de la ligne vide, cliquez sur l’icône corbeille pour supprimer le champ vide.
    Providers list view
  11. Cliquez sur Submit, puis sur Save.

2 Créer une vue adaptative

  1. Dans le volet de navigation, cliquez sur App pour ouvrir l’App Explorer.
  2. Dans le champ search, 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. Développez 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. 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 Add pour ajouter un contrôle. Une boîte de dialogue apparaît.
    Add control to a section
  10. Dans la boîte de dialogue, développez Action, puis cliquez sur Button.
  11. Placez le curseur sur le contrôle Button, puis cliquez sur Edit. 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 Add.
  15. Développez Data display, puis cliquez sur Embedded section. La section Section Include Modal s’affiche.
  16. Dans la fenêtre Section Include Modal, au niveau du champ Section, saisissez ou sélectionnez ProvidersList.
    Section include modal for an embedded section
  17. Cliquez sur Submit, puis sur Save.
     

3 Utiliser la vue nouvellement créée dans votre application

  1. Créez un nouveau dossier de demande d’assistance et allez à l’étape Select service provider.
  2. Dans la barre d’outils Developer, cliquez sur Live UI, puis cliquez sur la section Service provider.
    Live UI with the Select Service Provider section selected
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.
  1. Cliquez sur Open in Dev Studio pour ouvrir la règle de section dans Dev Studio.
    Open in Dev Studio icon from Live UI
  2. Cliquez sur Structural, puis cliquez et faites glisser un Repeating dynamic layout vers la section Service provider.
  3. Cliquez sur View properties. La fenêtre Repeating dynamic layout properties s’affiche.
  4. 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
  5. Cliquez sur Submit.
  6. Dans l’App Explorer, cliquez sur Options > Refresh App Explorer.
    Refresh App Explorer
  7. Développez User Interface > Section.
  8. Depuis l’App Explorer, glissez-déposez la section ProvidersListResponsive au niveau de Repeating Dynamic Layout.
    Drag the ProvidersListResponsive section from the App Explorer
  9. Cliquez sur Save.
Note: Seule la repeating dynamic layout ou table est nécessaire pour afficher les fournisseurs. Conservez les deux pour comparaison.

4 Vérifier votre travail

  1. Revenez au dossier de demande d’assistance que vous avez créé.
  2. Cliquez sur Actions > Refresh.
  3. Vérifiez que la section mise à jour s’affiche. 
    Select service provider view with repeating dynamic layout


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