Barcode Generator

Audience: Low-code Engineers

Skill Prerequisites: Actions, Tokens, Forms

The Barcode Generator add-on creates barcode images from a value, such as an order number or product code, and reads barcodes with the user's camera. It adds one action and two form fields:

• The Generate Barcode action creates a barcode image on the server and saves it in a portal folder.
• The Barcode Generator field shows a barcode on a form and saves it as an image when the form is submitted.
• The Barcode Scanner field reads a barcode or QR code with the camera, or from an image file, and puts its value in the field.

note

This add-on is the DnnSharp.BarcodeGenerator package. It's installed separately and needs the BARCODE feature package in your license. The action and both fields need the same license. If it isn't licensed, the action fails with a not-licensed error. If you don't see the action or the fields, the add-on isn't installed.

Choosing an action

Action	What it does	Use it to
Generate Barcode	Creates a 1D barcode as a black and white JPEG, in types such as Code 128, EAN-13 and ITF-14, and returns its URLs, path and Base64 content in tokens.	Label orders, products, assets or shipping cartons for barcode scanners.

To encode URLs or longer text for phones to scan, use the QR Code add-on instead.

Barcode Generator field

The Barcode Generator field is in the Image category of the form builder. It draws the barcode in the browser when the form loads, and saves it as a PNG file when the form is submitted.

Setting	What it does
Barcode	The value to encode. Supports tokens. Default Example 1234.
Barcode Encoding	The barcode type: code128b, code128c, ean, upc, code39, itf14 or itf. Default code128b.
Barcode Width	The width of a single bar in pixels, not of the image. Default 2.
Barcode Height	The height of the bars in pixels. Default 100.
Show Text	Prints the value under the bars. On by default.
Text Alignment	Where the text goes: left, center or right.
Signature Name	The file name, without the extension. .png is added. If it's empty, a random name (a GUID) is used.
Upload to Folder	The portal folder to save the image in. It's created if it doesn't exist. If it's empty, the image is saved in Temp.

On submit, the field creates these tokens, where <FieldName> is the field's name without spaces:

Token	Contains
[<FieldName>:FileName]	The file name with the extension.
[<FieldName>:RelativeUrl]	The URL of the image, relative to the site.
[<FieldName>:AbsoluteUrl]	The full URL of the image.
[<FieldName>:PortalPath]	The folder and file name inside the portal.
[<FieldName>:FilePath]	The physical path on the server.
[<FieldName>:Base64]	The PNG image, Base64 encoded, without a data: prefix.

Things to know about the field:

• Fewer types than the action. The field only has the seven types above. For types such as code128, code93 or codabar, use Generate Barcode.
• The value is set when the form loads. Tokens in Barcode are replaced when the form is shown. The barcode doesn't change as the user fills in other fields. To encode a value the user enters, use the action on submit instead.
• Invalid values give no image. If the value doesn't fit the chosen type, no barcode is drawn and the tokens are empty.
• Existing files are replaced. A file with the same name in the folder is overwritten. Include something unique, such as an ID, in Signature Name.
• Slashes, spaces and colons in Signature Name become dashes (-).

Barcode Scanner field

The Barcode Scanner field is also in the Image category. It shows a read-only text box with two buttons:

• Scan opens the device camera and reads the first code it sees. The browser asks the user for permission to use the camera. If the camera supports it, a slider lets the user zoom.
• Upload lets the user pick an image file and reads a code from it.

The value it reads goes into the text box, and you use it as [<FieldName>] like any other field. The user can't type a value by hand.

Setting	What it does
Autoclick Button on Scan	A button on the form to click as soon as a code is read, for example to look up the scanned item. Leave it empty to let the user submit.

The field reads QR codes and the common 1D and 2D types, including Code 39, Code 93, Code 128, EAN-8, EAN-13, ITF, UPC-A, UPC-E, Codabar, Data Matrix, PDF 417 and Aztec.

Generating or scanning?

• To create a barcode from data you already have, use Generate Barcode in a form submit, workflow or API. The image is a JPEG.
• To show a barcode on a form and keep a copy of it, use the Barcode Generator field. The image is a PNG.
• To read a barcode, use the Barcode Scanner field. The action and the Barcode Generator field only create images.

To build documents that include the image, see the PDF Generator and Word add-ons. To resize it, see the Drawing add-on.

Revised 10/02/2026