Step by step - Learn how to use callas productscallas pdfToolboxPlace contentPlace barcode: Using an HTML-template for an extended configuration

Place barcode: Using an HTML-template for an extended configuration

It is possible to use many more parameters when placing barcodes with pdfToolbox (and not just the ones in the Fixup).

To keep the user interface straight forward, the number of possible settings for the more than 100 different barcodes we support are available when using HTML-based template positioning of content.

Placing a "Code 39" barcode: simplified example

You first need to setup a new Fixup based on “Place content on page” Fixup type.
How to set up a Fixup like this is explained very well in this article.

Using an HTML template in order to place a barcode, you will have to set up the HTML templates folder.
Click on 'Open folder with configuration files' in the Folder dropdown of the Fixup and once you have the defined the folder and file structure for HTML, styles and scripts, you can use this template in your 'Place content' Fixup.

In order to place a barcode as in this example, the configuration files are set up under 'Place barcode with dynamically updated content' folder under HTML templates.

The folder 'Place barcode with dynamically updated content' contains the obligatory index.html, the scripts folder containing JavaScript files, the styles folder for CSS files.

The index.html as in the code below has the body section as the most interesting and important part. Alongwith the width, height and the type of barcode, it has some additional parameters.

<html>
<head>
	<meta charset='utf-8'>
	<link rel="stylesheet" href="styles/styles.css"  type="text/css"/>
	<script type="text/javascript" src="callas_tmp/calsDocInfo.js"></script>
	<script type="text/javascript" src="scripts/jquery-min.js"></script>
	<script type="text/javascript" src="scripts/script.js"></script>
</head>
	
<body>
	<object id="id_barcode" class="barcode" type="application/barcode" style="width:50mm; height:10mm;">
		<param name="type" value="Code 39 Full ASCII">
		<param id="id_barcodedata" name="data" value="default">
		<param name="quietzonebottom" value="2">
		<param name="quietzonetop" value="2">
		<param name="quietzoneleft" value="2">
		<param name="quietzoneright" value="2">
		<param name="quietzoneunit" value="mm">
		<param name="textplacement" value="none">
	</object>
</body>
</html>
Click to copy

To define the type of barcode that you want to place, you can select one from over 100 types as defined here. Our example above says '<param name="type" value="Code 39 Full ASCII">'

Other parameters like 'quietzonebottom', 'quietzonetop' and tens of more settings can be defined in the index.html and are explained in full detail here.

Depending on the placing parameters you selected in the pdfToolbox dialog (bottom left, top right, middle, etc. as well as frames of reference like CropBox, TrimBox, etc.), the "Code 39" barcode will be added to the  PDF on running the Fixup.


Get the barcode value from the defined variable into the HTML-template (using Javascript)

Attached below is a 'Place barcode' Profile that uses Javascript to get the barcode value in the HTML template from the variable as defined in the Fixup configuration. The variable named 'place_barcode' for barcode value is defined in the Fixup configuration (marked below with an arrow):

script.js uses this variable value and sets it in the HTML template (only a part of the script is shown below):

function cchipPrintLoop() {

	// Calculate the page range we need to execute this on
	var theLowerLimit = 0; 
	var theUpperLimit = cals_doc_info.pages.length;

	// Loop over all pages
	for( var thePageIndex = theLowerLimit; thePageIndex < theUpperLimit; thePageIndex++ ) {

		// Set the variable value
		const theVariablevalue = getVariableValue( 'place_barcode' );
		setBarcode( theVariablevalue );

		// Our generated PDF file will be just as big as the barcode
		adjustDocumentSizeToHtmlElement( '#id_barcode' );

		// Output to the current page
		cchip.printPages(1);
	}
}

//-------------------------------------------------------------------------------------------------
// Utility routines
//-------------------------------------------------------------------------------------------------

function setBarcode(d) {
.
.
.
Click to copy

In case you are writing your own script or making changes to the one in the attached Profile, it is very important to force an update for parameters of the barcode object, like below:

//force update for parameters of the barcode object:
		var b = document.getElementById('id_barcode');
		b.innerHTML = b.innerHTML;
Click to copy
Place_barcode.kfpx

As you by now know that the "Place Content" fixup in callas pdfToolbox uses an HTML file and converts it to PDF. This gives you a lot of liberty in how to structure your HTML, in how you link to other files such as scripts, CSS and fonts and in how to structure the folder you use to hold that template. We have a template folder on GitHub where you find one possible way to do this. You'll find a liberal use of sub folders and CSS and Javascripts that are referred to, rather than included in the HTML file. You're free to follow this standard or implement your own.