UI Extensions in OPInt – A New World of Possibilities
Albert Einstein once quoted –
To raise new possibilities and to regard old problems from new angles requires creative imagination and marks real advancement
That’s exactly what the UI extensions in OPInt 1.0 SPS12 gives the end users – new world of possibilities for an old problem.
Thanks to the responsive UI design of SAP Operational Process Intelligence, the line-of-business users and process workers were able to gain immediate visibility into their end-to-end processes in both desktop and tablets. They were also gaining insights into their key performance indicators visually, using the generated charts & graphs which required zero coding.
But what if the users want to add a visualization (like geo maps) which is not a default option with SAP OPInt? What if they want to show additional functionality in the SAP OPInt dashboard to enhance the user experience? What if they want to navigate to other application(s) from SAP OPInt? If you had these questions in your mind, then there is an answer to it – OPInt UI Extensions. Starting with SAP OPInt 1.0 SPS12 the customers and partners can adapt SAP OPInt workspace (a.k.a. space.me) for their specific requirements – like adding buttons to perform custom actions, adding a new type of tile other than measures and indicators, changing the on-click behavior of any tile & navigating to a different app, etc.
What can be achieved in OPInt with UI extensions
Launch a custom app on click of a specific measure or indicator tile
New type of tile other than the standard measures and indicators
New tab in Instance Details for showing additional information
Add Buttons in Scenario Details for additional actions
In this first blog of a series, I would explain the concept of UI extensions in OPInt and the various artifacts in space.me you can extend. In the subsequent blogs I will explain in detail for each of the use cases on how do you extend OPInt.
How does OPInt UI extensions work
SAP OPInt uses extension capabilities provided by SAPUI5 to support customization in space.me. For details on SAPUI5 extensibility concepts refer the SAPUI5 Documentation on Extending Apps. To understand this blog series better, going through the SAPUI5 Component Documentation is recommended (but not mandatory) which explains the extension features supported by SAPUI5 in brief.
In concept, you don’t change the pre-delivered OPInt workspace (sap/opi/pv/workspace), but create a new custom workspace which extends (and for some use cases, copies) the OPInt workspace. In this custom workspace, you add additional features as required. This customized workspace becomes the start-up project and launches the OPInt workspace with the additional customizing configuration.
When the user tries to access the extended OPInt application via HTTP from his/her iPad or laptop, (for example /my/opi/workspace), the control reaches the index.html. Since the index.html is linked to your component which extends the OPInt’s component, the standard libraries are first loaded and then additional libraries are loaded (if you have used them in your component). The same happens when you extend OPInt’s specific view as well. In short, your custom application will have the exact same functionality of space.me together with the additional implementation you have performed in the controller or view.
Some of the possible UI extensions
|Scenario Home Page||Change onClick behavior of a Tile||End users could navigate to any App by clicking on specific tiles instead of the standard UI that comes with OPInt|
|Scenario Home Page||Add a new type of a Tile other than Measures and Indicators (blog coming soon)||You want to add a new tile type if the business users or the process owners want to represent information as a tile in space.me, which is neither a measure nor an indicator|
|Scenario Instance Details Page||Add custom Tabs to show additional information (blog coming soon)||If you want to show additional information in the scenario instance details page (example: additional information about a purchase order or embed a geo map to show where exactly the purchase order can be located during transit, etc.) then you can add a new tab to show the same.|
|Scenario Instance Details Page||Add custom actions to enable additional functionality||If you want to perform certain custom actions in the scenario instance details page then you can add a button to trigger the same.|