Extending apps for QR codes

When configuring Quick Response (QR) codes with multiple values to use with a mobile app, you can scan items that have QR codes. For example, when you use the Cycle Counts app, you can count inventory items by scanning the QR code of the item.

About this task

To scan QR codes, you create an event handler to identify the specific values in the QR code. You then specify the event handler in the app.xml file for the app to trigger the event when a QR code is scanned

Procedure

  1. Create the event handler in a JavaScript file.
    1. Create a JavaScript file and add it to the MaximoAnywhere\apps\app_name\common\js\custom\handler directory. If the handler folder does not already exist, create it to complete the path for the JavaScript file.
      The name of the folder and the JavaScript file must match the name that is applied to the class attribute of the event handler in the app.xml file.
      For example, if you name the JavaScript file ScanParserHandler.js, then the class attribute in the app.xml file must be custom.handlers.ScanParserHandler.
    2. Create the event handler code to the JavaScript file.
    For example, to add the event handler code for parsing QR codes for the Technician app, create the ScanParserHandler.js file in the MaximoAnywhere\apps\WorkExecution\common\js\application\custom\handler directory. Add the JavaScript code.
    /*JavaScript content from js/custom/handlers/ScanParserHandler.js in the folder common */
    
    define("custom/handlers/ScanParserHandler", 
    		[ "dojo/_base/declare",
      		"platform/handlers/_ApplicationHandlerBase"],
    function(declare, ApplicationHandlerBase) {
    	  return declare( ApplicationHandlerBase, {
    
    		  parseQRCode : function(/*JSONObject*/scanContext) {
    				/*
    				 scanContext should contain:
    				 {"scanResult" : BarcodeScannerResult,
    				  "receivingControl" : _ControlBase
    				 }
    				 scanResult is the result object that is returned from the code scanner.
    				 receivingControl is the control to receive the value. 
         		    Typically, the FindByScan control is a list or a text control.
    				*/
    			var result = scanContext.scanResult;
    			
    				/*
            If a scan is a QR code, the value is expected to be a list 
    				of values that is delimited by new-line and
    				the value that is returned to be the first one.
            */
    				var values = result.text.split('\n');
    				result.text = values[0]; 
           //Need to set the value back on the scan result object to be used by the platform.
    			
    		}
    	
    	});
    });
  2. In the app.xml file, add the event handler.
    1. Add an <eventHandlers> element to the <app> element.
    2. Add a child element that is called <eventHandler> and specify parsescan as the event attribute.
    3. Specify the class attribute that matches the name and location of the JavaScript file.
      For example, if you name the JavaScript file ScanParserHandler.js, then the class attribute in the app.xml file must be custom.handlers.ScanParserHandler.
    4. Add the method attribute that is specified in the JavaScript file.
    For example, to trigger the event when a QR code is scanned in the Technician app, add the event handler to the app.xml file in the MaximoAnywhere\apps\WorkExecution\artifact directory.
    <app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    	xsi:noNamespaceSchemaLocation="../../../build/app.xsd"
    	logLevel="2" requiredRole="ANYWHERE_TECHNICIAN">
    
    			<eventHandlers>
    					<eventHandler event="parsescan" class="custom.handlers.ScanParserHandler"
    			 		method="parseQRCode"/>
    			</eventHandlers>
  3. Save your changes and preview the updated mobile app in a mobile browser simulator.
  4. Build and deploy the app to the server.