Création d'une page d'objet

Dans cet exercice, vous allez ajouter un titre et une description à la page d'objet. Vous ajouterez également un titre au tableau du rapport de liste.

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. Le rapport de liste de votre exercice précédent est ouvert dans votre navigateur.

2. Sélectionnez un voyage dans la liste. La page d'objet s'ouvre, mais seul un ID technique du déplacement est affiché, car la page d'objet est toujours vide.

3. Ouvrez ADT et développez le dossier Extensions de métadonnées dans l'explorateur de projets.

4. Ajoutez un titre au tableau du rapport de liste, ainsi qu'un titre et une description à la page d'objet.

   1. Double-cliquez sur l'extension de métadonnées ZC_FE_TRAVEL_######. L’extension des métadonnées de l’entité Travel s’ouvre.

   2. Ajoutez l'annotation @UI.headerInfo en haut du fichier, comme illustré dans l'exemple de code suivant.

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      @UI.headerInfo: {
          typeNamePlural: 'Travels',
          typeName: 'Travel',
          title: { type: #STANDARD, value: 'Description'},
          description: { type: #STANDARD, value: 'TravelID'}
      }

   3. La propriété typeNamePlural définit le titre du rapport de liste. La valeur de cette annotation est une chaîne.

   4. La propriété typeName pour le titre de la page d'objet est affichée en haut au centre de la page d'objet. La valeur de cette annotation est une chaîne.

   5. La propriété title définit ce qui est affiché dans le coin supérieur gauche de la page d'objet. La valeur de cette propriété est le champ Description de l’entité Travel.

   6. La propriété description de l'annotation @UI.headerInfo définit ce qui s'affiche sous le titre dans le coin supérieur gauche de la page d'objet.

5. Cliquez sur Activer dans la barre de menus pour sauvegarder et activer vos modifications.

6. Passez à l'aperçu de l'application dans votre navigateur. Vous pouvez voir que le titre du tableau du rapport de liste a été ajouté.

7. Sélectionnez Lancer dans la table. Le tableau du rapport de liste s'affiche.

8. Sélectionnez le voyage comme avant. La page d'objet s'ouvre désormais avec un titre qui inclut la description et l'ID du voyage.

Dans cet exercice, vous allez ajouter prix total et statut global à l'en-tête 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. Le rapport de liste de votre exercice précédent est ouvert dans votre navigateur.

2. Sélectionnez un voyage. La page d'objet du voyage s'ouvre. Vous allez ajouter le Prix total et le Statut global comme points de données à l'en-tête de la page d'objet.

3. Vous pouvez maintenant passer à ADT.

4. Annotez TotalPrice avec @UI.dataPoint.

   1. Double-cliquez sur ZC_FE_TRAVEL_###### dans le dossier Extension de métadonnées de l'explorateur de projets.

   2. Ajoutez l'annotation @UI.dataPoint pour TotalPrice, comme indiqué dans l'exemple de code suivant :

      Code Snippet

      Copy codeSwitch to dark mode

      1
      @UI.dataPoint: { qualifier: 'PriceData', title: 'Total Price' }

5. Ajoutez l'annotation @UI.facet et référencez l'annotation @UI.dataPoint de TotalPrice dedans.

   1. Dans la même extension de métadonnées, ajoutez l'annotation @UI.facet , comme indiqué dans l'exemple de code suivant, pour définir une section sur la page d'objet. Notez que @UI.facet annotation vient directement après annotate view ZC_FE_Travel_###### with {

      Code Snippet

      Copy codeSwitch to dark mode

      1234567
      
      @UI.facet: [{
           purpose: #HEADER,
           position: 10,
           type: #DATAPOINT_REFERENCE,
           targetQualifier: 'PriceData'
      }]

   2. Le purpose pour cette annotation est ajouté comme #HEADER afin que la section soit placée dans l'en-tête de la page d'objet.

   3. Le position est défini sur 10 afin qu'il s'agisse de la première section dans l'en-tête de la page d'objet.

   4. Le type est défini comme #DATAPOINT_REFERENCE, ce qui signifie qu'il fait référence à une annotation @UI.dataPoint .

   5. Le targetQualifier identifie l'annotation @UI.dataPoint référencée.

6. Cliquez sur Activer dans la barre de menus pour sauvegarder et activer vos modifications.

7. Passez à l'aperçu de l'application dans votre navigateur pour afficher les modifications dans l'interface utilisateur. Vous pouvez voir que Prix total est désormais visible dans l'en-tête de la page d'objet.

8. Passez à ADT.

9. Ajoutez l'annotation @UI.dataPoint à OverallStatus dans l'extension de métadonnées ouverte, comme illustré dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.dataPoint: { qualifier: 'StatusData', title: 'Status', criticality: 'OverallStatusCriticality' }

10. Ajoutez l'annotation @UI.facet et référencez l'annotation @UI.dataPoint de OverallStatus dedans.

    1. Ajoutez un autre enregistrement d'annotation @UI.facet pour afficher la deuxième section dans l'en-tête de la page d'objet, comme illustré dans l'exemple de code suivant.

       Code Snippet

       Copy codeSwitch to dark mode

       1234567
       ,
       {
            purpose: #HEADER,
            position: 20,
            type: #DATAPOINT_REFERENCE,
            targetQualifier: 'StatusData'
       }

    2. Assurez-vous que #HEADER est saisi comme purpose.

    3. Définissez le position comme 20 pour qu'il se trouve en deuxième position dans l'en-tête de la page d'objet.

    4. Définissez le type comme #DATAPOINT_REFERENCE, ce qui signifie qu'il fait référence à une annotation @UI.dataPoint .

    5. Le targetQualifier identifie l'annotation @UI.dataPoint référencée.

11. Cliquez sur Activer dans la barre de menus pour sauvegarder et activer vos modifications.

12. Passez à l'aperçu de l'application dans votre navigateur pour afficher les modifications dans l'interface utilisateur. Vous pouvez voir que le Statut est désormais visible dans l'en-tête de la page d'objet en regard de Prix total.

Dans cet exercice, vous allez ajouter une section et la sous-section d'identification au corps 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. Le rapport de liste de votre exercice précédent est ouvert dans votre navigateur.

2. Sélectionnez un voyage. La page d'objet du voyage s'ouvre. Vous devez ajouter la première section au corps de la page d'objet et y ajouter une sous-section d'identification.

3. Vous pouvez désormais passer à ADT et ouvrir l'extension de métadonnéesZC_FE_TRAVEL_###### à partir de l'explorateur de projets.

4. Annotez AgencyID avec @UI.identification, comme indiqué dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.identification: [{position: 10}]

5. Annotez CustomerID avec @UI.identification, comme indiqué dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.identification: [{position: 20}]

6. Ajoutez un nouvel enregistrement à @UI.facet annotation, comme indiqué dans l'exemple de code suivant, pour créer une section dans le corps de la page d'objet. Il s'agit d'un conteneur vide et vous pouvez ajouter des sous-sections ici.

   Code Snippet

   Copy codeSwitch to dark mode

   1234567
   ,
   {
       label: 'General Information',
       type: #COLLECTION,
       id: 'GeneralInfo',
       position: 10
   }

7. Ajoutez un autre enregistrement à @UI.facet annotation, comme indiqué dans l'exemple de code suivant, pour la sous-section d'identification.

   Code Snippet

   Copy codeSwitch to dark mode

   123456
   ,
   {
        label: 'General',
        type: #IDENTIFICATION_REFERENCE,
        parentId: 'GeneralInfo'  /*The section id*/
   }

8. Référencez la section créée précédemment comme section parent de cette sous-section en gérant parentId comme GeneralInfo. La nouvelle section devient désormais la sous-section de la section Informations générales.

9. Cliquez sur Activer dans la barre de menus pour sauvegarder et activer vos modifications.

10. Passez à l'aperçu de l'application dans votre navigateur pour afficher vos modifications dans l'interface utilisateur. Vous pouvez voir que Informations générales est une nouvelle section et que la sous-section d'identification est visible comme Général dans la nouvelle section.

Dans cet exercice, vous allez ajouter deux sous-sections à 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. Le rapport de liste de votre exercice précédent est ouvert dans votre navigateur.

2. Sélectionnez un voyage dans la liste. La page d'objet du voyage s'ouvre. Vous devez ajouter une sous-section avec des prix et une sous-section avec des informations de date. Vous devez placer ces deux sous-sections dans la section Informations générales à côté de la sous-section Général.

3. Vous pouvez désormais passer à ADT et ouvrir l'extension de métadonnéesZC_FE_TRAVEL_###### à partir de l'explorateur de projets.

4. Annotez TotalPrice avec @UI.fieldGroup, comme indiqué dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'PricesGroup', position: 10}]

