Skip to Content
Author's profile photo Daniel Sanchez

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.

Assigned tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      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 ?

      Author's profile photo Tomas Vaclav
      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!

      Author's profile photo Daniel Sanchez
      Daniel Sanchez
      Blog Post Author

      Hi Tomas,

      Remove the comma in line 10 and then try again.

      Author's profile photo Guru Prasad Karanam
      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

       

       

      Author's profile photo Krists Magons
      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

      Author's profile photo Deborah Chen
      Deborah Chen

       

      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

      Author's profile photo Pooja Mittal
      Pooja Mittal

      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

      Author's profile photo Minh Tri Le
      Minh Tri Le

      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

      Author's profile photo Balaji Peethani
      Balaji Peethani

      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.

      Author's profile photo Siva Kottana
      Siva Kottana

      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

      Author's profile photo Olivier LAURENT
      Olivier LAURENT

      Hello

      I have an error message: "Error during script execution:
      jQuery is not defined "

      Can you please help me?

      I am not under Fiori but personas.

      I manage to make the message disappear when I go CTRL + ALT + P to open the blue banner of SAP Screen Personas.

      Here is my code:

       

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

      Thanks for your help

      Olivier