Author: Rudramani Pandey

Preface – This post is part of the UI5 Programs series.

Introduction

When we create a blank UI5 Application, it is created with a blank view and controller. It is recommended to create an App view on top of these Individual views for pages, so that it can act as a root view for others. SAP recommends to have this file as a root view.

As a developer you might have these questions in mind:

1. Why App View is required in UI5?
   Ans. It is a root element of UI5 mobile App. It adds certain header tags which is important for mobile apps. Also, it provides navigation capabilities.
2. What will happen if no App view is added?
   Ans. You might get issue during navigation or during mobile view.
3. What all you can do with the help of App view?
   Ans. You can modify the background colour, background image, set home icon, set initial screen loader with the help of App view.

App View

You can simple add a new UI5 View by right clicking at project level and name it “App”. This will add a view and a controller in respective folders with name “App.view.xml” and “App.controller.js”. Remember, we don’t need any routing and navigation for the App view, hence you should delete that if it is created automatically.
Add the given code in view file:

<mvc:View controllerName="TestApp.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
    <App id="app"
         busy="{appView>/busy}"
         busyIndicatorDelay="{appView>/delay}"/>
    </Shell>
</mvc:View>

App Controller

Add the following code in controller file:

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("TestApp.controller.App", {
        onInit: function () {
 
        }
    });
});

Manifest Changes

Inside manifest file, modify the object “rootView” as shown below:

"rootView": {
            "viewName": "TestApp.view.App",
            "type": "XML",
            "id": "app"
        }

Also set the controlId as “app” under config of routing.

Now, you have successfully added an App Root view in your custom UI5 App.

Full Manifest Code

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "testApp",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "oDataService": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "testApp.i18n.i18n"
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            },
            "ODataModel": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Request",
                    "json": true,
                    "defaultUpdateMethod": "PUT",
                    "useBatch": false
                },
                "dataSource": "oDataService",
                "preload": true
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "rootView": {
            "viewName": "testApp.view.App",
            "type": "XML",
            "id": "app"
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewPath": "testApp.view",
                "controlId": "app",
                "bypassed": {
                    "target": ["NotFound"]
                }
            },
            "routes": [{
                "name": "Tab_1",
                "pattern": "",
                "target": ["masterTarget", "Tab_1"]
            }, {
                "name": "Tab_2",
                "pattern": "Tab_2",
                "target": ["masterTarget", "Tab_2"]
            }],
            "targets": {
                "masterTarget": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "masterPages",
                    "viewId": "idMaster",
                    "viewName": "Master",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_1",
                    "viewName": "Tab_1",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_2": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_2",
                    "viewName": "Tab_2",
                    "viewLevel": 2,
                    "controlId": "Splitapp"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "webapp",
        "_version": "1.1.0"
    }
}

 

Preface – This post is part of the UI5 Programs series.

Introduction

Many times we need to add UI Annotation for custom UI5 application. This requirement is generated as backend is unable to provide some metadata that is required for Smart controls. To add those metadata, we create an annotation file and connect with required service. In this article, we will mainly focus regarding the setup of UI annotation using manifest.json file. We will discuss how the annotations are added in a different article.

How to start Adding Annotation in a Service

We need to follow given steps to add an Annotation in custom UI5 App:

1. Download the metadata of the service for which you want to add Annotation. For that you need to open “<app url>/<your service name>/$metadata” and save it locally in your system. Here, we will take example of Northwind metadata.
   
2. Add a new OData service (by right clicking at the project) and choose “File System” as a source. It will ask to upload a metadata file. Upload the one that you have just downloaded in step 01. Choose default or named model in next step. This will automatically add a service in your manifest file. Also, a new folder “localService” will be created with your metadata file.
   

The manifest will look like this now:

3. Add a new Annotation File (by right clicking at the folder “LocalService”), choose your model (here it is Northwind) and finish.

This will create an annotation file within the “LocalService” folder. Also, it will change the metadata as below:

As you can see a new Annotation is added in the manifest now.

4. Now you can open your Annotation file and your respective changes.

Changes in Manifest File for Adding UI Annotation in custom UI5 App

For Annotation, following changes are incorporated in a Manifest file. As you saw, all the changes were auto generated:

