Automatically populate data by scanning barcode
Requirement
Scan a barcode to fetch the required details stored in another app.
Use Case
A mobile store uses an order management application to manage their orders. When a product is added to the form, a corresponding barcode is automatically generated and uploaded along with the product details.
The store uses another application for mobile phone servicing to scan the same barcode sticker on the mobile phone for quick retrieval of the product details.
Steps to follow
1. Lets us first build an order management application. Create a form with the following details.
details.
Form | Form Link Name | Field Type | Field Name | Field Link Name |
Product | Product | Dropdown
| Product Group
| Product_Group |
Single line | Product Name | Product_Name | ||
Number | IMEI Number | IMEI_Number | ||
Image | IMEI Barcode* | IMEI_Barcode | ||
Add Notes | Add Notes | plain |
2. Check the Link option under Browse from field properties of the image field. This allows you to directly add the URL of the barcode image you want to upload.
3. Create a workflow with the following details.
4. Click Add New Action and add the following snippet:
- //Construct an image HTML tag that invokes the third-party API to generate barcode and upload the link to the Image field
- input.IMEI_Barcode = "<img src=\"http://bwipjs-api.metafloor.com/?bcid=code128&text=" + input.IMEI_Number + "\"/>";
- // Show the preview of the generated code using notes field
- input.notes = "Generated Code:<br><br><div><img src='http://bwipjs-api.metafloor.com/?bcid=code128&text=" + input.IMEI_Number + "'/><br/></div>";
5. Add a few records to this app.
6. Now let's build another app named Mobile Phone Servicing. Create a form with the following details.
Form | Form Link Name | Field Type | Field Name | Field Link Name |
Product | Product | Number | IMEI | IMEI |
|
| Dropdown
| Product Group
| Product_Group |
Single line | Product Name | Product_Name | ||
Multi Line | Issue | Issue |
6. Enable QR code and Barcode scanning for IMEI field.
Now let's create a connection that will be used later in this tutorial.
7. Navigate to Microservices and click + Create New to create a new connection.
8. Select Zoho OAuth
9.Select the required scopes for Creator, fill in other details, and click Create and Authorize.
Ensure that the connection is enabled for this app.
10. Create a workflow with the following details.
11. Click Add New Action and save the following script in the deluge editor.
- //fetch data using integration task and replace the parameters according to your application
- mobileData = zoho.creator.getRecords("<app_owner>","order-management","All_Products","IMEI_Number==" + input.IMEI,1,200,"creator");
- record = mobileData.get("data");
- input.Product_Name = record.getJSON("Product_Name");
- input.Product_Group = record.getJSON("Product_Group");
See how it works
Points to note
- This tutorial uses an open-source barcode generator API to achieve the desired result. You can use any API you wish to generate the barcode.
- The same procedure can also be used to generate any coded image. For example, use the below script to generate QR code instead of barcode:
- input.notes = "Generated Code:<br><br><div><img src='https://qrcode.tec-it.com/API/QRCode?data=" + input.IMEI_Number + "' width='150'/><br/></div>";
- input.imageField = "<img src='https://qrcode.tec-it.com/API/QRCode?data=" + input.IMEI_Number + "'/>";
- Data can also be fetched from other apps using functions API.