Ajout d'une table à la page d'objet

Dans cet exercice, vous allez ajouter un tableau affichant les réservations d'un voyage. Elle sera affichée dans une section distincte sous la section Informations générales de la page d'objet.

Cet exercice contient une simulation qui vous guide tout au long des étapes détaillées. Vous trouverez toutes les étapes après la simulation. Vous pouvez suivre la simulation et exécuter les étapes à l'aide de votre propre compte d'essai.

1. Ouvrez SAP Business Application Studio.

2. Cliquez avec le bouton droit de la souris sur webapp de votre projet voyages.

3. Sélectionnez l'option Afficher la carte de page dans le menu suivant.

4. Saisissez Réservations comme section dans la page d'objet.

   1. Sélectionnez l'icône de modification dans la page d'objet pour ouvrir l' éditeur de page.

   2. Sélectionnez l'icône Ajouter dans Sections.

   3. Sélectionnez Ajouter Section de table dans la liste déroulante.

   4. Ajoutez Réservations comme étiquette dans la boîte de dialogue Ajouter section de tableau suivante.

   5. Sélectionnez l'icône globale dans la zone Étiquette.

   6. Sélectionnez Appliquer dans la fenêtre pop-up suivante.

   7. Sélectionnez la liste déroulante pour la zone Source de valeur.

   8. Sélectionnez l'option _Booking.

   9. Sélectionnez Ajouter dans la boîte de dialogue Ajouter une section de tableau. Vous pouvez désormais voir les Réservations ajoutées en tant que section après Informations générales dans L'éditeur de page.

5. Sélectionnez les zones que vous voulez afficher comme colonnes de table dans la section Réservations.

   1. Développez la section Réservations dans le Page Editor.

   2. Développez Table dans la section Réservations.

   3. Sélectionnez Colonnes.

   4. Sélectionnez l'icône Ajouter dans la ligne Colonnes mise en surbrillance.

   5. Sélectionnez Ajouter des colonnes de base dans la liste.

   6. Sélectionnez les colonnes suivantes qui peuvent être affichées dans la section Réservations :

      • BOOKINGID
      • BookingDate
      • ID expéditeur
      • ID de connexion
      • CUSTOMERID
      • FlightDate
      • FlightPrice

   7. Sélectionnez Ajouter dans la boîte de dialogue. Vous pouvez voir que toutes les colonnes sélectionnées sont désormais ajoutées dans Réservations.

6. Recherchez les annotations générées pour la section Réservations et la table que vous avez configurée dans les étapes précédentes.

   1. Sélectionnez la section Réservations dans le Page Editor.

   2. Cliquez sur l'icône Modifier dans le code source pour ouvrir le fichier annotation.xml pour la section Réservations. Vous pouvez voir qu'un nouvel enregistrement de l'annotation @UI.Facets a été ajouté pour afficher une nouvelle section.

   3. L'annotation est de type UI.ReferenceFacet. Le label référence l'entrée générée dans le fichier i18n . Le target fait référence à @UI.LineItem, le qualifier comme i18nbookings annotant l'entité Booking .

   4. Appuyez sur CTRL+ CLIC GAUCHE sur le UI.LineItem pour accéder à la définition UI.LineItem .

   5. Passez à l'aperçu de l'application dans votre navigateur. Vous pouvez voir la section Réservations sous la section Informations générales. La section Réservations contient la table avec les colonnes que vous avez configurées.

7. Affichez le nom de famille du client avec l' ID client.

   1. Passez à SAP Business Application Studio.

   2. Sélectionnez la colonne ID client dans le Page Editor.

   3. Sélectionnez la liste déroulante pour le Texte dans le volet latéral de droite.

   4. Sélectionnez l'option _Customer/LastName dans la liste. Vous avez mis à jour la colonne ID client pour afficher le nom de famille du client.

8. Remplacez l'étiquette de la colonne ID client par Client.

   1. Saisissez Client dans la zone Étiquette du volet de droite pour la colonne ID client.

   2. Sélectionnez l'icône globale dans la zone Étiquette.

   3. Sélectionnez Appliquer dans la fenêtre pop-up suivante. Vous avez modifié le descripteur de colonne de ID client en Client.

