Skip to Content

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.

To report this post you need to login first.

5 Comments

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

  1. Former Member

     

    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 ?

    (0) 
  2. Tomas Vaclav

    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!

    (0) 
  3. Guru Prasad Karanam

    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

     

     

    (0) 
    1. Krists Magons

      Hi Guru,

      To use the bar-code scanner flavor in Launchpad please make sure that you set-up the Slipstream Engine target mapping and tiles according to the recommended approach:

      Target mapping: https://help.sap.com/viewer/89f7648246d148f1882a6011a43bc228/3.0.7/en-US/fe74ef30b6174b16ab0af2d5f507e3b1.html

      Tiles: https://help.sap.com/viewer/89f7648246d148f1882a6011a43bc228/3.0.7/en-US/0b5fce74b10f4f3fa12b2dfb3b71ceb9.html

      The embedded URL tile does not allow to access SAP Fiori client Cordova plugin features.

       

      Thanks,

      Krists

      (0) 

Leave a Reply