Warning: This page contains code snippets and expects the reader to have good understanding about the model-view-controller (MVC) architecture in SAPUI5.
In the previous blog, i have explained the concept of UI extensions in OPInt. Here, I will explain how we can implement the UI extensions for Scenario Overview Page. The below image is the scenario overview page of a particular business scenario, where the end users are presented with all the information of a business scenario like open instances, open instance by phases, various measures & indicators.
The possible extensions in this page are (but not limited to) add a completely new tile and change on-click behavior of any tile. Depending on your use case, you can completely replace the scenario overview page’s controller.js (for example, if you want to add a new tile category) or extending the controller (change the on-click behavior).
What to Expect
In this blog I will explain how you can change the on-click behavior for a particular measure tile (Total Open Jobs), so that it opens up a totally different UI5 app (Tasks Dashboard). Since we need to change the on-click behavior I will show how to extend the scenario overview page controller to override the on-click function. Note that the same can be implemented by completely replacing the controller, but it is much simpler to extend for this particular user case.
Steps to change the on-click behavior using Controller Extensions
Pre-Requisite:
1. Complete the pre-requisite before you proceed with extension of scenario overview page.
2. The page you want to navigate from OPInt is already available. Make sure that the root (DOM) element of the ‘view’ is of type sap.m.Page
Step 1: Create required HANA package
Create a new package under the package my.opi.workspace (as available from the pre-requisite blog) and name it as ui. Create sub-packages pages, scenarioOverview as shown below:
Step 2: Check availability of target UI5 App
In this example, I would want to navigate from the scenario overview page to a custom UI5 App. For the same, I have created a view & controller called ‘TaskDashboard’ which would load my graph and is available in the package /my/opi/workspace/ui/pages/graph/ (as mentioned in the step 2 of the above pre-requisite).
Step 3: Create view controller
Create a new file under the package /my/opi/workspace/ui/pages/scenarioOverview and name it as ScenarioOverview.controller.js and add the following piece of code:
sap.ui.controller("my.opi.workspace.ui.pages.scenarioOverview.ScenarioOverview", {
});
Step 4: Identify the method to override
This view controller will contain all methods which will override the controller methods of OPInt’s scenario overview page. Please refer to the original view controller (with the same name) under the package /sap/opi/pv/workspace/ui/pages/scenarioOverview for the list of methods which you can override.
In this use case, I wanted to navigate to a different page when I click on a particular measure. Hence the method I would override will be navigateToMeasureDetails. Similarly, if you want to navigate to another page on click of an indicator (with targets) then you would want to override the method navigateToIndicatorDetails.
Step 5: Copy the implementation for the method navigateToMeasureDetails from the original controller.
Open the file ScenarioOverView.controller.js under the package /sap/opi/pv/workspace/ui/pages/scenarioOverview, and copy the definition of the method navigateToMeasureDetails & its implementation and paste it in the file ScenarioOverView.controller.js under /my/opi/workspace/ui/pages/scenarioOverview.
Now your controller implementation should looks like below:
Warning: Any implementation for overriding a SAPUI5 component or controller will completely override the standard methods. Which means the original method will NOT be called during the runtime. So make sure that you always copy the source code from the original file and then make ‘extra’ modifications.
Step 6: Identify measure ID
As you can see, the line no 8 (in the above screen shot) is responsible to navigate to the measure details page. Here you need to add your logic so that when only a particular measure is clicked, you navigate to a different page. Every measure in OPInt has a unique ID and you can find it in the URL when you click on a measure tile and navigate to the measure details page as shown below. Based on this unique measure id, you can choose to perform different actions for different measures (or even indicators).
Step 7: Understand the routing concept in OPInt.
In OPInt, every page is deep linked so that when a user navigates to a certain page (for example measure details page as above), the URL in the browser automatically reflect the selected page. The user can copy this URL and paste it in a new tab and the same view will be opened. This deep linked in-app navigation uses the routing mechanism in SAPUI5. So, while overriding the method navigateToMeasureDetails and navigate to a custom app, one need to enable the routing as well in order to navigate to a different page.
Step 8: Implementing the logic to override the onClick action.
You can see in the below code snippet that the navigation happens as usual (to the standard measure details page) for all measures except for the one. We could implement a new method called navigateToJobs which would be called for a specific measure with ID bc48e2c970204f6b925f5f518856a381.
Step 9: Routing to the custom app.
Copy paste the below code to the method navigateToJobs to choose the route to be used.
var jobsComponentId = sap.ui.core.Component.getOwnerIdFor(this.getView());
var jobsComponent = sap.ui.component(jobsComponentId);
var routeParameters = $.extend(true, {}, this.pageParameters);
// navigate to a route with name "jobs" for example
jobsComponent.getRouter().navTo("jobs", routeParameters);
Note that the route name ‘jobs’ is not defined yet and doesn’t have info about the custom app which has be opened. We will do this in the following step.
Your controller should look like this by now.
Step 10: Register the controller extension in the Component.js
To enable the scenario overview page to consider the controller extension (to merge the scenario overview page controller & the corresponding local controller), we need to add the following piece of code in the Component.js file (which is available in the package /my/opi/workspace/). You would already have the Component.extend declaration, so you need to add the customizing inside the ‘metadata’ section:
customizing : {
"sap.ui.controllerExtensions": {
"sap.opi.pv.workspace.ui.pages.scenarioOverview.ScenarioOverview": {
controllerName: "my.opi.workspace.ui.pages.scenarioOverview.ScenarioOverview"
}
}
}
The first few lines of Component.js should look like this
The above piece of code defines that the controller for the view scenarioOverview under sap.opi.pv.workspace.ui.pages.scenarioOverview will be extended by the controller of the view ScenarioOverview under the package /my/opi/workspace/ui/pages/scenarioOverview/
Step 11: Register the routing extension in the Component.js.
Add the following piece of code to the same metadata to register a route with name ‘jobs’ (which was used in the scenario overview controller)
routing : {
routes : [ {
pattern : "scenarios/{scenarioDefinitionId}/Jobs",
name : "jobs",
view : "my.opi.workspace.ui.pages.graph.TaskDashboard",
viewLevel : 1
} ]
},
Pattern: This defines the changes which will be made in the URL when the custom page is called
Name: Route name as used in the scenario overview controller
View: Fully qualified name of the view to which the navigation should happen
ViewLevel: Self explanatory
The first few lines of the Component.js should look like this by now:
Step 12: Activate and enjoy :smile:
Activate all the artefacts and access your new custom OPInt workspace (http(s)://host:port/my/opi/workspace)
Disclaimer for OPInt Upgrade
Since we copy the standard code and extend, it is recommended to check for any new changes in the original files and make the corresponsing changes after each OPInt upgrade.
- SAP Managed Tags:
2 Comments