"dataSources": {
    "NorthwindModel": {
        "uri": "/here/goes/your/serviceurl/",
        "type": "OData",
        "settings": {
            "localUri": "localService/metadata.xml",
            "annotations": [
                "annotation0"
            ]
        }
    },
    "annotation0": {
        "type": "ODataAnnotation",
        "uri": "localService/annotation0.xml",
        "settings": {
            "localUri": "localService/annotation0.xml"
        }
    }
}

Full Manifest Code

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "Test.Test",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "NorthwindModel": {
                "uri": "/here/goes/your/serviceurl/",
                "type": "OData",
                "settings": {
                    "localUri": "localService/metadata.xml",
                    "annotations": [
                        "annotation0"
                    ]
                }
            },
            "annotation0": {
                "type": "ODataAnnotation",
                "uri": "localService/annotation0.xml",
                "settings": {
                    "localUri": "localService/annotation0.xml"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "rootView": {
            "viewName": "Test.Test.view.Main",
            "type": "XML",
            "async": true,
            "id": "Main"
        },
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "Test.Test.i18n.i18n"
                }
            },
            "": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "OneWay",
                    "defaultCountMode": "Request"
                },
                "dataSource": "NorthwindModel",
                "preload": true
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "async": true,
                "viewPath": "Test.Test.view",
                "controlAggregation": "pages",
                "controlId": "app",
                "clearControlAggregation": false
            },
            "routes": [
                {
                    "name": "RouteMain",
                    "pattern": "RouteMain",
                    "target": [
                        "TargetMain"
                    ]
                }
            ],
            "targets": {
                "TargetMain": {
                    "viewType": "XML",
                    "transition": "slide",
                    "clearControlAggregation": false,
                    "viewId": "Main",
                    "viewName": "Main"
                }
            }
        }
    }
}

 

Preface – This post is part of the UI5 Programs series.

Introduction

Whenever we create a UI5 application using Fiori Wizard, it creates the full layout of the App by itself. With the layout, it also creates required Manifest.json file with this. Also, it asks for required service, and if provided add a service with an unnamed model within the Manifest file. This model is the default OData model for the full application.
In many cases, we need multiple OData services for a single App. In that case, it gets important to manually add OData services with named Models. These models have to be accessed via their respective name from controller files. In this article, we will show how to create and use both named and unnamed OData models in UI5.

Adding OData Services in Manifest

To access an OData or XSOData in UI5, we follow following three steps:

1. Add a new service in Manifest
2. Add a new model in Manifest
3. Get this Model in Controller

Add a new service in Manifest

In the Manifest, you need to an OData Service as shown below:

        "dataSources": {
            "oDataServiceName": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>",
"annotations": [
                        "annotation0"
                    ]
                }
            }
        }

Here we have added a new OData service and called it “oDataServiceName”. Then we have added the following:

• uri: This is name of the service. In case it is an ABAP OData service then it looks like this: “/sap/opu/odata/sap/<name_of_OData>;v=0002/”
  And in case it is XSOData and accessed via MTA file, then it looks something like this:
  “../<MTA_Service_Name>r/xsodata/<Name_of_XSODATA>.xsodata/”
• type: For OData case it is always “OData”
• settings: This is the place where we provide additional information like:
  • odataVersion: OData is getting updated on regular basis, hence we use the one compatible with UI5 or our requirement
  • localUri: Local URI points to the local service in case we link our OData to a local mock-up data. This is required mainly during development and connect a mock-up data to our service
  • annotations: This is an array of the annotation file attached to a particular service. It is used for adding frontend based annotations. We will discuss this functionality in detail in a different article.

Add a new model in Manifest

In the Manifest, you need to an OData Model as shown below:

"ODataModelName": {
    "type": "sap.ui.model.odata.v2.ODataModel",
    "settings": {
        "defaultOperationMode": "Server",
        "defaultBindingMode": "TwoWay",
        "defaultCountMode": "Request",
        "json": true,
        "defaultUpdateMethod": "PUT",
        "useBatch": false
    },
    "dataSource": " oDataServiceName ",
    "preload": true
}

Here we have added a new OData model and called it “ODataModelName”. Then we have added the following:

