Tutorial: crea un Publish per il modulo adattivo tutorial-publish-your-adaptive-form

Immagine protagonista

Questo tutorial è un passaggio della serie Creare il primo modulo adattivo. Si consiglia di seguire la serie in sequenza cronologica per comprendere, eseguire e dimostrare il caso di utilizzo completo dell’esercitazione.

Una volta che il modulo adattivo è pronto, 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 a un’istanza di pubblicazione AEM. Il modulo viene reso disponibile all’utente finale tramite l’istanza Publish.

Per pubblicare un modulo adattivo, sono disponibili i seguenti metodi:

Prima di iniziare before-you-start

  • Configura un'istanza di pubblicazione di AEM Forms: l'istanza di pubblicazione è un'istanza pubblica dell'AEM Forms in esecuzione in modalità di pubblicazione. In un ambiente di produzione, l’istanza Publish si trova all’esterno 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 utente (ad esempio, l'input del modulo) dall'istanza di pubblicazione all'istanza di authoring.

Publish il modulo adattivo come pagina AEM publish-the-adaptive-form-as-an-aem-page

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 Forms dell’AEM e individua il modulo adattivo shipping-address-add-update-form nell’interfaccia utente Forms dell’AEM.
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Seleziona il modulo adattivo shipping-address-add-update-form e seleziona Publish. Viene visualizzata una finestra di dialogo contenente le risorse correlate al modulo adattivo. Seleziona Publish. Il modulo adattivo viene pubblicato e viene visualizzata una finestra di dialogo di successo.
  3. Apri il modulo sull’istanza Publish. Il modulo può essere compilato e inviato dall’utente finale.
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Incorporare il modulo adattivo in una pagina AEM Sites embed-the-adaptive-form-in-an-aem-sites-page

AEM Forms consente agli sviluppatori di moduli di incorporare facilmente i moduli adattivi in una pagina AEM Sites. Il modulo adattivo incorporato è completamente funzionante 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 interagire contemporaneamente con il modulo.

AEM Forms fornisce 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. Per abilitare il componente Contenitore Forms dell'AEM e incorporare il modulo adattivo in una pagina Sites dell'AEM, eseguire la procedura seguente:

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

    È inoltre possibile incorporare il modulo adattivo in una pagina We.Retail Site’s esistente. Ad esempio, la pagina INFO SU https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Consente di risparmiare tempo per creare una pagina. I passaggi seguenti utilizzano la pagina appena creata.

    Il sito We.Retail è fornito con AEM. Se non hai installato il sito We.Retail, consulta la sezione Implementazione di riferimento We.Retail per installare il sito.

  2. Seleziona proprietà informazioni pagina e seleziona l'opzione Modifica modello nella pagina del sito We.Retail appena creata. Il modello della pagina si apre in una nuova scheda del browser.

  3. Seleziona nella casella contenitore layout e seleziona gestione feed . Nella scheda Componenti consentiti, espandi il pannello a soffietto Generale, seleziona l'opzione Modulo AEM e seleziona icona_salvataggio . Il componente contenitore Forms dell'AEM è abilitato per la pagina.

  4. Aprire la scheda del browser contenente la pagina AEM Sites aperta al passaggio 1. Selezionare la casella Trascina qui i componenti e selezionare +. Nella casella Inserisci nuovo componente selezionare Modulo AEM. Il componente Contenitore AEM Forms è stato aggiunto alla pagina.

  5. Seleziona il componente AEM Forms container e seleziona configure-icon . Verrà visualizzata una finestra di dialogo con le proprietà del contenitore Forms dell'AEM. Nel campo Percorso risorsa, sfoglia e seleziona il modulo adattivo shipping-address-add-update-form. Seleziona icona_salvataggio . Il modulo adattivo è incorporato nella pagina.

  6. Publish presenta sia il modulo adattivo che la pagina Sites. Di seguito sono riportati alcuni punti da considerare:

    • 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 modifica la pagina Sites e il modulo incorporato, ripubblicare la pagina Sites e il modulo.

      incorporare 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 embed-the-adaptive-form-in-an-external-webpage

Puoi incorporare un modulo adattivo in una pagina web esterna (una pagina web non AEM ospitata al di fuori dell’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 i passaggi dettagliati, consulta incorporare il modulo adattivo in una pagina Web esterna.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2