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>
Project source Download link
https://code.msdn.microsoft.com/QR-Code-Generator-Add-In-a4cdd884
As I can show the Qr and component is that it shows it?
LikeLike
Yes, let me know if you have any query
LikeLike
What element I have to put so that Qr is displayed on screen
LikeLike
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.
LikeLike