• type: It is again for specifying the OData Model version. It should be similar to the one we mentioned in service above
• settings: It is used to add the following relevant configurations:
  • defaultOperationMode: It tells if the required operations (filter/orderby/etc) are executed on server or client. It mostly remains “Server” for OData use case.
  • defaultBindingMode: A binding mode can be “OneWay”, “TwoWay” or “OneTime”. These values mean exactly how the services are called. For Smart operations, we always use “TwoWay”
  • defaultCountMode: It represents if we need to get count separately via a request or via inline count. The values can be: “Inline”, “InlineRepeat”, “None” or “Request”
  • json: It tells the type of Output of this model is JSON or not.
  • defaultUpdateMethod: It tells if we will use “Merge” or “Put” for our update operation.
  • useBatch: It tells if we are using batch operations or not. Batch is OData operation.
• dataSource: It is where we specify the name of service we have create earlier.
• preload: It tells, if we need to load this model before it is called or not. Generally, we load all our Models when we open our UI5 App.

In above use case, it is a named model. You can also create an unnamed model. For that you only need to make the name of the model as “”. Yes, that is blank. In this way it becomes a default model. In full Manifest file below, we have added both types of models.

Accessing named OData Model via Controller

Once we have given a name to an OData model (above we have called it “ODataModelName”), then we can access this model in controller via using below code:

// Binding based on Model defined in Manifest
var oModel = this.getOwnerComponent().getModel("ODataModelName");

Now this local variable “oModel” can be used to access the model data and bind to whatever table or element you want via controller.

Accessing default or unnamed OData Model via Controller

The concept is similar to the named Model, just we don’t mention name of any model here.

// Binding based on Model defined in Manifest
var oModel = this.getOwnerComponent().getModel();

Now this local variable “oModel” can be used to access the model data and bind to whatever table or element you want via controller.

Full Manifest Code

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "testApp",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "oDataServiceName": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>"
                }
            },
            "oDataDefaultServiceName": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "testApp.i18n.i18n"
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            },
            "ODataModelName": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Request",
                    "json": true,
                    "defaultUpdateMethod": "PUT",
                    "useBatch": false
                },
                "dataSource": "oDataServiceName",
                "preload": true
            },
            "": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Request",
                    "json": true,
                    "defaultUpdateMethod": "PUT",
                    "useBatch": false
                },
                "dataSource": "oDataDefaultServiceName",
                "preload": true
            }

        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "rootView": {
            "viewName": "testApp.view.App",
            "type": "XML",
            "id": ""
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewPath": "testApp.view",
                "controlId": "app",
                "bypassed": {
                    "target": ["NotFound"]
                }
            },
            "routes": [{
                "name": "Tab_1",
                "pattern": "",
                "target": ["masterTarget", "Tab_1"]
            }, {
                "name": "Tab_2",
                "pattern": "Tab_2",
                "target": ["masterTarget", "Tab_2"]
            }],
            "targets": {
                "masterTarget": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "masterPages",
                    "viewId": "idMaster",
                    "viewName": "Master",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_1",
                    "viewName": "Tab_1",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_2": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_2",
                    "viewName": "Tab_2",
                    "viewLevel": 2,
                    "controlId": "Splitapp"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "webapp",
        "_version": "1.1.0"
    }
}

 

Preface – This post is part of the UI5 Programs series.

Introduction

Sometime in UI5 it is required to make a Master Detail Application, which looks something like this:

There are two ways in which we can achieve the above layout:

1. By using Fragments for each Master tab pages (with single controller)
2. By using Individual View for each Master tabs (with individual controller)

In case, you are planning for a very small App, then go with the first use case, else choose second one.

For the first use case, the navigation among tabs will work as mentioned below:

this.getView().byId("<ID of NavContainer>").to(this.getView().byId("<Page_ID of the tab>"));

In the above statement, we get the required Page ID (this page can have a fragment), and then open that page. All the pages are defined within single view. To ease the coding and visibility of the code, we divide each page into fragments. Still in case of a big project, this is not a recommended way.

For the second use case, we will divide the code into given three steps:

1. App View Code: The App is defined as SplitApp here.
2. Manifest Code: The Navigation is divided among Master and Detail using target
3. Master Section: This section contains a tnt:NavigationList which has the same key as the name of the views

