QR Code Generator Add-In for SharePoint

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.

2016-01-26_21-30-19

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.

2016-01-26_18-44-22
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>

Project source Download link

zip_icon https://code.msdn.microsoft.com/QR-Code-Generator-Add-In-a4cdd884

4 thoughts on “QR Code Generator Add-In for SharePoint

    1. Edit page and find your app part in the SharePoint ribbon, If not found then you have to make sure below.
      After developed app part, in the project add “Client Web Part (Host Web)” then your app part will be available.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s