9. Remplacez l'étiquette de la colonne Airline ID (ID de compagnie aérienne) par Airline (compagnie aérienne).

   1. Sélectionnez la colonne ID compagnie aérienne dans Page Editor.

   2. Saisissez Compagnie aérienne dans la zone Étiquette dans le volet de droite de la colonne sélectionnée.

   3. Sélectionnez l'icône globale dans la zone Étiquette.

   4. Sélectionnez Appliquer dans la fenêtre pop-up suivante. L'étiquette de la colonne a été remplacée par Compagnie aérienne.

10. Afficher le nom de la compagnie aérienne en plus de l'abréviation de la compagnie aérienne

    1. Sélectionnez la liste déroulante dans la zone Texte dans le volet latéral de droite.

    2. Sélectionnez _Carrier/Nom dans la liste.

    3. Sélectionnez l'icône Traiter dans le code source pour la zone Texte afin d'ouvrir le fichier annotation.xml. Vous pouvez voir qu'une annotation Common.Text correspondante a été ajoutée pour CarrierID au fichier d'annotation local.

11. Passez à l'aperçu de l'application dans votre navigateur. Vous pouvez voir que le nom de la compagnie aérienne est désormais affiché en plus de l'abréviation. Le nom de la colonne a été modifié en Compagnie aérienne. De plus, avec l' ID client, le nom du client est également affiché. Le titre de la colonne a été mis à jour sur Client.

12. Supprimez l' ID client de la colonne Client.

    1. Passez à SAP Business Application Studio.

    2. Sélectionnez la colonne Client.

    3. Sélectionnez la liste déroulante de la zone Disposition du texte dans le volet latéral de droite.

    4. Sélectionnez l'option Texte uniquement dans la liste.

    5. Cliquez sur l'icône Traiter dans le code source. Vous pouvez voir que l'annotation UI.TextArrangement avec TextOnly a été ajoutée à Customer ID. Cela signifie que seul le nom du client est affiché et que l'ID reste masqué.

    6. Passez à l'aperçu de l'application de votre navigateur. Vous pouvez voir que l'ID client est désormais masqué.

13. Ajoutez une image du logo de la compagnie aérienne dans une nouvelle colonne au début de la table des réservations.

    1. Passez à SAP Business Application Studio.

    2. Sélectionnez Colonnes dans l' Éditeur de page.

    3. Sélectionnez l'icône Ajouter dans la ligne en surbrillance.

    4. Sélectionnez Ajouter des colonnes de base dans la liste.

    5. Sélectionnez la liste déroulante dans la zone Colonnes de la boîte de dialogue Ajouter colonne de base.

    6. Sélectionnez AirlinePicURL dans la liste.

    7. Sélectionnez Ajouter dans la boîte de dialogue Ajouter une colonne de base. Vous pouvez voir qu'une nouvelle zone Logo de compagnie aérienne a été ajoutée à la liste Colonnes.

    8. Sélectionnez l'icône Déplacer vers le haut pour la ligne Logo de la compagnie aérienne afin de déplacer la colonne vers le haut dans la liste des colonnes.

    9. Continuez à déplacer la colonne vers le haut de la liste jusqu'à ce que Airline Logo se trouve en haut de la liste Columns.

    10. Sélectionnez l'icône Traiter dans le code source pour le logo de la compagnie aérienne. Vous pouvez voir que l'enregistrement du logo de compagnie aérienne a été ajouté à UI.LineItem.

    11. Passez à l'aperçu de l'application de votre navigateur. Vous pouvez voir que la colonne Logo de la compagnie aérienne est affichée.

    12. Passez à SAP Business Application Studio.

    13. Sélectionnez la colonne Logo de compagnie aérienne dans Page Editor.

    14. Supprimez le logo de la compagnie aérienne de la zone Étiquette dans le volet latéral droit de la colonne.

    15. Passez à l'aperçu de l'application de votre navigateur. Vous pouvez voir que le titre de la colonne Logo de la compagnie aérienne a été supprimé.

    16. Cliquez sur l'icône Afficher plus par ligne pour afficher tous les détails pertinents pour les Réservations.