How to extend Fiori Apps developed using Restful ABAP Programming Model

Hi Community,

In this final blog I will give a step by step guide on how we can extend a Fiori App developed using Restful ABAP Programming (RAP) Model.

Some background on the RAP applications first –

RAP applications are based on Fiori elements i.e. they are generated based on the CDS annotations modelled in the backend. The supported CRUD operations, the featured behaviors of properties, the navigations, value helps, etc. everything is driven by annotations. Benefits include very quick realization of the application and very limited knowledge of frontend development is needed.

If you have not developed using RAP please have a look here.

With the background set in perspective, I will now assume that we all know how to develop a basic application using RAP and I will show how it can be extended.

Use case – I will include a custom control in a RAP Application. Process is equally applicable for a standard control from UI5 library.

Tool – I will demo same using SAP WebIDE.

Steps –

1. Folder structure of my application –

Note – I have created two folders – controls and ext which you will not find in the application generated by the template.

2. In the controls folder, we need to place the custom control itself. Since this control is not from SAPUI5 library so it’s source code has to be either present locally or derived from a CDN. We choose to place the control locally. It’s structured as below –

Note – This custom control has aggregation as well hence you see two files.

3.In the ext folder we need to place the actual view and the controller which will invoke the custom control and same will be rendered in my RAP application.

It’s structured as below –

4. Till this step we have include the custom control in our application but now we need to adjust the manifest.json to identify where to place this control in existing application.

Below code can be written just before “contentDensities” property in the manifest.json file.

"extends": {
			"extensions": {
				"sap.ui.viewExtensions": {
					"sap.suite.ui.generic.template.ObjectPage.view.Details": {
						"AfterFacet|<Name Of Entity Set>|<Association Name>::com.sap.vocabularies.UI.v1.LineItem": {
							"type": "XML",
							"className": "sap.ui.core.mvc.View",
							"viewName": <Name of the component>.ext.view.CustomControl",
							"sap.ui.generic.app": {
								"title": "{@i18n>CustomControl}"
							}
						}
					}
				}
			}
		},

The <Association Name> should be present in the annotations.xml

5. Using the view extension we include the custom facet after a facet in the existing application and in the view of the facet (CustomControl.view.xml) we include a reference to the controller ( CustomControl.controller.js ). This is like normal UI5 development.

6. Post that all actions on the custom control can be implemented normally via the handlers in it’s own controller.

7. Another important point which I learnt during course of above activity is that the normal routing handling via Route Pattern matched event is not applicable for Fiori elements applications and we need to handle same via attachRequestCompleted event of the model in the onInit() lifecycle method of the custom controller. Sample code can be –

this.getOwnerComponent().getModel().attachRequestCompleted(function (oEvent) {
				if (oEvent.getParameters().url.indexOf("<Unique string identifying hash of the Object Page>") !== -1) {
				// Processing to be triggered on match of every route pattern
				}
			}.bind(this));

8. Further translatable texts should be maintained in below file –

9.Final output will look like –

Thanks a lot for reading.

PS: Previous blog.

As always, please provide your feedback and share learnings.