Warning: This page contains code snippets and require the reader to have good understanding about the model-view-controller (MVC) architecture in SAPUI5.
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.