sap.ui.define([
"sap/m/routing/Router"
], function (Router) {
"use strict";
return Router.extend("be.canoas.fiori.RoutingPathObfuscation.util.customRouter", {
// redefine constructor, to initialize private attribute(s)
constructor: function (oRoutes, oConfig, oOwner, oTargetsConfig) {
// initialize private attribute _bRoutingPathObfuscation
// _bRoutingPathObfuscation is only to be used in demo app (not needed in real project)
this.setRoutingPathObfuscation(false);
// define _obfuscate/_deobfuscate methods as properties of private attribute _oParameterHandler
this._oParameterHandler = {};
this._oParameterHandler._obfuscate = function (sString) {
if (!this._bState) {
this._bState = true;
// base64 encoding; alternative: perform ajax call to achieve stronger encryption
return window.btoa(sString);
} else {
return sString;
}
};
this._oParameterHandler._deobfuscate = function (sString) {
if (this._bState) {
this._bState = false;
// base64 decoding; alternative: perform ajax call to achieve stronger decryption
return window.atob(sString);
} else {
return sString;
}
};
// call super
Router.prototype.constructor.call(this, oRoutes, oConfig, oOwner, oTargetsConfig);
},
// getter method for private attribute _bRoutingPathObfuscation
// _bRoutingPathObfuscation is only to be used in demo app (not needed in real project)
getRoutingPathObfuscation: function () {
return this._bRoutingPathObfuscation;
},
// setter method for private attribute _bRoutingPathObfuscation
// _bRoutingPathObfuscation is only to be used in demo app (not needed in real project)
setRoutingPathObfuscation: function (bState) {
this._bRoutingPathObfuscation = bState;
},
// method to process parameters
_processParameters: function (oParameters, sFunctionName) {
// _bRoutingPathObfuscation is only to be used in demo app (not needed in real project)
if (this._bRoutingPathObfuscation) {
for (var name in oParameters) {
if ({}.hasOwnProperty.call(oParameters, name)) {
oParameters[name] = this._oParameterHandler[sFunctionName](oParameters[name]);
}
}
}
return oParameters;
},
// redefine navTo method, for outbound part of navigation
navTo: function (sName, oParameters, bReplace) {
// obfuscate parameters
var oChangedParameters = this._processParameters(oParameters, "_obfuscate");
// call super
Router.prototype.navTo.call(this, sName, oChangedParameters, bReplace);
},
// redefine fireBeforeRouteMatched method, for inbound part of navigation
// (called only if target needs to be loaded and placed)
fireBeforeRouteMatched: function (oEventData) {
// deobfuscate parameters
var oChangedParameters = this._processParameters(oEventData.arguments, "_deobfuscate");
oEventData.arguments = oChangedParameters;
// call super
Router.prototype.fireBeforeRouteMatched.call(this, oEventData);
},
// redefine fireRouteMatched method, for inbound part of navigation
// (called in any case if a route matches the URL hash)
fireRouteMatched: function (oEventData) {
// deobfuscate parameters
var oChangedParameters = this._processParameters(oEventData.arguments, "_deobfuscate");
oEventData.arguments = oChangedParameters;
// call super
Router.prototype.fireRouteMatched.call(this, oEventData);
}
// don't need to redefine fireRoutePatternMatched method, as it is expected to always be triggered
// after either fireBeforeRouteMatched or fireRouteMatched, which means that at this point
// deobfuscation of parameters has already occurred
// don't need to redefine fireBypassed method, as it is not expected to be triggered
// after a call of navTo method, but rather after a manual change of the URL hash (without a
// route being associated to it)
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("be.canoas.fiori.RoutingPathObfuscation.controller.ListView", {
onInit: function () {
this.getView().addEventDelegate({
onBeforeShow: jQuery.proxy(function (oEvent) {
this.onBeforeShow(oEvent);
}, this)
});
},
onBeforeShow: function (oEvent) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
var bRoutingPathObfuscation = oRouter.getRoutingPathObfuscation();
this.getView().byId("idRpoFlag").setState(bRoutingPathObfuscation);
},
handleListItemPress: function (evt) {
var sSelectedName = evt.getSource().getBindingContext().getProperty("Name");
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("appDetail", { // route name: appDetail
"nameParameter": sSelectedName
});
},
handleSwitchChange: function (evt) {
// update router private attribute _bRoutingPathObfuscation
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.setRoutingPathObfuscation(evt.getSource().getState());
}
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("be.canoas.fiori.RoutingPathObfuscation.controller.DetailView", {
onInit: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("appDetail").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched: function (oEvent) {
// extract "nameParameter" parameter from arguments array
var oArgs = oEvent.getParameter("arguments");
var sCompanyName = oArgs["nameParameter"];
var oView = this.getView();
var oModelData = oView.getModel().getData();
var sEntitySetName = "Companies";
var sEntityKeyName = "Name";
// get index of selected key (applies only to local JSON model; in oData, binding paths already use keys, and not indexes)
var sIndex = this._getIndexByKey(sCompanyName, oModelData, sEntitySetName, sEntityKeyName);
oView.bindElement({
path: "/" + sEntitySetName + "/" + sIndex,
events: {
dataRequested: function () {
oView.setBusy(true);
},
dataReceived: function () {
oView.setBusy(false);
}
}
});
},
// https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable
resolve: function (path, obj) {
return path.split("/").reduce(function (prev, curr) {
return prev ? prev[curr] : null;
}, obj || self);
},
// get index of selected key (applies only to local JSON model; in oData, binding paths already use keys, and not indexes)
_getIndexByKey: function (sKeyValue, oModelData, sArrayPath, sKeyPropertyName) {
var oArray = this.resolve(sArrayPath, oModelData);
var sCurrentKeyPath = "";
var sCurrentKeyValue = "";
for (var i in oArray) {
sCurrentKeyPath = sArrayPath + "/" + i.toString() + "/" + sKeyPropertyName;
sCurrentKeyValue = this.resolve(sCurrentKeyPath, oModelData);
if (sCurrentKeyValue === sKeyValue) {
// we have located index with key value
return i.toString();
}
}
// nothing found
return null;
},
handleNavButtonPress: function (evt) {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("appHome"); // route name: appHome
}
});
});
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
},
createDefaultModelFromLocalJSON: function () {
// local JSON model, for testing
var oModelData = {
"Companies": [{
"Name": "Amazon",
"Description": "An American electronic commerce and cloud computing company based in Seattle, Washington, that was founded by Jeff Bezos on July 5, 1994."
}, {
"Name": "Facebook",
"Description": "An American online social media and social networking service company based in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg."
}, {
"Name": "Google",
"Description": "An American multinational technology company that specializes in Internet-related services and products, which include online advertising technologies, search engine, cloud computing, software, and hardware. Google was founded in 1998 by Larry Page and Sergey Brin."
}, {
"Name": "Microsoft",
"Description": "An American multinational technology company with headquarters in Redmond, Washington. It develops, manufactures, licenses, supports and sells computer software, consumer electronics, personal computers, and related services. Microsoft was founded by Bill Gates and Paul Allen on April 4, 1975."
}, {
"Name": "SAP",
"Description": "A German-based European multinational software corporation that makes enterprise software to manage business operations and customer relations. SAP was founded in June 1972 by Klaus Tschira, Hasso Plattner, Dietmar Hopp and Hans-Werner Hector. The company is headquartered in Walldorf, Baden-Württemberg, Germany with regional offices in 180 countries."
}]
};
var oModel = new JSONModel();
oModel.setDefaultBindingMode("OneWay");
oModel.setData(oModelData);
return oModel;
}
};
});
/* Enter your custom styles here */
title=Routing path obfuscation
appTitle=RoutingPathObfuscation
appDescription=App Description
DetailTitle=Details
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="be.canoas.fiori.RoutingPathObfuscation.controller.DetailView">
<App>
<pages>
<Page title="{i18n>DetailTitle}" showNavButton="true" navButtonPress="handleNavButtonPress">
<content>
<ObjectHeader title="{Name}" number="" numberUnit="" intro="" introActive="true" titleActive="true">
<attributes>
<ObjectAttribute text="{Description}"/>
</attributes>
</ObjectHeader>
</content>
</Page>
</pages>
</App>
</mvc:View>
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="be.canoas.fiori.RoutingPathObfuscation.controller.ListView" displayBlock="true">
<App id="idAppControl">
<pages>
<Page title="{i18n>title}">
<content>
<List items="{/Companies}">
<StandardListItem title="{Name}" type="Active" press="handleListItemPress"/>
</List>
<sap.ui.layout.form:Form editable="true" xmlns:sap.ui.layout.form="sap.ui.layout.form">
<sap.ui.layout.form:formContainers>
<sap.ui.layout.form:FormContainer title="">
<sap.ui.layout.form:formElements>
<sap.ui.layout.form:FormElement label="Obfuscate routing path">
<sap.ui.layout.form:fields>
<Switch id="idRpoFlag" customTextOn="On" customTextOff="Off" change="handleSwitchChange"/>
</sap.ui.layout.form:fields>
</sap.ui.layout.form:FormElement>
</sap.ui.layout.form:formElements>
</sap.ui.layout.form:FormContainer>
</sap.ui.layout.form:formContainers>
<sap.ui.layout.form:layout>
<sap.ui.layout.form:ResponsiveGridLayout/>
</sap.ui.layout.form:layout>
</sap.ui.layout.form:Form>
</content>
</Page>
</pages>
</App>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"be/canoas/fiori/RoutingPathObfuscation/model/models",
"be/canoas/fiori/RoutingPathObfuscation/util/customRouter"
], function (UIComponent, Device, models, customRouter) {
"use strict";
return UIComponent.extend("be.canoas.fiori.RoutingPathObfuscation.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function, instantiating customRouter object
UIComponent.prototype.init.apply(this, arguments);
// enable routing, using customRouter
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
// set local JSON model as default model
this.setModel(models.createDefaultModelFromLocalJSON());
}
});
});
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>RoutingPathObfuscation</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"be.canoas.fiori.RoutingPathObfuscation": "./"}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "be.canoas.fiori.RoutingPathObfuscation"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
{
"_version": "1.8.0",
"sap.app": {
"id": "be.canoas.fiori.RoutingPathObfuscation",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"rootView": {
"viewName": "be.canoas.fiori.RoutingPathObfuscation.view.ListView",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "be.canoas.fiori.RoutingPathObfuscation.i18n.i18n"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "be.canoas.fiori.RoutingPathObfuscation.util.customRouter",
"viewType": "XML",
"async": true,
"viewPath": "be.canoas.fiori.RoutingPathObfuscation.view",
"controlAggregation": "pages",
"controlId": "idAppControl",
"clearControlAggregation": false
},
"routes": [
{
"pattern": "CompanyList",
"name": "appHome",
"target": "list"
},
{
"pattern": "Company/{nameParameter}",
"name": "appDetail",
"target": "detail"
}
],
"targets": {
"list": {
"viewType": "XML",
"viewName": "ListView",
"viewLevel": 1
},
"detail": {
"viewType": "XML",
"viewName": "DetailView",
"viewLevel": 2
}
}
}
},
"sap.platform.hcp": {
"uri": "webapp",
"_version": "1.1.0"
}
}