Exempel på QR-kodkomponent
Att bädda in en QR-kod i ett adaptivt formulär kan göra det enklare och effektivare för användarna att få tillgång till ytterligare information om formuläret.
Exempelkomponenten använder QRCode.js.
QRCode.js är ett javascript-bibliotek som gör QRCode. Det har stöd för webbläsarövergripande taggar med HTML5 Canvas och tabelltaggar i DOM.
Komponenten genererar QR-koden baserat på värdet som anges i komponentens konfigurationsegenskap.
Följande kod användes i body.jsp för QR-code-generator-komponenten.
"url" är den URL som måste bäddas in i qr-koden. Den här URL:en anges i konfigurationsegenskaperna för QR-kodkomponenten.
<%@include file="/libs/foundation/global.jsp"%>
<body>
<h2>Scan the QR Code for more information related to this form</h2>
<div data-url="<%=properties.get("url")%>">
</div>
<div id="qrcode">
</div>
</body>
Följande kod använder makeCode-metoden för QRCode.js-biblioteket i klientbiblioteket för QR-code-generator-komponenten. Den genererade QR-koden läggs till i div-koden som identifieras av id "qrcode".
$(document).ready(function()
{
var qrcode = new QRCode("qrcode");
qrcode.makeCode(document.querySelector("[data-url]").getAttribute("data-url"));
});
Distribuera resurserna på den lokala servern
- Hämta och installera QR-kodkomponenten med Package Manager.
- Hämta och installera det adaptiva exempelformuläret med Package Manager.
- Förhandsgranska formuläret. Formulärets hjälpavsnitt innehåller QR-koden.