Share via


QR Code Generator Add-In for SharePoint

Download source code

Using this you can generate QR Code for any text value and URL, this add-in can be add anywhere in you SharePoint Dashboard. Below you can see step by step instructions to develop this SharePoint Add-In. Also the complete project source code is available for download, find the download link at the bottom of this post.

Create new Project in Visual studio using “App for SharePoint” template, here I’m using visual studio 2015 version. In the new project wizard select SharePoint-Hosted and rest you can select based on your requirements. Provider-Hosted application can also be selected.
I’ve added two JS files qr.js and initstrings.js, these JS files are developed by Microsoft. Here I modified those files. Modified files can be found in the project.

Add new “Client Web Part (Host Web)” and select “Create a new app web page for the client web part content”, Edit newly created aspx page which is located in the Pages folder. Add below JS code and HTML. In the JS function I am passing Textbox value and Div name as parameter, JavaScript will generate QR code based on the content in Text box value.

<script type="text/javascript">
function generatefn() {
if ($('#QR_URL').val() != '')
onLoadQrCode($('#QR_URL').val(), 'DivImage');
}
</script>
<input type="text" id="QR_URL" value="" style="width:250px" /><input onclick="generatefn()" type="button" id="btnGenerate" value="Generate" />
<div id="DivImage"></div>

Know about QR code.

QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data; extensions may also be used.

The QR Code system became popular outside the automotive industry due to its fast readability and greater storage capacity compared to standard UPC barcodes. Applications include product tracking, item identification, time tracking, document management, and general marketing.

A QR code consists of black modules (square dots) arranged in a square grid on a white background, which can be read by an imaging device (such as a camera, scanner, etc.) and processed using Reed–Solomon error correction until the image can be appropriately interpreted. The required data are then extracted from patterns that are present in both horizontal and vertical components of the image.

Download source code