Barcoding with JavaScript in
SharePoint
Users of Microsoft SharePoint 2003 and above who want to embed barcodes
into SharePoint applications have the ability to do so without the need
to install any components on client machines. This approach simply needs
the IDAutomation JavaScript Component, available to all clients who require
access to the application. The component files reside in the directory that
contains the SharePoint application project.
This SharePoint Designer example uses the
Native JavaScript AJAX
Barcode Generator script file that may be easily inserted into a SharePoint
application to create barcode images for display in HTML or text objects.
Once implemented, no other components or fonts need to be installed to create
barcodes; the Native JavaScript
AJAX Barcode Generator is the complete barcode generator. This example
passes a data string into a textbox which is displayed in a SharePoint application
using the JavaScript Code128 function..
- Extract the files from the package.
- (Several generator files are provided for different bar code types)
Use the file that
represents the barcode type that is needed. If in doubt, IDAutomation
recommends choosing Code 128 Auto, which is in the file named
IDAutomation_JavaScriptBarcode_C128.js.
- Open a Microsoft SharePoint application that the barcode is to be
integrated with.
- Switch from Design view to Code view by selecting Code at
the bottom left of the project.
- Add the following line at the top of the file just before the
</head> line to load the appropriate JavaScript
file:
<script language="JavaScript" src="IDAutomation_JavaScriptBarcode_C128.js"></script>
- Add a script where the barcode is to appear in the HTML document
or text object, which is the file name without the ".js":
<script type="text/javascript">
document.write(IDAutomation_JavaScriptBarcode_C128(DataToEncode))
</script>
- Add an Input Textbox to the form; this will be used to modify the
Data To Encode.
- In Code view, the Textbox code should display: <input name="Text1"
type="text" style="width: 213px" /><br />
- To create an identification to the Textbox add: id="datatoencode"
The Textbox code should now display: <input name="Text1" id="datatoencode"
type="text" style="width: 213px/><br/>
- Add onchange="javascript:changeBarcode();" to allow the barcode
image to be updated when new data is entered:
<input name="Text1" id="datatoencode" type="text" style="width:
213px" onchange="javascript:changeBarcode();"/><br/>
- Create a function, a variable to hold the Data To Encode:
<script>
function changeBarcode() {
document.getElementById('barcode').innerHTML="";
var datatoencode = getValue('datatoencode');
document.getElementById('barcode').innerHTML=out;
}
<script>
- Save the project as a Webpage. The page can now be displayed and
barcode modified in a browser. In the example, the default barcode is
Code128Auto and the encoded data is: 123456789012.
|
