Getting Started with the Flexibility of the Programming Model

You may have a very specific use case that cannot be built with standard SAP Fiori elements floorplans and the extension capabilities of the programming model. In this case, we still recommend creating your app as an SAP Fiori elements app.

You can generate your app using the app generator by selecting the Custom Page template. The app generator creates a custom app that runs on the SAP Fiori elements framework and all pages are treated as custom pages. Under the hood, the custom page building block is used for a custom page. This approach lets you use building blocks, controller extensions, and SAP Fiori tools in your custom application.

You can explore the custom page building block using Custom Page in SAP Fiori Development Portal

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: 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.

Building blocks are reusable pieces of code that are consistently implemented in the SAP Fiori elements framework. SAP Fiori elements floorplans consist internally of these building blocks. If you use building blocks, you can be sure that your app follows the SAP Fiori design guidelines and that standard features, such as draft handling or side effects, are automatically supported by these building blocks. They are metadata driven, just like the floorplans.

You can extend standard floorplans using building blocks in extension points. You can also create custom pages by combining building blocks.

Building blocks are not SAPUI5 controls, but rather a set of templating instructions that used to create a specific control tree, depending on the bound data structures.

See the list of all available building blocks: Overview of Building Blocks

You can also explore sap.fe.macros, a library of building blocks provided by SAP Fiori elements.

The Open Data Protocol (OData) includes the standard CRUD (Create, Read, Update and Delete) operations that map to the HTTP methods POST, GET, PUT/MERGE and DELETE.

In addition, OData supports further service operations (function imports) that can be invoked by the HTTP methods GET or POST for anything that cannot be mapped to the standard CRUD operations. You can implement the additional service operations in your back end.

In this training, you use CAP as your back end and you will create a function import within your CAP data model.

When you add a definition of the function import to your CAP data model, it becomes a part of the service metadata. You will find it in the $metadata document.

The screenshot above shows that the function import is added to the service container alongside the entity sets of the service.

In the same $metadata document, you can find the API of the function import.

As soon as the function import is part of $metadata, it can be used on the client side in your SAP Fiori elements application.