Introduction

Over the years, I’ve seen quite a few use cases for using SAP transactions on mobile devices. And with the recent release of the Slipstream Engine in SAP Screen Personas 3.0 SP06, these use cases may now be supported. That is, we can build a flavor that can be used by an end user on a mobile device.

One use case is leveraging the camera on a mobile device to scan a barcode and then have the result entered into an input field on the screen. We can do this by building a Slipstream Engine flavor that uses the native device capabilities via the SAPUI5 API and the SAP Fiori Client.

Step-by-Step Instructions

This guide involves the following major steps:

1. Create a Flavor
2. Implement the Barcode Scanner Scripts
3. Prepare the URL for the Slipstream Engine
4. Launch the Barcode Scanner App on the Mobile Device

Note: This exercise requires the SAP Fiori Client app, which can be downloaded from the iOS app store or the Android app store.

Create a Flavor in SAP Screen Personas

1. Create a flavor in the Easy Access screen by opening the flavor menu and then clicking the Create New Flavor button (plus button).

2. Enter a flavor name and a description.

3. In the flavor editor, click just to the right of the left-most scroll bar.

4. In the toolbar, click the Hide button.

5. In the toolbar, switch to the Insert tab.

6. Insert a new script button, a label, and an input box, as below:

7. In the flavor editor, create and attach the new script to the Launch Scanner button.

8. Name the script “launchScanner”.

9. Save the flavor and then exit the flavor editor.

Implement Barcode Scanner Scripts

1. Open the script editor.

2. In the script that was created earlier, delete line number 2.

3. Insert the code below:

jQuery.sap.require("sap.ndc.BarcodeScanner");
sap.ndc.BarcodeScanner.scan(
function(mResult) {
session.utils.put("scanvalue", mResult.text);
session.utils.executeScriptAsync("");
},
function(Error) {
alert("Scanning failed: " + Error);
}
);

4. Click the Save button.

5. Create a new script and call it “copyScanResult”.

6. Insert the code below:

.text = session.utils.get("scanvalue");

7. Place the mouse curser before the first character in the line of code and then use the use the Object Selector to select the input field that was created earlier.

8. Copy the GUID into the code by click the button as in the screen shot.

9. Copy the GUID of the script itself and then click the Save button.

10. Switch to the launchScanner script.

11. Paste the script GUID in between the “” of the session session.utils.executeScriptAsync(“”); code line.

12. Click the Save button and then exit the script editor.

Preparing the URL for Slipstream Engine

1. Copy the URL to the flavor.

Example: http://ims.saplabs.com:50017/sap/bc/personas?~transaction=SMEN&sap-personas-flavor=005056840F9E1EE88B

2. Replace “personas” with “se/m”.

Example: http://ims.saplabs.com:50017/sap/bc/se/m?~transaction=SMEN&sap-personas-flavor=005056840F9E1EE88B

This URL will be used in the SAP Fiori Client.

Launch the Barcode Scanner App on the Mobile Device

1. Open the SAP Fiori Client.
2. Enter the URL to the flavor and then press the OK button.
3. Set a passcode.
4. Click the Continue button.
5. Log into the flavor.
6. Click the Launch Scanner button.
7. Allow access to the camera, if necessary.
8. Scan a barcode.

Result:

Conclusion

The implementation is fairly straight forward, and it can be adapted to other transactions where a user can input data from a barcode into the system; for example, MI04.

About the Author

Daniel Sanchez is a User Experience Strategy & Technologies consultant at SAP and is based in Palo Alto, California.

Disclaimer: The information in this article is as up-to-date as it could be on the date that the article was last updated. The author’s opinions are his own.