Hi,

In this article, I will share a code snippet on how to scan the barcode using the service portal page from the ServiceNow Classic mobile app.

1.Create a Service portal widget

Client Script: The below code will scan the barcode using Cabrillo API.

function ($scope, spUtil, cabrillo, $timeout) {

  $scope.$on('scan_barcode', function(evt) {
    $timeout(function() {
      angular.element('#scan_barcode').trigger('click');
    }, 100);
  });

  $scope.getBarcode = function() {
    cabrillo.camera.getBarcode().then(function(value) {
      cabrillo.log('Received barcode value: ' + value);
      $scope.data.barcode = value;
      spUtil.update($scope);
    }, function(err) {
      $scope.data.barcode = "IT1011717";
      spUtil.update($scope);

    });
  };
}

Body HTML template: this will create a button to open the camera to scan.

<div>
  <div style="padding-bottom: 16px"><button id="scan_barcode" class="btn btn-primary btn-lg btn-block"  ng-click="getBarcode()">${Scan Barcode}</button></div>
  <h1>{{data.barcode}}</h1>
</div>

2.create a service portal page and include above-created widget on this page.

page id : barcode_scan

1. Create a Classic mobile module.

Steps to create Classic Mobile Module.

in the application navigator, goto >System Classic Mobile UI>Classic Mobile Modules>new

create Classic mobile as below with the Application menu, path, and Path Relative To Root.

Application Menu: Service Portal

Path: $sp.do?id=scan_barcode (this is the portal page id which we have created above*)*

* if the Path Relative To Root checkbox not selected module will not be available.

4. Open the module in the Mobile as mentioned below screens.

next screen

next screen

Clicking on the Scan barcode Button opens the camera and scan and focus on any barcode and it will scan the barcode and print the scanned number below the Scan Barcode button.

Let me know if you have any questions in the comments below.

Mark the article as helpful and bookmark if you found it useful.