(Windows only) Create a bridge event between a Cordova plugin and the Custom Fiori Client application to take advantage of the Fiori Client architecture on Windows.

Every bridge needs both a client and a server side, which inherit their behavior from the common-cordova-bridge-client and common-cordova-bridge-server.js files. You must reference these files before implementing a custom bridge for a Cordova plugin. You must inject the server side of the bridge into the webview and reference the client side from the index.html file, which is the entry point of the Cordova application.

The following is an example of the server-side code of the sample plugin:

//Define the namespace
if (typeof sap === 'undefined') {
	sap = {};
}
 
if (typeof sap.hello === 'undefined') {
	sap.hello = {};
}
 
//Create a helloEvent command which can be called from the webview
var helloCommand = new CordovaBridgeCommand('helloEvent');
//The remote content in the webview can call this function
sap.hello.sayHello = function (name,successCallback, errorCallback) {
	console.debug('sap.hello.sayHello');
	helloCommand.addQueryParameter({name});
	helloCommand.execute(successCallback, errorCallback);
};
 
onCordovaBridgeLoaded('sap.hello');

//The client side of the bridge subscribes to the webview navigation event

cordovaBridgeUtils.webView.addEventListener("MSWebViewFrameNavigationStarting", function (e) {
	var parameters = cordovaBridgeUtils.getUrlParameters(e.uri);
	//Check whether this bridge is called.
	if (parameters["EVENT"] == 'helloEvent') {
		//Check whether the required namespace is available
		if (sap.hello) {
			//Call the local function in the plugin on the client side with the received parameter
   			sap.hello.sayHello(parameters["name"], function (result) {
				var resultCallback = {};
				resultCallback.text = result;
				//The result is sent back to the server side of the bridge
				cordovaBridgeUtils.successEvent('helloCommand', resultCallback);
			}, function (error) {
				//The error is sent back to the server side of the bridge
				cordovaBridgeUtils.errorEvent('helloCommand', error);
			});
        	} else {
		//Namespace is not available so the server is not available
		cordovaBridgeUtils.errorEvent('helloEvent', { code: -99, message: "Feature has been invalidated" });
        }
    };
});

The following example shows how to inject the server side of the plugin into the webview of the Custom Fiori Client:

//Subscribe the content loaded event
webView.addEventListener("MSWebViewDOMContentLoaded", function (event) {
	// non-local-urls.
	var webView = document.getElementById('webView');

	//Inject the bridge scripts			
	webView.invokeScriptAsync("eval", injectBridgeIframe).start();
	webView.invokeScriptAsync("eval", injectBridgeShims).start();		
	console.log("Loaded Cordova API shims for url: " +event.uri);	
});

This code is already located at the SAP Fiori Client’s default.js file. This code is injected into every webview page to which the user navigates.. You can use the invokeScriptAsync function to inject the JavaScript code as a string into the webview’s DOM.

The following sample code displays the injected strings:

//Inject becon.html which is used for bridge communication. This is an empty html file.

var injectBridgeIframe =
	"var kapsel=document.createElement('iframe');" +
	"kapsel.setAttribute('style','width:1px;height:1px;display:none');" +
	"kapsel.setAttribute('id', 'eventBecon'); " +
	"kapsel.setAttribute('src', 'ms-appx-web:///www/becon.html');" +
	"try {" +
		"document.body.appendChild(kapsel); console.log ('IFrame added successfully');" +
	"} catch (e){" +
		"console.log ('ERROR ADDING IFRAME');" +
"}";
 
//Inject the server side of the bridges
var injectBridgeShims =
	"function addScript(fileName) {" +
		"var serverScript=document.createElement('script');" +
		"serverScript.setAttribute('type', 'text/javascript');" +
		"serverScript.setAttribute('src', 'ms-appx-web:///www/js/' + fileName);" +
		"try {" +
			"document.body.appendChild(serverScript); console.log ('Script ' + fileName + ' added successfully');" +
		"}catch(e){" +
			"console.log ('ERROR: adding script: ' + fileName + ', error: ' + e.message);" +
		"}" +
	"}" +
	"addScript('common-cordova-bridge-server.js');" +
	"addScript('sap-sample-bridge-server.js');";

The first string, injectBridgeIframe creates an iframe in the DOM which connects the two sides of the bridge. The second string references the server side of the bridge from the webview’s DOM, demonstrating how the remote page's DOM accesses local JavaScript files. The code is located at the default.js. The custom bridge developer should extend the injectBridgeShim variable with its own server bridge in the default.js and add a script reference to the client-side of the bridge in the index.htmlfile.