Generate Barcode using third-party API | Zoho Creator Academy

Generate Barcode using third-party API

Notes
Note: This tutorial explains a workaround to generate barcodes/QR codes. However, you can now directly achieve this using the Barcode/QR Code field in Zoho Creator. You can now directly add and set up the field from the form builder, making the below process much simpler.

Requirement  

Generate a barcode based on the provided IMEI (International Mobile Equipment Identity) number using a third-party API.

Use Case  

A mobile store uses an order management application to manage their orders. The application has a form called Product. When a product is added to the form, corresponding barcode will automatically be generated and uploaded in the IMEI_barcode field. The store can later stick the barcode on the mobile phone for quick retrieval for the IMEI number.

Steps to follow  

1. Create a form with the following details: 
Form
Form Link Name
Field Type
Field Name
Field Link Name
Product
Product
Dropdown
  • Apple
  • Samsung
  • One Plus
Product Group
 
Product_Group
Single line
Product Name
Product_Name
Single line
IMEI Number
IMEI_Number
Image
IMEI Barcode*
IMEI_Barcode
notes
Add Notes
 
 
* Check the Link browse option from field properties of the Image field. This allows you to directly add the URL of the barcode image you want to upload.
 
2. Create a workflow with the following details.
 
4. Click Add New Action and add the following snippet:
  1. //Construct an image HTML tag that invokes the third-party API to generate barcode and upload the link to the Image field
  2. input.IMEI_Barcode = "<img src=\"http://bwipjs-api.metafloor.com/?bcid=code128&text=" + input.IMEI_Number + "\"/>";

  4. // Show the preview of the generated code using notes field
  5. input.notes = "Generated Code:<br><br><div><img src='http://bwipjs-api.metafloor.com/?bcid=code128&text=" + input.IMEI_Number + "'/><br/></div>";

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:
  1. input.notes = "Generated Code:<br><br><div><img src='https://qrcode.tec-it.com/API/QRCode?data=" + input.IMEI_Number + "' width='150'/><br/></div>";
  2. input.imageField = "<img src='https://qrcode.tec-it.com/API/QRCode?data=" + input.IMEI_Number + "'/>";