{"id":4099,"date":"2023-03-06T09:16:59","date_gmt":"2023-03-06T08:16:59","guid":{"rendered":"https:\/\/www.js-soft.com\/?p=4099"},"modified":"2025-11-27T13:28:57","modified_gmt":"2025-11-27T12:28:57","slug":"sap-ui5-adaptation-projekt","status":"publish","type":"post","link":"https:\/\/www.js-soft.com\/en\/sap-ui5-adaptation-projekt\/","title":{"rendered":"SAP UI5 Adaptation Project"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Adaptation projects offer a great way to extend the SAP standard apps. This blog gives an introduction about what requirements have to be met, and it should also serve as a cheat sheet for developers. Thus, the blog is split up into two main sections. The first one ensures feasibility whereas the second part focuses more on the development side of an adaptation project.<\/p>\n\n\n\n

Feasibility of an Adaptation Project<\/h2>\n\n\n\n

Adaptation Project<\/h3>\n\n\n\n

Adaptation Projects are used to meet customer requirements in SAP Standard Apps. Examples can be adding custom behavior which will be invoked by pressing an added button to the standard app.
Be aware that not every standard app delivered by SAP can be extended with an adaptation project. Only the apps which are developed with SAP UI5 can be extended this way. In the Fiori apps library, it is easy to determine the developing language of the app.<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"SAP
Entry of the Fiori apps library which can be extended<\/figcaption><\/figure>\n\n\n\n

Once the criteria are met and the app can be extended with an adaptation project the visual editor comes into place. The visual editor is integrated into the SAP Business Application Studio (SAP BAS) which allows the user to adjust the properties of the standard app as well as to add custom controls and logic. To do so rightclick on the area which should be extended and add your control or logic.
There is a safe mode that can be activated, this one should ensure that the extension will work with future system upgrades.<\/p>\n\n\n\n

Make the Adaptation project visible<\/h3>\n\n\n\n

To test the adaptation project in the original app the launchpad customizing has to be adjusted. Therefore it is best practice to create a new mapping for the routing as well as a new tile which will then open the created variant. Hence, the standard app will still be available if in the deployed extension an error occurs. The target mapping requires the parameter sap-appvariant-id and should look like the following:<\/p>\n\n\n\n

<\/p>\n\n\n\n

\"new
Target mapping of an adaptation project<\/figcaption><\/figure>\n\n\n\n

Once the target mapping is created the app variant (the adaptation project) can be called by using the # of the original app in combination with the URL parameter sap-appvar-id: #YAIFMessage-display?sap-appvar-id=customer.<\/p>\n\n\n\n

To ensure, that the adaptation project is called the inspector is required. Above the directory of the developed and standard apps there will be another directory for adaptation projects.<\/p>\n\n\n\n

Debug extension<\/h3>\n\n\n\n

In the inspector, you then can see that a directory lrep\/flex\/modules<\/em> which contain the extension.
In this directory, you can find the coding of your adaptation project. If this entry is not listed then it is a hint that there might be a syntax error within your extension.<\/p>\n\n\n\n

\"inspector\"<\/figure>\n\n\n\n

Useful tools by SAP<\/h3>\n\n\n\n

SAP delivered some useful tools to further investigate an app. As a reminder those tools are listed with the corresponding keyboard shortcuts.<\/p>\n\n\n\n

\"keyboard
Keyboard Shortcuts der SAP<\/strong>: SAPUI5 SDK Demo Kit<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n

Development of an Adaptation Project<\/h2>\n\n\n\n

Extension coding<\/h3>\n\n\n\n

In the adaptation project it is possible to either override the methods of the extended controller (be careful on this one), to define your methods and execute them as well as to override the lifecycle methods of the standard app. When overriding lifecycle methods be aware that your coding in the extension will not replace the coding of the standard app \u2013 rather your coding will be called before or after the lifecycle method of the standard app. See the following picture as a demonstration.<\/p>\n\n\n\n

\"Override
Source: UI5 extension of controller and lifecycle methods<\/a><\/figcaption><\/figure>\n\n\n\n

<\/p>\n\n\n\n

return ControllerExtension.extend(\"customer.<namespace>.ExcelReport\", {\n    override:{\n        onInit: function(oEvent){\n            ...\n        },\n        onAfterRendering: function(oEvent){\n            ...\n        }\n    },\n    myMethod(){\n      ...\n    },\n    anotherMethod(){\n      ...\n    }\n})<\/code><\/pre>\n\n\n\n
The context of the controller extension can be retrieved via <\/p>\n\n\n\n
 this.base.extension.<namespace><\/code><\/pre>\n\n\n\n
(in the debugger). The context of the extented controller can be retrieved via<\/p>\n\n\n\n
this.base.getView().getController()<\/code><\/pre>\n\n\n\n
Contexts and extension Methods<\/h3>\n\n\n\n
The following information lists the commands to navigate between the contexts of the controller and the extension. Hence, use the controller context of the original app as well as the context of the extension.<\/p>\n\n\n\n
Context of the extension<\/h4>\n\n\n\n
this.base.extension.<namespace>\nthis.base.extension.customer.SysMsgMonitorOverview.OverviewExtension<\/code><\/pre>\n\n\n\n
this Context of the current controller<\/h4>\n\n\n\n
this.base.<variable> = 'abc'<\/code><\/pre>\n\n\n\n
Controller of the current view<\/h4>\n\n\n\n
this.base.getView().getController()<\/code><\/pre>\n\n\n\n
Helpfull skills<\/h2>\n\n\n\n
Further helpful skills which might come in handy are:<\/p>\n\n\n\n