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

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.

SAP Fiori elements framework generates views at runtime based on the predefined floorplans and your app-specific metadata and annotations. Thus, in the standard SAP Fiori elements applications, you do not have any static views or controllers in your project in the development environment.

If you use the extension points, a static xml fragment has to be added to the webapp/ext folder of your project. If needed, a controller will also be added. The Page Editor can generate both files, including an ext folder if not present yet.

Extension points are containers provided by SAP Fiori elements framework, which hook into the standard SAP Fiori elements runtime. There, you can add your specific UI controls or behaviors using the standard SAPUI5 programming model based on HTML5 and JavaScript.

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

Note: you can find the list of all extension points provided by SAP Fiori elements at Overview of Extension Points

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