5. Annotez BookingFee avec @UI.fieldGroup, comme indiqué dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'PricesGroup', position: 20}]

6. Ajoutez un autre enregistrement à @UI.facet annotation de type #FIELDGROUP_REFERENCE pour la sous-section Prix, comme illustré dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   123456789
   ,
   {
       label: 'Prices',
       purpose: #STANDARD,
       position: 20,
       type: #FIELDGROUP_REFERENCE,
       parentId: 'GeneralInfo',
       targetQualifier: 'PricesGroup'
   }

   1. Le label est Prices.

   2. Le parentId de cette sous-section étant GeneralInfo, la sous-section apparaît dans la section Informations générales.

   3. Le targetQualifier est PricesGroup.

7. Annotez BeginDate avec @UI.fieldGroup, comme indiqué dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'DatesGroup', position: 10}]

8. Annotez EndDate avec @UI.fieldGroup, comme indiqué dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   1
   @UI.fieldGroup: [{qualifier: 'DatesGroup', position: 20}]

9. Ajoutez un autre enregistrement à @UI.facet annotation de type #FIELDGROUP_REFERENCE pour la sous-section Dates , comme illustré dans l'exemple de code suivant.

   Code Snippet

   Copy codeSwitch to dark mode

   123456789
   ,
   {
       label: 'Dates',
       purpose: #STANDARD,
       position: 30,
       type: #FIELDGROUP_REFERENCE,
       parentId: 'GeneralInfo',
       targetQualifier: 'DatesGroup'
   }

   1. Le label est Dates.

   2. Le parentId de cette sous-section étant GeneralInfo, la sous-section apparaît dans la section Informations générales.

   3. Le qualifier pour le groupe de zones est DatesGroup.

