Getting an Overview of SAP Fiori Elements for OData V4

Getting an Overview of ABAP RESTful Application Programming Model

Configuring ABAP CDS Annotations in the Back End

Getting an Overview of SAP Fiori Tools

Understanding SAP Fiori Elements Floorplans

Configuring General Settings of List Reports and Object Pages

Configuring Tables

Getting an Overview of the Navigation Concept in SAP Fiori Elements Apps

Configuring Object Pages

Examining the Flexible Programming Model

Deploying an SAP Fiori Elements App

Using Extension Points

Objective

After completing this lesson, you will be able to integrate front-end components that are not available with Annotations.

Extension Points

The SAP Fiori elements framework is based on SAPUI5 technology. You may be familiar with the Model View Controller concept in SAPUI5.

In the view, you can define the UI controls to be used in the UI.

The controller contains methods that define how models and views interact.

A model holds the data and provides methods to retrieve the data from the database and to set and update the data.

Thus, in a freestyle SAPUI5 app, you have to define the views and implement the methods needed in the controllers, for example, an event handler for a button if a user selects a button.

The SAP Fiori elements framework generates views at runtime based on a predefined floorplan, your app-specific metadata, annotations, and optional configuration. Therefore, in a standard SAP Fiori elements application, you do not have any static views or controllers in your project in the development environment.

When you use extension points, a static XML fragment must be added to the webapp/ext folder of your project. If needed, a controller can also be added. The Page Editor can generate both files, including an ext folder if it does not yet exist.

Extension points are containers provided by the SAP Fiori elements framework that hook into the standard SAP Fiori elements runtime. There, you can add your specific UI controls or behavior using the standard SAPUI5 programming model.

In custom extensions, you can provide features that SAP Fiori elements does not offer, for example, process diagrams or maps.

Note

Prioritize standard SAP Fiori elements features. Use custom extensions only as a last resort when the required functionality is not available out-of-the-box. Extensions add complexity: they increase initial development effort and long-term maintenance overhead and can introduce UI inconsistencies. Adhering to standard patterns ensures a better user experience and a more maintainable application.

Note: you can find all SAP Fiori elements extension points for list reports under Extensions for List-based Pages, and for object pages under Extensions for Object Pages, including documentation and sample code.

Add a Custom Section to the Object Page

In this exercise, you will add a custom section containing your custom code to the object page body that will display a geo map.

Prerequisites

You have completed the exercise Add Plane Details Section to the Subobject Page Body in the unit Configuring Object Pages (lesson: Configuring Sections of the Object Page Body).

Watch the Simulation and Perform the Steps

This exercise contains a simulation that takes you through detailed steps. You can find all the steps after the simulation. You can follow the simulation and perform the steps using your own trial account.

ExerciseStart Exercise

Steps

Open SAP Business Application Studio.
Right-click webapp from your travels project.
Choose the Show Page Map option from the subsequent menu.
Select the edit icon for TravelObjectPage from the Page Editor.
Select the add icon for the Sections row.
Select Add Custom Section from the list.
Enter Itinerary in the Title field of the Add Custom Section dialog box.
Select the global icon from the Title field.
Select Apply from the subsequent popup.
Enter GeoMap in the Fragment Name field.
Select the dropdown for the Anchor Section field.
Choose Bookings (ID:i18nbookings) from the list.
Select Add from the Add Custom Section dialog box. A custom section Itinerary is created.
You can see that an ext subfolder has been added to the webapp folder.
Expand the ext folder.
Select GoeMap.fragment.xml from the list.
You can see some sample code generated by the Page Editor.

You can replace the content with your custom code. The provided example creates a geo map with hard-coded values. In a real application, the geo map data would be exposed by the back end service and bound against the control.

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>

You can see the errors that IDs are missing for the UI controls. Select the row <vbm: AnalyticMap of the code.
Select the Quick Fix icon from the code.
Choose Generate IDs for the entire file option from the list. The IDs are generated for all the UI controls.
Switch to the app preview in your browser.
Select Itinerary tab from the object page. You can see the geo map that you have added in a custom section.

Result

You successfully added a custom section containing your custom code to the object page body. You viewed the geo map in your new section.

Note

You can find the solution for this exercise on GitHub.

Next lesson