Skip to Content

Build a Barcode Scanner Flavor with SAP Screen Personas

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.

10 Comments
You must be Logged on to comment or reply to a post.
  •  

    Thank you Daniel for Sharing your experience with Screen personas and showing one of it's capabilities. We tried Scanning barcode using the scripting , followed the same Instructions as it is in this Blog but for some reason in the scanning results we are getting "null . Any idea of what can be root cause ?

  • Hello,

     

    I have also same problem..Scanning result is always "null"

     

    Any idea how to resolve it ?

     

    I create it step by step by your manual

     

    Thanks a lot!

  • Hi Daniel

    Your code worked perfectly for me. Thanks.

    I used the following code its exactly same but with some additional comma removed from last but one line.

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

    When I launch my FIORI client app with the standalone PERSONAS URL

    http://XXXX.com:8000/sap/bc/se/m/?~transaction=Z123&sap-personas-flavor=005056900BCF1ED8A2B13F090F5E7C2B

    it works fine.

    However when I embed it in a FIORI tile and when displaying on the FIORI launch pad with a FIORI URL,

    http://XXXXX.com:8000/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=999&sap-language=EN

    the FIORI client app launches the launch pad and when we click on the tile which has the link to the Personas Flavor

    http://XXXXX.com:8000/sap/bc/ui5_ui5/ui2/ushell/shells/abap/FioriLaunchpad.html?sap-client=999&sap-language=EN#Action-GenericConfig?~transaction=Z123&sap-personas-flavor=005056900BCF1ED8A2B13F090F5E7C2B

    the app loads well but the scanning functionality does not work as it cannot find the plugins, I tried the cordova approach in Personas script, even that fails to access the plugins, I am not sure why it cannot access the plugins when its embedded as a tile. 

    Please kindly advise if there is anything I am missing.

    With Kind Regards

    Guru

     

     

  •  

    Hi,

    We have the similar situation like Guru. (Barcode scanned working with the standalone PERSONAS URL, but not in a FIORI tile )

    I am wondering if there is a solution for it?

    Deborah

  • Hi,

    I have written line by line code as stated above but somehow getting some error. like jQuery not defines, sap not defined , alert not defined. Can someone please help.

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

     

    Thanks

    Pooja

  • Hi Daniel Sanchez

    I’ve tried your instruction. However, the library sap.ndc.BarcodeScanner.js is failed to load,

    this is the error: “/sap/bc/personas3/ui5/resources/sap/ndc/BarcodeScanner.js: 404 – File not found”

    Regards,

    Tri

  • Hi Daniel,

    Thank you for sharing this info. It made my day happy. Simply followed your steps and copied code. The result is on the screen.

    Thank you,

    Balaji P.

  • Hi Daniel,

    I was able to reach till the last step but in the end, when I gave the URL and it asked for a Passcode to create and after that it keeps buffering and finally the page fails to load anything.

    Did you face such issue? Will be great help if I can work this out for my organization.

     

    Regards
    Shiva Ganesh