10. Cliquez sur Activer dans la barre de menus pour sauvegarder et activer vos modifications.

11. Passez à l'aperçu de l'application dans votre navigateur pour afficher vos modifications dans l'interface utilisateur. Vous pouvez voir les prix et les dates comme sous-sections qui ont été ajoutées à la section Informations générales.

Dans cet exercice, vous allez apprendre à rechercher les annotations CDS ABAP actives pour une vue en projection. Vous verrez l'URL du service et observerez comment le modèle de données de votre service est représenté dans le document $metadata . Vous vérifierez ensuite les annotations OData correspondantes qui ont été transformées par l'exécution à partir des annotations CDS ABAP correspondantes.

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 le dossier Définitions de données dans le dossier Core Data Services à partir de l'Explorateur de projets dans ADT.

2. Cliquez avec le bouton droit de la souris sur ZC_FE_TRAVEL_######.

3. Sélectionnez Ouvrir avec dans le menu suivant.

4. Sélectionnez l'option Annotations actives.

5. Toutes les annotations actives pour la vue en projection sélectionnée sont affichées. Vous pouvez voir @UI.annotations avec d'autres annotations, telles que @AccessControl et @ObjectModel.

6. Vous pouvez voir la définition de l'annotation @UI.headerinfo qui est définie au niveau de l'entité.

7. Faites défiler vers le bas pour afficher d'autres annotations pertinentes pour l'interface utilisateur, telles que @UI.facet annotation.

8. Dans le dossier Services de gestion de l'explorateur de projets, double-cliquez sur ZUI_FE_TRAVEL_######_O4.

9. Dans le document Liaison de service, sélectionnez l' URL du service disponible dans Détails de la version de service. L'URL du service s'ouvre dans votre navigateur.

10. Vous pouvez voir toutes les entités de votre service. Chaque entité représente la vue en projection correspondante. La I_DraftAdministrativeData est automatiquement ajoutée à votre service au moment de l'exécution, car la version préliminaire du service est activée.

11. Supprimer ?sap-client=100 de l'URL et remplacez-le par $metadata. Les métadonnées de service s'affichent.

12. Faites défiler vers le bas jusqu’à la définition de l’entité Travel. Il représente la vue en projection correspondante. Chaque propriété est une zone de la vue de projection ZC_FE_TRAVEL_######. Vous pouvez également voir les propriétés de navigation telles que _BookingFee, _CustomerID. Vous pouvez également voir certaines propriétés techniques, telles que HasDraftEntity, qui sont ajoutées automatiquement par l'exécution, car le service est activé pour la version préliminaire.

13. Faites défiler vers le bas jusqu'à la définition de l'annotation @UI.LineItem . Vous pouvez voir une collection d'enregistrements où chaque enregistrement représente une colonne de table.