Extending SAPUI5 Apps - View Modification and Replacement

In this blog, I will mention how to modify a view and to replace a view. Do follow my previous blogs on extending sapui5 apps for better understanding on the concept of extending applications in sapui5.

Modifying a view
Modifying a particular view, currently is restricted to only visible property of a particular control, i.e particular controls in a custom applications can be made hidden. The controls must have the visible property and the control's ID must be defined in the view. The view name together with the control ID uniquely determines the control in the standard application.

View modification is available for XML views, JS views and HTML views. Below is an example that explains how a view modification works. The first code snippet describes the Sub3.view.xml view in the delivered standard application.

<mvc:View xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
<TextView text="SAP View 'Sub3' - the text after this one is hidden by customizing: "></TextView>
<TextView id="someCustomizableTextControl" text="This text is made invisible by customization"></TextView>

The following code snippet describes the customizing that identifies the control someCustomizableTextControl with the visible property set to false.

customizing: {
"sap.ui.viewModifications": {
"samples.components.ext.sap.Sub3": {
"someCustomizableTextControl": {
"visible": false

Replacing a view
Views of a particular standard fiori apps, can be replaced in a custom application, to adapt the customer needs. If the extension points provided for view extension are not sufficient to meet the requirements of the custom application, you can replace the standard view with a custom view.
The following view is delivered in the standard application:

<mvc:View xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
<TextView text="SAP View 'Sub1' - this one should have been replaced by the customer View"></TextView>

This is the custom view to replace the standard view:

<mvc:View xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc">
<TextView text="Custom View 'Sub1' - this one replaces the original SAP View 'Sub1'"></TextView>

The following customizing replaces the custom view with the view in the standard application

customizing: {
    .....some more content
    "sap.ui.viewReplacements": {
        "samples.components.ext.sap.Sub1": {
            viewName: "samples.components.ext.customer.CustomSub1",
            type: "XML"

 So, this was about view modification and view replacement. In the next tutorial, you will learn about controller extension.
Next Post »