Utilisation de points d'extension

Objective

After completing this lesson, you will be able to intégrer des composants frontend qui ne sont pas disponibles avec des annotations

Points d'extension

Le framework des éléments SAP Fiori est basé sur la technologie SAPUI5. Vous connaissez peut-être le concept model view controller dans SAPUI5.

Dans la vue, vous pouvez définir les contrôles d'IU à utiliser dans l'IU.

Le contrôleur contient des méthodes qui définissent la manière dont les modèles et les vues interagissent.

Un modèle contient les données et fournit des méthodes pour extraire les données de la base de données et pour définir et mettre à jour les données.

Ainsi, dans une application SAPUI5 freestyle, vous devez définir les vues et implémenter les méthodes requises dans les contrôleurs, par exemple, un gestionnaire d'événements pour un bouton si un utilisateur sélectionne un bouton.

La structure des éléments SAP Fiori génère des vues au moment de l'exécution en fonction des floorplans prédéfinis et de vos métadonnées et annotations spécifiques à l'application. Ainsi, dans les applications d'éléments SAP Fiori standard, vous n'avez pas de vues ou de contrôleurs statiques dans votre projet dans l'environnement de développement.

Si vous utilisez les points d'extension, un fragment XML statique doit être ajouté au dossier webapp/ext de votre projet. Si nécessaire, un contrôleur sera également ajouté. Le Page Editor peut générer les deux fichiers, y compris un dossier ext s'il n'est pas encore présent.

Les points d'extension sont des conteneurs fournis par la structure des éléments SAP Fiori, qui s'accrochent à l'exécution des éléments SAP Fiori standard. Vous pouvez y ajouter vos contrôles d'IU ou comportements spécifiques à l'aide du modèle de programmation SAPUI5 standard basé sur HTML5 et JavaScript.

Dans les extensions personnalisées, vous pouvez fournir des fonctionnalités que les éléments SAP Fiori ne proposent pas, par exemple, des diagrammes de processus ou des cartes.

Note : vous trouverez la liste de tous les points d'extension fournis par les éléments de SAP Fiori sous Synthèse des points d'extension.

Ajouter une section personnalisée à la page d'objet

Dans cet exercice, vous allez ajouter une section personnalisée contenant votre code personnalisé au corps de la page d'objet qui affichera une carte géographique.

Conditions requises

Vous avez terminé l'exercice Ajouter une section de détails sur le plan au corps de la page du sous-objet dans le chapitre Configuration des pages d'objet (leçon : Configuration des sections du corps 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.

ExerciseStart Exercise

É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 TravelObjectPage dans l'éditeur de page.
Sélectionnez l'icône Ajouter pour la ligne Sections.
Sélectionnez Ajouter une section personnalisée dans la liste.
Saisissez Itinéraire dans le champ Titre de la boîte de dialogue Ajouter une section personnalisée.
Sélectionnez l'icône globale dans la zone Titre.
Sélectionnez Appliquer dans la fenêtre pop-up suivante.
Saisissez GeoMap dans la zone Nom du fragment.
Sélectionnez la liste déroulante pour la zone Section d'ancrage.
Sélectionnez Réservations (ID:i18nbookings) dans la liste.
Sélectionnez Ajouter dans la boîte de dialogue Ajouter une section personnalisée. Une section personnalisée Itinéraire est créée.
Vous pouvez voir qu'un sous-dossier ext a été ajouté au dossier webapp.
Développez le dossier ext.
Sélectionnez GoeMap.fragment.xml dans la liste.
Vous pouvez voir un exemple de code généré par Page Editor.

Vous pouvez remplacer le contenu par votre code personnalisé. L'exemple fourni crée une carte géographique avec des valeurs codées en dur. Dans une application réelle, les données de carte géographique seraient exposées par le service backend et liées au contrôle.

Code Snippet

1234567891011121314151617181920212223
<core:FragmentDefinition xmlns:core="sap.ui.core"
    xmlns="sap.m"
    xmlns:macros="sap.fe.macros"
    xmlns:vbm="sap.ui.vbm"
    displayBlock="true">

   <VBox>
     <vbm:AnalyticMap width="100%" xmlns:l="sap.ui.layout" height="600px" initialPosition="-47.48339103742949; 48.70365903454684;0" initialZoom="2" class="sapUiMediumMarginTop">
        <vbm:vos>
            <vbm:Routes>
                <vbm:Route position="8.682127;50.110924;0; -73.780968;40.641766;0" color="rgb(204,0,0)" colorBorder="rgb(255,255,255)" linewidth="3" routetype="Geodesic" />
                <vbm:Route position="-73.780968;40.641766;0; -122.389977;37.615223;0" color="rgb(255,128,0)" colorBorder="rgb(255,255,255)" linewidth="3" routetype="Geodesic" />
                <vbm:Route position="-122.389977;37.615223;0; 8.682127;50.110924;0" color="rgb(0,153,76)" colorBorder="rgb(255,255,255)" linewidth="3" routetype="Geodesic" />
            </vbm:Routes>
            <vbm:Spots>
                <vbm:Spot position="8.682127;50.110924;0" tooltip="Frankfurt am Main (FRA)" labelType="Default" labelText="Frankfurt am Main (FRA)" labelPos="5" />
                <vbm:Spot position="-73.780968;40.641766;0" tooltip="New York (JFK)" labelType="Default" labelText="New York (JFK)" labelPos="5" />
                <vbm:Spot position="-122.389977;37.615223;0" tooltip="San Francisco (SFO)" labelType="Default" labelText="San Francisco (SFO)" labelPos="5" />
            </vbm:Spots>
        </vbm:vos>
    </vbm:AnalyticMap>
    </VBox>
</core:FragmentDefinition>

Vous pouvez voir les erreurs qu'il manque des ID pour les contrôles de l'interface utilisateur. Sélectionnez la ligne <vbm: AnalyticMap du code.
Sélectionnez l'icône Solution rapide dans le code.
Sélectionnez Générer des ID pour l'ensemble de l'option de fichier dans la liste. Les ID sont générés pour tous les contrôles de l'interface utilisateur.
Passez à l'aperçu de l'application dans votre navigateur.
Sélectionnez l'onglet Itinéraire dans la page d'objet. Vous pouvez voir la carte géographique que vous avez ajoutée dans une section personnalisée.

Résultat

Vous avez correctement ajouté une section personnalisée contenant votre code personnalisé au corps de la page d'objet. Vous avez affiché la carte géographique dans votre nouvelle section.

Next lesson