DocumentaçãoAEMTutoriais do AEMTutoriais do AEM Forms

Componente de amostra do código QR

Última atualização: 24 de março de 2025
  • 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.
imagem

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.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e