Registration

Dear SAP Community Member,
In order to fully benefit from what the SAP Community has to offer, please register at:
http://scn.sap.com
Thank you,
The SAP Community team.
Skip to end of metadata
Go to start of metadata

SAP Screen Personas


 

Scripting: Building flavors with Barcode scanning functionality

SAP SCREEN PERSONAS KNOWLEDGE BASE - by Vandana Deep , Regina Sheynblat

Overview

In SAP Screen Personas 3.0 SP06, we introduced the SAP Screen Personas Slipstream Engine. One of the biggest advantages of Slipstream Engine is that it allows for the creation of flavors that can run on mobile devices.

We are often asked how a user can access native device capabilities, such as a camera, GPS, calendar, or contacts from within their flavors.

This article describes how we can access a device’s camera and use it to read a barcode with a simple script. 

Flavors built for Slipstream Engine can be run in the SAP Fiori Client application, which is a native application runtime available for SAP Fiori on Android and iOS devices. The Fiori Client application is built using the open source Apache Cordova framework and provides JavaScript interfaces to the native components on devices, allowing a flavor developer to define scripts that access native device functions. 

Barcode scanning script

Let’s use the example of a sales order dashboard, where the user scans a barcode for a material to get more details on the material number.

As mentioned previously, we will accept the user input using the phone camera for scanning the barcode. 

Once the material is selected (the barcode is scanned), the user can click on the Check Material Details button to launch transaction MM03. This will pre-populate the transaction with the material number scanned earlier. 

Let's take a look at the script we need to create for the Scan button.

 

OnScan
function scanSuccessCallback(result) {
	if (!result.cancelled) {
		session.utils.put("scanvalue", result.text);
		// This is called asynchronously. So the setText call is executed too late in ScriptEngine. 
		// It is already after ClientSideScriptEngine executing set property update for all the controls.
		// So we use a 2nd script call to pick up async property update.
		// execute copyScannedMaterial script  
		session.utils.executeScriptAsync("wnd[0]/scrptPersonas_005056BB59E71EE883F1F58C2D21613F");
	} else {
		session.utils.alert("Last scan cancelled");
	}
}
function scanErrorCallback(error) {
  	session.utils.alert("Scanning failed");
}
if (cordova) {
	cordova.plugins.barcodeScanner.scan(scanSuccessCallback.bind(this), scanErrorCallback);
}
else {
	session.utils.alert("Native API access not supported");
}

OnScan script does the following: 

- Checks if the variable - Cordova is defined, which is only in the case where the Slipstream engine flavor is running in the Fiori Client app.   

- if defined, it calls the scan method for the barcodeScanner object which expects the following 2 inputs: 

 - Success callback function (in our case scanSuccessCallback())

 - Failure callback function   (in our case scanErrorCallback())

The Cordova API is using callbacks to notify the Slipstream Engine when a scan result is available. This asynchronous callback is not in sync with the screen update logic, therefore, manipulating the session e.g. setting the value of a text field will not directly update the screen but will only happen on the next regular screen update. To make sure that the scan results are shown correctly, we recommend to store them in the local session variable with session.put and then execute a different script that reads it from there and writes it into the text field. This call sequence synchronizes the asynchronous Cordova callbacks.

copyScannedMaterial
var scanMaterialID;
scanMaterialID = session.utils.get("scanvalue");
session.findById("wnd[0]/usr/txtPersonas_151839573533732").text = scanMaterialID

You are now ready to test the flavor using SAP Fiori Client application from your mobile device.