Dans cet exercice, vous allez ajouter une section au corps de la page du sous-objet contenant les détails de l'avion.
Conditions requises
Vous avez terminé l'exercice Configuration de l'en-tête de page de sous-objet dans le même chapitre (sujet : Configuration de la zone d'en-tête de la page d'objet).
Regarder la simulation et exécuter les étapes
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.
Étapes
Ouvrez SAP Business Application Studio.
Cliquez avec le bouton droit de la souris sur webapp de votre projet voyages.
Sélectionnez l'option Afficher la carte de page dans le menu suivant.
Sélectionnez l'icône de modification pour la page Travel_BookingObjectPage dans l'éditeur de page.
Sélectionnez la ligne Sections.
Sélectionnez l'icône Ajouter pour la ligne Sections.
Sélectionnez Ajouter section d'identification dans la liste.
Saisissez Détails de l'avion dans la zone Étiquette de la boîte de dialogue Ajouter section d'identification. Les détails du plan sont ajoutés dans la ligne Sections du Page Editor.
Développez la ligne Détails de l'avion.
Développez Formulaire dans Détails de l'avion.
Sélectionnez Zones.
Sélectionnez l'icône Ajouter pour Zones.
Sélectionnez l'option Ajouter zones de base dans la liste.
Sélectionnez l'icône de liste déroulante pour la zone Zones dans la boîte de dialogue Ajouter zones de base.
Sélectionnez _Flight/PlaneType, _Flight/MaximumSeats et _Flight/OccupiedSeats dans la liste.
Sélectionnez Ajouter dans la boîte de dialogue Ajouter zones de base. Vous pouvez voir que les trois zones ont été ajoutées dans Zones.
Sélectionnez l'icône Modifier dans le code source pour La capacité maximale afin d'ouvrir le fichier auquel l'annotation a été ajoutée.
Vous pouvez voir les enregistrements UI.Identification qui ont été ajoutés par l'éditeur de page pour les trois champs.
Sélectionnez la ligne Détails du plan à partir des sections.
Sélectionnez l'icône globale dans la zone Étiquette du volet latéral de droite.
Sélectionnez Appliquer dans la fenêtre pop-up suivante.
Sélectionnez l'icône Modifier dans le code source pour la ligne Détails de l'avion.
Vous pouvez voir l'enregistrement UI.Facets qui a été ajouté par le Page Editor. Il crée une nouvelle section. Elle fait référence à l'annotation UI.Identification qui définit le contenu de la section.
Faites défiler vers le bas pour voir la définition d'annotation UI.Identification pour les trois champs.
Passez à l'aperçu de l'application dans votre navigateur. Vous pouvez voir la section dans le corps de la page du sous-objet contenant les détails de l'avion.
Sélectionnez le chevron droit pour développer la page d'objet.
Sélectionnez l'option plein écran pour la page de sous-objet afin de la développer. Vous avez observé le comportement réactif de votre application, en particulier le mode plein écran de la page de sous-objet.
Résultat
Vous avez correctement ajouté une section au corps de la page du sous-objet à l'aide de l'éditeur de page. Vous pouvez également ajouter une nouvelle section à l'aide du guide de développement guidé Ajouter une nouvelle section à une page d'objet.