Componente de amostra do código QR
- Aplica-se a:
- Experience Manager 6.5
- Tópicos:
- Formulários adaptativos
Criado para:
- Iniciante
- Desenvolvedor
A incorporação de um código QR em um Formulário adaptável pode melhorar muito a conveniência e a eficiência para que os usuários acessem informações adicionais relacionadas ao formulário.
O componente de exemplo usa QRCode.js.
O QRCode.js é uma biblioteca javascript para fazer QRCode, ele suporta Cross-browser com HTML5 Canvas e tag de tabela no DOM.
O componente gera o código QR com base no valor especificado na propriedade de configuração do componente.
O código a seguir foi usado no body.jsp do componente qr-code-generator.
O "url" é o url que precisa ser incorporado no código qr. Esta url é especificada nas propriedades de configuração do componente de código QR.
<%@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>
O código a seguir usa o método makeCode da biblioteca QRCode.js na biblioteca do cliente do componente qr-code-generator. O código QR gerado é anexado ao div identificado pela id "qrcode".
$(document).ready(function()
{
var qrcode = new QRCode("qrcode");
qrcode.makeCode(document.querySelector("[data-url]").getAttribute("data-url"));
});
Implantar os ativos no servidor local
- Baixe e instale o componente de código QR usando o Gerenciador de pacotes.
- Baixe e instale o formulário adaptável de exemplo usando o Gerenciador de pacotes.
- Visualizar o formulário. A seção de ajuda do formulário tem o código QR.