{"id":4667,"date":"2015-07-10T01:41:03","date_gmt":"2015-07-10T01:41:03","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4667"},"modified":"2015-07-11T00:41:17","modified_gmt":"2015-07-11T00:41:17","slug":"barcode-decoder-in-salesforce1-very-fast-and-simple","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-decoder-in-salesforce1-very-fast-and-simple\/","title":{"rendered":"Javascript based Barcode decoder in Salesforce1 – Very fast and Simple"},"content":{"rendered":"

Recently there was a need for Barcode<\/a>\u00a0decoder \u00a0component in Salesforce1 using Javascript. I tried few\u00a0libraries like JOB <\/a>(Javascript Only Barcodereader), this post<\/a> from Bob Buzzard (it uses JOB library) and\u00a0QuaggaJS<\/a>. And after comparing all these, decided to go with quaggajs library because of its speed. Bob Buzzard already wrote very good article on JOB library<\/a> and I would suggest to try that code as well. You can find same code rewritten for lightning component here<\/a>.<\/p>\n

Quaggajs <\/a>supports Code 128<\/a>,\u00a0Code 39<\/a>,\u00a0Code 39 VIN,\u00a0EAN,\u00a0EAN-8<\/a>,\u00a0UPC<\/a>,\u00a0UPC-E and\u00a0Codabar<\/a> format of Barcode.<\/p>\n

To run this code you will need 3 static resources in your visualforce page :<\/p>\n

    \n
  1. JQuery<\/li>\n
  2. Bootstrap (totally optional and can be safely ignored) and<\/li>\n
  3. QuaggaJs<\/a><\/li>\n<\/ol>\n

    If you want, below\u00a0images can be used to try this code. Also, please note – If you are using mobile camera to capture barcode, make sure image is white else this library will not work.<\/p>\n

    \"Barcode<\/a>
    Barcode decoder sample in Salesforce 1<\/figcaption><\/figure>\n
    \"Barcode<\/a>
    Barcode decoder sample in Salesforce 1<\/figcaption><\/figure>\n

    Create a Visualforce page with below code,\u00a0To keep code very simple, I am only displaying extracted code from Barcode on Visualforce page.<\/p>\n

    \r\n<apex:page showheader="false" sidebar="false" standardStylesheets="false" >\r\n    <apex:includeScript value="{!$Resource.JQuery}"\/>\r\n    <apex:includeScript value="{!$Resource.Barcode_quaggaJS}"\/>\r\n    <apex:stylesheet value="{!URLFOR($Resource.BootStrap3, 'bootstrap-3.1.1-dist\/css\/bootstrap.min.css')}"\/>\r\n\r\n    <div class="container">\r\n         <img width="320" height="240" src="" id="picturePreview" style="border:1px solid black" \/> <br \/>\r\n        <input id="barcodeFileInput" type="file" accept="image\/*;capture=camera" \/> <br \/>\r\n        <button id="startDecode" class="btn btn-primary">Decode<\/button>\r\n        <div id="codeResult"> <\/div>\r\n    <\/div>\r\n\r\n<script type="text\/javascript">\r\n    $(function() {\r\n        var App = {\r\n            init: function() {\r\n                App.attachListeners();\r\n            } ,\r\n            debugApp : function(msg){\r\n                    if(true)\r\n                    {\r\n                     debugCon = $("#codeResult");\r\n                     debugCon.text(debugCon.text()+" , "+msg) ;\r\n                    }\r\n                },\r\n            attachListeners: function() {\r\n                var self = this; \r\n\r\n                $("#startDecode").on("click", function(e) {\r\n                    var input = $("#barcodeFileInput");\r\n                    if (input[0].files && input[0].files.length) {\r\n                        var tmpImgURL = URL.createObjectURL(input[0].files[0]) ;\r\n                        App.decode(tmpImgURL);\r\n                    }\r\n                }); \r\n\r\n                $("#barcodeFileInput").on("change",function(e){\r\n                    $("#codeResult").text(" ");\r\n                    var files = e.target.files ;\r\n                        if (files && files.length > 0) {\r\n                            file = files[0];\r\n                            try {\r\n                                var URL = window.URL || window.webkitURL;\r\n                                var imgURL = URL.createObjectURL(file);\r\n                                $("#picturePreview").attr("src",imgURL);\r\n                            }\r\n                            catch (e) {\r\n                                try {\r\n                                    var fileReader = new FileReader();\r\n                                    fileReader.onload = function (event) {\r\n                                     $("#picturePreview").attr("src",event.target.result);\r\n                                    };\r\n                                    fileReader.readAsDataURL(file);\r\n                                }\r\n                                catch (e) {\r\n                                    $("#codeResult").text("Fail !!! createObjectURL and FileReader are not supported by browser");\r\n                                }\r\n                            }\r\n                        }\r\n                });\r\n\r\n            },\r\n            detachListeners: function() {\r\n                $("#startDecode").off("click");\r\n            },\r\n\r\n            decode: function(src) {\r\n                Quagga.decodeSingle(\r\n                    {\r\n                      inputStream: {\r\n                        size: 640,\r\n                        singleChannel: false\r\n                      },\r\n                      locator: {\r\n                        patchSize: "large",\r\n                        halfSample: false\r\n                      },\r\n                      decoder: {\r\n                        readers: ["upc_reader", "code_128_reader", "code_39_reader", "code_39_vin_reader", "ean_8_reader", "ean_reader", "upc_e_reader", "codabar_reader"]\r\n                    },\r\n                      locate: true,\r\n                      src: src\r\n                    },\r\n                 function(result){\r\n                      if(result && result.codeResult && result.codeResult.code)\r\n                      {\r\n                        $("#codeResult").text('Code - '+result.codeResult.code);\r\n                      }else{\r\n                        $("#codeResult").text("unable to read");\r\n                      }\r\n                    });\r\n            }\r\n        };\r\n        App.init();\r\n    });\r\n<\/script>\r\n\r\n<\/apex:page>\r\n<\/pre>\n
    Make sure this visualforce is marked to use in Salesforce1 mobile application. After this, Create a Visualforce tab and in Mobile Navigation, enable it for Salesforce 1.<\/p>\n
     <\/p>\n
    \"Barcode<\/a>
    Barcode decoder in Salesforce 1 mobile<\/figcaption><\/figure>\n
    \"Barcode<\/a>
    Barcode decoder in Salesforce 1 mobile Output<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
    Very fast and Simple Barcode decoder in Salesforce1 using quaggaJS javascript library<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[126,175],"class_list":["post-4667","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-javascript","tag-salesforce-1"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4683,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-scanner-component-in-salesforce-lightning-video\/","url_meta":{"origin":4667,"position":0},"title":"Barcode scanner component in Salesforce lightning – Video","author":"Jitendra","date":"July 11, 2015","format":false,"excerpt":"Recording of Live code - Creating Barcode decoder component using Javascripyt library in Salesforce Lightning","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode Scanner Lightning App","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Barcode-Scanner-Lightning-App.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":4667,"position":1},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7587,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/scan-barcode-in-lwc-natively\/","url_meta":{"origin":4667,"position":2},"title":"Scan Barcode in LWC Natively","author":"Jitendra","date":"June 6, 2022","format":false,"excerpt":"Demo & Source code of using Barcode API in Salesforce LWC","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode in LWC","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":4667,"position":3},"title":"Salesforce interview question related to Lightning framework – Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":4667,"position":4},"title":"Salesforce Lightning Component – Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":4667,"position":5},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4667","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4667"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4667\/revisions"}],"predecessor-version":[{"id":4687,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4667\/revisions\/4687"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4667"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4667"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4667"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}