Space.me UI Extensions: Pre-Requisite

Warning: This page contains code snippets and require the reader to have good understanding about the model-view-controller (MVC) architecture in SAPUI5.

This is part of the blog series which details about the possible UI extensions in SAP Operational Process Intelligence.

In the previous blog I explained in brief about how the UI extension will work (refer the following image). To create any such ‘extended’ space.me, you need to perform a pre-requisite which will be explained in this blog. At the end of the article you should have a custom space.me (for example, http(s)://host:port/my/opi/workspace). Once you have completed this pre-requisite, you can go ahead and perform any of the possible extensions.

Step 1 – Create a package where you would want the extended space.me:

In this example, I would want to create the extended space.me to be available as http(s)://host:port/my/opi/workspace. So I create the package structure as shown below

Note: I am using Web IDE (http(s)://host:port/sap/hana/ide/editor) to perform the operations, but you can use HANA Studio’s Development Perspective to do this as well.

Step 2 – Create .xsaccess file where you specify how you want to authorize users (form based authentication)

Create a new file on the package /my/opi/workspace/ and name it .xsaccess (note that this file has no name but only the extension) and paste the following piece of code:

{ "exposed": true,"authentication":{"method":"Form"},"prevent_xsrf" : true,"cache_control" : "no-cache, no-store" }

Note: The application-access file does not have a filename and has only the file extension .xsaccess

Step 3 – Create .xsapp file to mark the root folder of your extended application

Create a new (empty) file on the package /my/opi/workspace/ and name it .xsapp. You should see your package structure like this once you activate both the files.

Note: The application-descriptor file has no name and no content and has only the file extension .xsapp

Note: You would not be able to activate the .xsapp file if the parent (or any parent in package hierarchy) of the current package already has an .xsapp file. You can skip step 3 in such a case

Step 4: Create Component.js file

Create a file called Component.js under the package /my/opi/workspace/ and paste the following piece of code. Make sure you change the package from my.opi.workspace to your package name (if it is different)

jQuery.sap.declare("my.opi.workspace.Component");
jQuery.sap.require("sap.opi.pv.workspace.Component");
jQuery.sap.require("sap.opi.pv.workspace.ui.navigation.Routes");
jQuery.sap.require("sap.opi.pv.workspace.ui.navigation.RouteMatchedHandler");
jQuery.sap.require("sap.opi.pv.workspace.ui.shell.ShellConstants");
sap.opi.pv.workspace.Component.extend("my.opi.workspace.Component", {
    metadata : {
    }
});
function _getLoggedOnUserData() {
    var UserDataProvider = sap.opi.pv.workspace.ui.dataProvider.UserDataProvider;
    var userData = UserDataProvider.getLoggedOnUserData();
    return userData;
}
function _initialConfiguration(userData) {
    var ConfigurationUtil = sap.opi.pv.workspace.ui.utils.ConfigurationUtil;
    if (userData && !ConfigurationUtil.isLocalePassed()) {
        if (userData.locale) {
            sap.ui.getCore().getConfiguration().setLanguage(userData.locale);
        } else if (userData.requestLanguage) {
            sap.ui.getCore().getConfiguration().setLanguage(userData.requestLanguage);
        }
    }
    var styleSheetFilename = ConfigurationUtil.isHCBTheme() ? "style_hcb.css" : "style.css";
    jQuery.sap.includeStyleSheet("/sap/opi/pv/workspace/resources/styles/" + styleSheetFilename);
}
function _loadRequiredResources() {
    jQuery.sap.require("sap.opi.pv.workspace.ui.utils.ConfigurationUtil");
    jQuery.sap.require("sap.opi.pv.workspace.ui.dataProvider.UserDataProvider");
    jQuery.sap.require("jquery.sap.storage");
    jQuery.sap.require("sap.ui.core.Icon");
    jQuery.sap.require("sap.ui.core.routing.Router");
    jQuery.sap.require("sap.ui.core.routing.HashChanger");
    jQuery.sap.require("sap.opi.pv.workspace.filterParams");
}
my.opi.workspace.Component.prototype.initRouter = function() {
    var router = this.getRouter();
    var RouteMatchedHandler = sap.opi.pv.workspace.ui.navigation.RouteMatchedHandler;
    RouteMatchedHandler.initialize(router);
};
my.opi.workspace.Component.prototype.init = function() {
  sap.opi.pv.workspace.Component.prototype.init.apply(this, arguments);
};
my.opi.workspace.Component.prototype.onAfterRendering = function() {
    $("#loadingContainer").css("display", "none");
};

Step 5: Copy and modify OPInt space.me index.html file

Copy the file index.html from the package /sap/opi/pv/workspace/ to the package /my/opi/workspace/ and perform the following changes:

1. Line 134, perform the following change to point the script file location in sap.opi.pv.workspace.metadata

From

<script src="metadata/ProductMetadata.js"></script>

To

<script src="/sap/opi/pv/workspace/metadata/ProductMetadata.js"></script>

2. Line 145: Add the following code after resourceRoots : {

"my.opi.workspace" : "/my/opi/workspace/",

3. Line 172: Change the component name and id so that your component is used

From

var component = sap.ui.getCore().createComponent({
            name : "sap.opi.pv.workspace",
            id : "opintComponent"
});

To

  var component = sap.ui.getCore().createComponent({
       name : "my.opi.workspace",
       id : "opintComponent_ext"
  });

Step 6: Activate all the objects

Once you have performed all the above changes, activate all the objects. Your workspace package should look like this:

Step 7: Access the ‘custom’ space.me

Now, you should be able to able to access the OPInt workspace (vanilla space.me without any of your extensions) by accessing the URL http://<host:port>/my/opi/workspace

Disclaimer for OPInt Upgrade

 

The steps mention above is OPInt version specific. Hence, it is recommended to perform the pre-requisites after each OPInt upgrade.