Skip to Content
Technical Articles
Author's profile photo Ankit Maskara

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>": {
							"type": "XML",
							"className": "sap.ui.core.mvc.View",
							"viewName": <Name of the component>.ext.view.CustomControl",
							"": {
								"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

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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Kalpesh Kumar Purohit
      Kalpesh Kumar Purohit

      HI Ankit Maskara,

      Thanks for the great blog!

      For the standard apps based on RAP, can you please also share some details what steps need to be done from UI side after implementing the extension in the backend( ex - new fields and annotation addition).




      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Hi Kalpesh Kumar Purohit ,

      Thank you for the feedback.

      Off late I have not worked on RAP but what I heard is you can try using Adaptation Projects, again not sure so just give it a try. (Above scenario was  also for a Standard App but I guess you are interested in extension of same while I was working as part of Standard team in above scenarios).


      Best Regards,

      Ankit Maskara.