Changes in App View File

When we create a blank UI5 Application, it is create with a blank view and controller. It is important to create a App view on top of these Individual views for pages, so that it can act as a root view for others. SAP recommends to have this file as a root view.
For our requirement, the App will have following code:

App.view.xml

<mvc:View controllerName="testApp.controller.App" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
    <Shell id="shell">
        <App id="app"> 
            <pages>
                <!--Split App to Enable Master Detail Configuration-->
                <SplitApp id="Splitapp" mode="ShowHideMode"></SplitApp>
            </pages>
        </App>
    </Shell>
</mvc:View>

 

App.controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("testApp.controller.App", {
        onInit: function () {
 
        }
    });
});

 

Creation of Master View

Till now, we have created a Split App. Now it is required to create a separate Master Page which will just hold all the navigation tabs as shown below:

Master.view.xml

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="testApp.controller.Master"
    xmlns:html="http://www.w3.org/1999/xhtml" xmlns:tnt="sap.tnt">
    <Page id="master" title="{i18n>Actions}" backgroundDesign="List" class="sapUiStdPage">
        <!--All Master Pane tabs are maintained here-->
        <tnt:NavigationList id="navigationList" selectedKey="Tab_1" itemSelect="onListItemPress">
            <tnt:NavigationListItem id="MasterData" text="{i18n>Tab_1}" icon="sap-icon://org-chart">
                <tnt:NavigationListItem text="{i18n>Tab_1_1}" key="Tab_1_1"/>
                <tnt:NavigationListItem text="{i18n>Tab_1_2}" key="Tab_1_2"/>
                <tnt:NavigationListItem text="{i18n>Tab_1_3}" id="subItemThree" key="Tab_1_3"/>
            </tnt:NavigationListItem>
            <tnt:NavigationListItem text="{i18n>Tab_2}" icon="sap-icon://leads" key="Tab_2"></tnt:NavigationListItem>
        </tnt:NavigationList>
    </Page>
</mvc:View>

 

Master.controller.js

/**
 * onListItemPress is invoked on click from UI. 
 * Input: Key Maintained in Master View
 * Output: Navigation to the Master Page
 */
onListItemPress: function (oEvent) {
    var that = this;
    var sTimeOutErrorMsg = this.oBundle.getText("TimeOutError");
    var sError;
    var sToPageId = oEvent.getParameter("item").getKey();
    if (sToPageId) {
        try {
            this.oRouter.navTo(sToPageId);
        } catch (err) {
            if (err.statusCode === 401) {
                sError = sTimeOutErrorMsg;
            } else {
                sError = err.error;
            }
            MessageBox.error(sError);
            window.location.href = '../logout';
        }
    }
}

 

Changes in Manifest File

Changes in Manifest File

Here we will do two changes:

1. Add Routes: It specifies the pattern, name of the route and the target. The pattern specifies what will be visible after the url. Like in below example, pattern will look something like this in URL: test.com/worklist

"routes": [{
    "pattern": "Tab_1",
    "name": "Tab_1",
    "target": [
        "masterTarget",
        "Tab_1"
    ]
}]

 

Sometimes, it is required to pass some values too during navigation, from one page to other. In that case, the routes looks something like below. Here we are passing an ID during navigation. This ID looks something like this in URL: www.test.com/overview/{Id}

In case, passed ID is 10, then the URL will look like this: www.test.com/overview/10

"routes": [{
    "pattern": "Tab_1/{Id}",
    "name": "Tab_1",
    "target": [
        "masterTarget"
                         "Tab_1"
    ]
}]

 

*Note: As you can see, we have added double targets here. The first one keeps the Master View always open and the second one will navigate to a view called Tab_1.

2. Add Targets: Once we have added routes, each route point to a particular target. This target actually points out the right file for navigation. Here we will use the first route that we discussed above to reach our target view. The viewName mentioned below is actually pointing to the view that will open up, after navigation is performed. For both of the above routes, targets will look something like below, only the name, title and IDs will change.

