DocumentazioneAEMTutorial su AEMTutorial su AEM Forms

Componente codice QR di esempio

Ultimo aggiornamento: 23 marzo 2025
  • Si applica a:
  • Experience Manager 6.5
  • Argomenti:
  • Moduli adattivi

Creato per:

  • Principiante
  • Sviluppatore

L’incorporazione di un codice QR in un modulo adattivo può notevolmente migliorare la comodità e l’efficienza per gli utenti di accedere a informazioni aggiuntive relative al modulo.

Il componente di esempio utilizza QRCode.js.

QRCode.js è una libreria JavaScript per la creazione di QRCode, supporta Cross-browser con HTML5 Canvas e tag di tabella nel DOM.

Il componente genera il codice QR in base al valore specificato nella proprietà di configurazione del componente.
immagine

Il seguente codice è stato utilizzato nel body.jsp del componente qr-code-generator.

L'"url" è l'url che deve essere incorporato nel codice qr. Questo URL è specificato nelle proprietà di configurazione del componente codice 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>

Il codice seguente utilizza il metodo makeCode della libreria QRCode.js nella libreria client del componente qr-code-generator. Il codice QR generato viene aggiunto al div identificato dall'ID "qrcode".

$(document).ready(function()
  {
      var qrcode = new QRCode("qrcode");
      qrcode.makeCode(document.querySelector("[data-url]").getAttribute("data-url"));

 });

Distribuire le risorse sul server locale

  • Scarica e installa il componente codice QR tramite Gestione pacchetti.
  • Scarica e installa il modulo adattivo di esempio tramite Gestione pacchetti.
  • Anteprima modulo. La sezione della guida del modulo include il codice QR.
recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e