Barcode Widget

Use this widget on the Form to generate a barcode.

Last published at: February 10th, 2025

Description:

This step generates a variety of barcodes for the item details provided.

 

Inputs

  • FormID - name of widget generated by FlowWright (read-only field)
  • Barcode Text - Provide sample barcode text here
  • Select barcode type - Select any one barcode type from the drop-down list here
  • Text location - Select the text location to be placed from the drop-down list here
  • Barcode Height - Provide the required barcode height in pixels
  • Barcode Width - Provide the required barcode width in pixels
  • Hide - Select the checkbox to Hide (tick mark)
  • Save button - Save the input values
  • Delete button - Remove this form widget from the designer page
  • Close button - Close the input popup window  
 

  

Design:

 

 

Example:

Let’s build and execute the “BarcodeDef” example.  

  • Create a new form definition called “BarCodeDef.”
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a “BarCode” and “Submit form” widget to the canvas
  • Double-click on the widget and configure the “Settings” properties. Provide a name to the control. Provide the text to convert to barcode. Select the barcode type from the drop-down list. Select the text location to print - above, below, or none. Provide the pixel height and width for the barcode control (or drag the edges to the required size on the canvas). Select the checkbox to hide the control during runtime.  

 

  • Navigate to the UI menu and Preview the form. The widget will generate a barcode like the graphic below.

 

  • Save the change. Navigate to Run - Form Instances - Create a new form instance for the above definition and Edit. The form renders the text information as a barcode. 

 

Definition Sample:

You may download the sample definition(s) from the link here and later import it (drag-drop) to your FlowWright Process Definition (XML file) or Form Definition (HTML file) page. 

NOTE: Please verify and complete the process steps for any missing configurations, such as file path references and database connections after import. Then, save the definition to confirm the changes. 

Click here to download the sample file.