"targets": {
                        "masterTarget": {
        "viewType": "XML",
        "transition": "slide",
        "controlAggregation": "masterPages",
        "viewId": "idMaster",
        "viewName": "Master",
        "viewLevel": 1,
        "controlId": "Splitapp"
    },
                "Tab_1": {
        "viewType": "XML",
        "transition": "slide",
        "controlAggregation": "detailPages",
        "viewId": "idTab_1",
        "viewName": "Tab_1",
        "viewLevel": 2,
        "controlId": "Splitapp"
    }
}

 

Note: In the above targets, the controlAggregation decides which type of page it is. Also the controlId remains same for all the targets.

Full Manifest Code

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "testApp",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "oDataService": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "testApp.i18n.i18n"
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            },
            "ODataModel": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Request",
                    "json": true,
                    "defaultUpdateMethod": "PUT",
                    "useBatch": false
                },
                "dataSource": "oDataService",
                "preload": true
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "rootView": {
            "viewName": "testApp.view.App",
            "type": "XML",
            "id": ""
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewPath": "testApp.view",
                "controlId": "app",
                "bypassed": {
                    "target": ["NotFound"]
                }
            },
            "routes": [{
                "name": "Tab_1",
                "pattern": "",
                "target": ["masterTarget", "Tab_1"]
            }, {
                "name": "Tab_2",
                "pattern": "Tab_2",
                "target": ["masterTarget", "Tab_2"]
            }],
            "targets": {
                "masterTarget": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "masterPages",
                    "viewId": "idMaster",
                    "viewName": "Master",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_1",
                    "viewName": "Tab_1",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_2": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_2",
                    "viewName": "Tab_2",
                    "viewLevel": 2,
                    "controlId": "Splitapp"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "webapp",
        "_version": "1.1.0"
    }
}

 

 

Preface – This post is part of the UI5 Programs series.

File Routing in UI5

SAP UI5 uses Routing concept to navigate among views (Pages). To enable routing, one needs to do specific changes in Manifest file and then perform navigation wherever required. In this article we will show both of these changes in detail.

How to perform File Routing in UI5

Changes in Manifest File

The very first change is required in Manifest file, here we will do two changes:

1. Add Routes: It specifies the pattern, name of the route and the target. The pattern specifies what will be visible after the url. Like in below example, pattern will look something like this in URL: test.com/worklist

"routes": [{
    "pattern": "worklist",
    "name": "worklist",
    "target": [
        "worklist"
    ]
}]

Sometimes, it is required to pass some values too during navigation, from one page to other. In that case, the routes looks something like below. Here we are passing an ID during navigation. This ID looks something like this in URL: www.test.com/overview/{Id}

In case, passed ID is 10, then the URL will look like this: www.test.com/overview/10

"routes": [{
    "pattern": "overview/{Id}",
    "name": "overView",
    "target": [
        "overView"
    ]
}]

2. Add Targets: Once we have added routes, each route point to a particular target. This target actually points out the right file for navigation. Here we will use the first route that we discussed above to reach our target view. The viewName mentioned below is actually pointing to the view that will open up, after navigation is performed. For both of the above routes, targets will look something like below, only the name, title and IDs will change.

"targets": {
    "worklist": {
        "viewName": "Worklist",
        "viewId": "worklist",
        "viewLevel": 1,
        "title": "{i18n>worklistViewTitle}"
    } }

Changes in Controller File

Once we have specified all our routes and target based on correct views, then we can perform navigation on click of a button or any elements. For that, on click a function is called from view. That function loads all the routing related configuration and then uses the name of the route to perform navigation.

For both of the above discussed routes, following are the codes;

1. Simple Navigation
   

   // Get Router Info
   this.oRouter = this.getOwnerComponent().getRouter();
   this.oRouter.navTo("worklist ");
   

2. Navigation with a value
   

   // Get Router Info
   this.oRouter = this.getOwnerComponent().getRouter();
   this.oRouter navTo("overview ", {
           Id: <to what ever value you might have fetched for navigation>
       });
   

Full Manifest Example

