Esercitazione: Pubblicare il modulo adattivo

Questa esercitazione è un passaggio della serie Crea il tuo primo modulo adattivo . Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e illustrare il caso d’uso completo dell’esercitazione.

Una volta pronto il modulo adattivo, puoi pubblicarlo per renderlo disponibile agli utenti finali. Gli utenti finali possono aprire il modulo pubblicato su qualsiasi dispositivo e browser Internet. Quando viene pubblicato un modulo adattivo, il modulo e il contenuto correlato vengono copiati da un’istanza di authoring AEM in un’istanza di pubblicazione AEM. Il modulo viene reso disponibile all’utente finale tramite l’istanza di pubblicazione.

Per pubblicare un modulo adattivo sono disponibili i seguenti metodi:

Prima di iniziare

  • Imposta un'istanza di pubblicazione AEM Forms: L’istanza di pubblicazione è un’istanza rivolta al pubblico di AEM Forms in esecuzione in modalità di pubblicazione. In un ambiente di produzione, l'istanza di pubblicazione si trova al di fuori del firewall dell'organizzazione.
  • Imposta replica e replica inversa: La replica copia il contenuto dall’istanza di authoring a un’istanza di pubblicazione e restituisce l’input dell’utente (ad esempio, l’input del modulo) dall’istanza di pubblicazione all’istanza di authoring.

Pubblica il modulo adattivo come pagina AEM

Quando il modulo adattivo viene pubblicato come pagina AEM, l’intera pagina web contiene solo il modulo pubblicato. Puoi utilizzare l’URL del modulo adattivo per collegarlo da un’altra pagina web. Per pubblicare il modulo adattivo shipping-address-add-update-form come pagina AEM:

  1. Accedi all'istanza di authoring AEM Forms e individua il modulo adattivo per l'indirizzo di spedizione-add-update-form nell'interfaccia utente AEM Forms.
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Seleziona il modulo adattivo per l’indirizzo di spedizione-aggiunta-aggiornamento-modulo e tocca Pubblica. Viene visualizzata una finestra di dialogo contenente le risorse correlate al modulo adattivo. Tocca Pubblica. Il modulo adattivo viene pubblicato e viene visualizzata una finestra di dialogo di successo.
  3. Apri il modulo nell’istanza di pubblicazione. Il modulo è disponibile per la compilazione e l’invio da parte dell’utente finale.
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Incorporare il modulo adattivo in una pagina AEM Sites

AEM Forms consente agli sviluppatori di moduli di incorporare facilmente i moduli adattivi in una pagina AEM Sites. Il modulo adattivo incorporato è completamente funzionale e gli utenti possono compilare e inviare il modulo senza uscire dalla pagina. Consente all’utente di rimanere nel contesto di altri elementi della pagina web e di interagire contemporaneamente con il modulo.

AEM Forms fornire un componente, AEM Forms Container, per incorporare un modulo adattivo in una pagina AEM Sites. Per impostazione predefinita, il componente non è visibile nel contenitore AEM Sites . Esegui i seguenti passaggi per abilitare il componente AEM Forms Contenitore e per incorporare il modulo adattivo in una pagina AEM Sites:

  1. Crea e apri una pagina del sito We.Retail per la modifica. Ad esempio, https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. Il modulo adattivo è incorporato nella pagina Sites .

    Puoi anche incorporare il modulo adattivo in una pagina esistente di We.Retail Site’s . Ad esempio, la pagina ABOUT US https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Consente di risparmiare tempo per la creazione di una pagina. I passaggi seguenti utilizzano la pagina appena creata.

    Il sito We.Retail viene fornito con AEM. Se non hai installato il sito We.Retail, consulta Implementazione di riferimento We.Retail installare il sito.

  2. Tocca proprietà informazioni sulla pagina e seleziona l’opzione Modifica modello nella pagina del sito We.Retail appena creata. Il modello della pagina viene aperto in una nuova scheda del browser.

  3. Tocca all’interno della casella Contenitore di layout e tocca gestione dei feed. Nella scheda Componenti consentiti , espandi il pannello a soffietto Generale, seleziona l’opzione AEM modulo e tocca salva_icona. Il componente AEM Forms Contenitore è abilitato per la pagina.

  4. Apri la scheda del browser contenente AEM pagina Sites aperta al passaggio 1. Tocca la casella Trascina qui i componenti e tocca +. Nella casella Inserisci nuovo componente, toccare AEM modulo. Il componente AEM Forms Container viene aggiunto alla pagina.

  5. Tocca il componente contenitore AEM Forms e tocca configure-icon. Viene visualizzata una finestra di dialogo con le proprietà AEM contenitore Forms. Nel campo Percorso risorsa , sfoglia e seleziona il modulo adattivo per l’indirizzo di spedizione-add-update-form. Tocca save_icon. Il modulo adattivo è incorporato nella pagina .

  6. Pubblica il modulo adattivo e la pagina Sites . Di seguito sono riportati alcuni punti da tenere in considerazione:

    • Se si pubblica la pagina AEM Sites per la prima volta e include un modulo incorporato, pubblicare la pagina Sites e il modulo incorporato.

    • Se si modifica solo il modulo incorporato in una pagina del sito pubblicata, pubblicare il modulo originale e le modifiche si riflettono nella pagina del sito pubblicata. La pagina del sito pubblicata include un riferimento al modulo e non richiede la ripubblicazione della pagina.

    • Se si modificano la pagina Sites e il modulo incorporato, ripubblicare la pagina Sites e il modulo.

      embed-in-aem-sites
      Modulo di modifica dell'indirizzo di spedizione e fatturazione aggiunto a una pagina AEM Sites.

Incorporare il modulo adattivo in una pagina web esterna

È possibile incorporare un modulo adattivo in una pagina web esterna (una pagina web non AEM ospitata all’esterno di AEM) inserendo alcune righe di JavaScript nella pagina web esterna. Il codice JavaScript invia una richiesta HTTP al server AEM Forms per il modulo adattivo e le risorse correlate e aggiunge il modulo adattivo alla pagina web. Per passaggi dettagliati, consulta incorporare il modulo adattivo in una pagina web esterna.

In questa pagina