{"id":25988,"date":"2020-12-10T12:31:08","date_gmt":"2020-12-10T12:31:08","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=25988"},"modified":"2020-12-10T12:31:08","modified_gmt":"2020-12-10T12:31:08","slug":"using-barcode-or-qr-code-scanner-control-in-custom-html-page-in-resco-mobile-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/12\/using-barcode-or-qr-code-scanner-control-in-custom-html-page-in-resco-mobile-app\/","title":{"rendered":"Using Barcode or QR Code Scanner Control in Custom HTML Page in Resco Mobile App"},"content":{"rendered":"

Introduction<\/h2>\n

Recently we had a business requirement where we needed to scan the barcode\/QR Code of the Customer Asset<\/strong> entity record so it can show its information on the HTML page on the home screen of the Resco Mobile App. To achieve this, we followed the below steps:<\/p>\n

1. We developed an HTML Page with Javascript using the JSBridge reference file and added the following code to it.<\/p>\n

Code Snippet:<\/strong><\/p>\n

Html:<\/strong><\/p>\n

<div>
\n<label id=”lblHeading” class=”heading”> Please click below button for using barcode \/ QR code scanner<\/label><\/p>\n

<br \/><br \/><\/p>\n

<img id=”leftTagScanner” onclick=”openBarcodeScanner(this);” class=”scan-icon” src=”Images\/scan.png” \/>
\n<\/div><\/p><\/blockquote>\n

 <\/p>\n

Javascript:<\/strong><\/p>\n

openBarcodeScanner = function (ctrl) {<\/p>\n

\/\/\/ <summary><\/p>\n

\/\/\/ This function is used for opening barcode\/qrcode scanner to scan barcode\/qrcode details<\/p>\n

\/\/\/<param>ctrl<\/param><\/p>\n

\/\/\/ <\/summary><\/p>\n

var functionName = “openBarcodeScanner: “;<\/p>\n

try {<\/p>\n

\/\/Validate control<\/p>\n

if (isValid(ctrl)) {<\/p>\n

\/\/Open Barcode Scanner<\/p>\n

MobileCRM.Platform.scanBarCode(<\/p>\n

function (result) {<\/p>\n

if (isValid(result)) {<\/p>\n

\/\/Populate retrieved Barcode\/QRcode data<\/p>\n

MobileCRM.bridge.alert(“Retrieved Information: ” + result);<\/p>\n

}<\/p>\n

},<\/p>\n

function (e) {<\/p>\n

MobileCRM.bridge.alert(“Error: ” + functionName + e.message);<\/p>\n

});<\/p>\n

}<\/p>\n

} catch (e) {<\/p>\n

MobileCRM.bridge.alert(“Error: ” + functionName + e.message);<\/p>\n

}<\/p>\n

}<\/p><\/blockquote>\n

We have used the \u201cMobileCRM.Platform.scanBarCode()\u201c JSBridge function for using Barcode\/QR code Scanner control from custom html page of Reco Mobile App.
\n
\nNote: The \u201cresult\u201d parameter gets stored with the \u201cbarcode data\u201d in string format and the \u201cisValid()\u201d function is used for validation purposes only. You can use different validations in your code instead of using the \u201cisValid()\u201d function.<\/em><\/strong><\/p>\n

2. Then we have added this \u201cHTML\u201d file (with \u201cJavaScript\u201d code) in the \u201cIframe\u201d of the Home Page <\/strong>to show a custom HTML Page on the home screen of the Resco Mobile App and published the Resco Project.<\/p>\n

Please refer to the below screenshots,<\/p>\n

\"Using<\/a><\/p>\n

3. We synced the Resco Mobile App with the Resco Project, navigated to the \u201cCustom Scanner\u201d Menu, and clicked on the \u201cBarcode Scan Button\u201d. It opened a \u201cScanning Window\u201d on the Resco Mobile App.<\/p>\n

Please refer to the below screenshot,
\n\"Using<\/a>\"Using<\/a><\/p>\n

4. After scanning the \u201cBarcode\u201d, it retrieved the data from that \u201cBarcode\u201d in the \u201cresult\u201d parameter. The data that was retrieved i.e. Barcode Details was in string format.<\/p>\n

Please refer to the below screenshot,<\/p>\n

\"Using<\/a><\/p>\n

5. Finally, we used this retrieved data for displaying information on the Custom HTML Page.<\/p>\n

Conclusion<\/h2>\n

We can use Barcode\/QRcode Scanner control in custom HTML pages, this will save the time of technicians for manually filling data on the form.<\/p>\n

\"Kanban<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction Recently we had a business requirement where we needed to scan the barcode\/QR Code of the Customer Asset entity record so it can show its information on the HTML page on the home screen of the Resco Mobile App. To achieve this, we followed the below steps: 1. We developed an HTML Page with\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,18,19,24,48],"tags":[193,545,592,1440,1445,1446,1448,1450],"class_list":["post-25988","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-dynamics-crm","category-dynamics-crm-2016","category-resco-mobile-crm","tag-barcode-scanner-control-dynamics-365","tag-dynamics-365-crm","tag-dynamics-crm","tag-resco-app","tag-resco-mobile-app","tag-resco-mobile-app-dynamics-365-crm","tag-resco-mobile-crm-app","tag-resco-mobile-dynamics-crm-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/25988","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=25988"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/25988\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=25988"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=25988"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=25988"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}