{
        "_version": "1.7.0",
        "sap.app": {
            "id": "${project.artifactId}",
            "type": "application",
            "resources": "resources.json",
            "i18n": "i18n/i18n.properties",
            "title": "{{appTitle}}",
            "description": "{{appDescription}}",
            "applicationVersion": {
                "version": "${project.version}"
            },
            "ach": "set-ach",
            "dataSources": {
                "mainService": {
                    "uri": <your_service>;v=0002/",
                    "type": "OData",
                    "settings": {
                        "odataVersion": "2.0",
                        "localUri": "localService/metadata.xml",
                        "annotations": [
                            "annotation0"
                        ]
                    }
                },
                "annotation0": {
                    "type": "ODataAnnotation",
                    "uri": "annotations/annotation0.xml",
                    "settings": {
                        "localUri": "annotations/annotation0.xml"
                    }
                }
            },
            "sourceTemplate": {
                "id": "sap.ui.ui5-template-plugin.1worklist",
                "version": "1.58.1"
            }
        },
        "sap.fiori": {
            "registrationIds": [],
            "archeType": "transactional"
        },
        "sap.ui": {
            "technology": "UI5",
            "icons": {
                "icon": "sap-icon://task",
                "favIcon": "",
                "phone": "",
                "phone@2": "",
                "tablet": "",
                "tablet@2": ""
            },
            "deviceTypes": {
                "desktop": true,
                "tablet": true,
                "phone": true
            }
        },
        "sap.ui5": {
            "resources": {
                "js": [],
                "css": [{
                    "uri": "css/style.css"
                }]
            },
            "rootView": {
                "viewName": "Test.TestApp.view.App",
                "type": "XML",
                "async": true,
                "id": "app"
            },
            "dependencies": {
                "minUI5Version": "${sap.ui5.dist.version}",
                "libs": {
                    "sap.ui.core": {},
                    "sap.m": {},
                    "sap.f": {},
                    "sap.ushell": {},
                    "sap.collaboration": {
                        "lazy": true
                    }
                }
            },
            "contentDensities": {
                "compact": true,
                "cozy": true
            },
            "models": {
                "i18n": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "settings": {
                        "bundleName": "Test.TestApp.i18n.i18n"
                    }
                },
                "": {
                    "dataSource": "mainService",
                    "settings": {
                        "defaultCountMode": "InlineRepeat"
                    },
                    "preload": false
                },
                "@i18n": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "uri": "i18n/i18n.properties"
                }
            },
            "services": {
                "ShellUIService": {
                    "factoryName": "sap.ushell.ui5service.ShellUIService",
                    "lazy": false,
                    "settings": {
                        "setTitle": "auto"
                    }
                }
            },
            "routing": {
                "config": {
                    "routerClass": "sap.m.routing.Router",
                    "viewType": "XML",
                    "viewPath": "Test.TestApp.view",
                    "controlId": "app",
                    "controlAggregation": "pages",
                    "bypassed": {
                        "target": [
                            "notFound"
                        ]
                    },
                    "async": true
                },
                "routes": [{
                    "pattern": "",
                    "name": "worklist",
                    "target": [
                        "worklist"
                    ]
                }, {
                    "pattern": "CustomerDataEntitySet/{objectId}",
                    "name": "object",
                    "target": [
                        "object"
                    ]
                }, {
                    "pattern": "CaseOverView/{ID1}/{ID2}",
                    "name": "overView",
                    "target": [
                        "overView"
                    ]
                }],
                "targets": {
                    "worklist": {
                        "viewName": "Worklist",
                        "viewId": "worklist",
                        "viewLevel": 1,
                        "title": "{i18n>worklistViewTitle}"
                    },
                    "object": {
                        "viewName": "Object",
                        "viewId": "object",
                        "viewLevel": 2,
                        "title": "{i18n>objectViewTitle}"
                    },
                    "overView": {
                        "viewName": "Overview",
                        "viewLevel": 3
                    },
                    "objectNotFound": {
                        "viewName": "ObjectNotFound",
                        "viewId": "objectNotFound"
                    },
                    "notFound": {
                        "viewName": "NotFound",
                        "viewId": "notFound"
                    },
                    "Overview": {
                        "viewType": "XML",
                        "viewName": "Overview"
                    }
                }
            }
        }
    }

 

Explanation

• In case you plan to have the very first view like worklist above, then you don’t need to provide any pattern. It will open with initial URL of the website.
• In case you want to fix what view will open initially, then you can define that as rootView above. In this particular case we initially launch the whole site via an App. Thus App is set as a root view. This App ultimately loads the views within itself.