Creazione di un modello di modulo adattivo personalizzato

Prerequisiti

• Comprensione di AEM Modello di pagina e Authoring di moduli adattivi

• Comprensione di AEM Librerie lato client

Modello di modulo adattivo

Un modello di modulo adattivo è specializzato AEM modello di pagina, con determinate proprietà e struttura del contenuto utilizzata per creare il modulo adattivo. Il modello dispone di layout, stili e struttura di contenuto iniziale di base preconfigurati.

Una volta creato un modulo, le eventuali modifiche apportate alla struttura del contenuto del modello originale non vengono applicate al modulo.

Modelli di modulo adattivo predefiniti

AEM QuickStart fornisce i seguenti modelli di modulo adattivo:

• Base: Consente di creare un modulo adattivo con più schede utilizzando un layout tabulazioni a sinistra, in cui è possibile visualizzare le schede in qualsiasi ordine casuale.
• Base con Acrobat Sign: Consente di creare un modulo con più schede e procedure guidate. Utilizza un layout tabulazioni a sinistra che ti consente di visitare le schede in qualsiasi ordine. Utilizza i servizi di progettazione Adobe Document Cloud per la firma e la verifica.
• Modello vuoto: Consente di creare un modulo senza intestazione, piè di pagina e contenuto iniziale. È possibile aggiungere componenti quali caselle di testo, pulsanti e immagini. Il modello vuoto consente di creare un modulo che è possibile incorporare nelle pagine AEM sito.

Questi modelli hanno sling:resourceType impostata sul componente pagina corrispondente. Il componente pagina esegue il rendering della pagina CQ, contenente il contenitore di moduli adattivi, che a sua volta esegue il rendering del modulo adattivo.

La tabella seguente elenca l’associazione tra modelli e componente pagina:

Creazione di un modello di modulo adattivo tramite l’editor di modelli

È possibile specificare la struttura e il contenuto iniziale di un modulo adattivo utilizzando Editor modelli. Ad esempio, si desidera che tutti gli autori dei moduli dispongano di alcune caselle di testo, dei pulsanti di navigazione e di un pulsante di invio in un modulo di iscrizione. È possibile creare un modello che gli autori possono utilizzare per creare un modulo coerente con gli altri moduli di iscrizione. AEM Editor modelli consente di:

• Aggiunta di componenti di intestazione e piè di pagina di un modulo nel livello struttura
• Fornire il contenuto iniziale del modulo.
• Specifica un tema.
• Specifica azioni quali invio, ripristino e navigazione.

Per ulteriori informazioni, consulta Editor modelli.

Creazione di un modello di modulo adattivo da CRXDE

Invece di utilizzare i modelli disponibili, è possibile creare un modello e utilizzarlo per creare moduli adattivi. I modelli personalizzati si basano su vari componenti di pagina che fanno riferimento a contenitori di moduli adattivi e elementi di pagina, ad esempio intestazione e piè di pagina.

Puoi creare questi componenti utilizzando il componente pagina di base per il sito web. In alternativa, è possibile estendere il componente pagina del modulo adattivo utilizzato dai modelli predefiniti.

Esegui i seguenti passaggi per creare un modello personalizzato, ad esempio simpleEnRegistrationTemplate.

1. Passa ad CRXDE Lite nell’istanza di authoring.

2. Nella directory /apps , crea la struttura di cartelle per la tua applicazione. Ad esempio, se il nome dell’applicazione è azienda, crea una cartella con questo nome. In genere, la cartella dell'applicazione contiene componenti, configurazione, modelli, src e directory di installazione. Per questo esempio, crea le cartelle componenti, configurazione e modelli.

3. Passa alla cartella /libs/fd/af/templates.

4. Copia il simpleEnrollmentTemplate nodo.

5. Passa alla cartella /apps/mycompany/templates. Fare clic con il pulsante destro del mouse e selezionare Incolla.

6. Se necessario, rinominare il nodo del modello copiato. Ad esempio, rinominalo come modello di registrazione.

7. Passa alla posizione /apps/mycompany/templates/enrollment-template.

8. Modifica la jcr:title e jcr:description proprietà per jcr:content per distinguere il modello dal modello copiato.

9. La jcr:content il nodo del modello modificato contiene guideContainer e guideformtitle componenti. guideContainer è il contenitore che contiene il modulo adattivo. La guideformtitle visualizza il nome dell’applicazione, la descrizione e così via.

   Invece di guideformtitle, puoi includere un componente personalizzato o parsys componente. Ad esempio, rimuovi guideformtitlee aggiungi un componente personalizzato o parsys nodo componente. Assicurati che sling:resourceType La proprietà del componente fa riferimento al componente e lo stesso è definito nella pagina component.jsp file.

10. Passa alla posizione /apps/mycompany/templates/enrollment-template/jcr:content.

11. Apri Proprietà e modifica il valore del cq:designPath a /etc/designs/mycompany.

12. Ora crea un nodo /etc/designs/mycompany per cq:Page digitare.

Creare un componente per la pagina di un modulo adattivo

Il modello personalizzato ha lo stesso stile del modello predefinito, perché fa riferimento al componente pagina /libs/fd/af/components/page/base. È possibile trovare il riferimento al componente come proprietà sling:resourceType definito nel nodo /apps/mycompany/templates/enrollment-template/jcr:content. Poiché base è un componente di base del prodotto, non modificare questo componente.

1. Passa al nodo /apps/mycompany/templates/enrollment-template/jcr:content e modifica il valore della proprietà sling:resourceType a /apps/mycompany/components/page/enrollpage

2. Copia il nodo /libs/fd/af/components/page/base nella cartella /apps/mycompany/components/page.

3. Rinomina il componente copiato in enrollmentpage.

4. (Solo se disponi già di una pagina di contenuto) Esegui i seguenti passaggi (a-d), se disponi di un contentpageper il sito web. Se non hai un contentpageper il sito web, puoi lasciare il resourceSuperTypeper puntare alla pagina di base OOTB.

   1. Per enrollmentpage nodo, imposta il valore della proprietà sling:resourceSuperType alla mioazienda/componenti/pagina/contentpage. La contentpage è il componente della pagina di base per il sito. È possibile estenderlo ad altri componenti della pagina. Rimuovi file di script in enrollmentpage, tranne head.jsp, content.jspe library.jsp. La sling:resourceSuperType componente, che è contentpage in questo caso, include tutti questi script. Le intestazioni, comprese le barre di navigazione e i piè di pagina, vengono ereditate dal contentpage componente.

   2. Aprire il file head.jsp.

      Il file JSP contiene la riga <cq.include script="library.jsp"/>.

      La library.jsp il file contiene guide.theme.simpleEnrollment libreria client, che contiene lo stile del modulo adattivo.

      Componente pagina enrollmentpage ha un head.jsp file che sostituisce il head.jsp del contentpage componente.

   3. Includi tutti gli script nel head.jsp per contentpage nella head.jsp per enrollmentpage componente.

   4. In content.jsp è possibile aggiungere contenuto di pagina aggiuntivo o riferimenti ad altri componenti inclusi durante il rendering di una pagina. Ad esempio, se aggiungi il componente personalizzato applicationformheader, accertati di aggiungere il seguente riferimento al componente nel file JSP:

      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>

      Allo stesso modo, se aggiungi un parsys nella struttura del nodo del modello, includi anche il componente personalizzato.

Creazione di una libreria client per moduli adattivi

La head.jsp del enrollmentpage il componente per il nuovo modello include una libreria client guide.theme.simpleEnrollment. Il modello predefinito utilizza anche questa libreria client. Modificare lo stile nel nuovo modello utilizzando uno dei seguenti metodi:

• Definire un tema personalizzato e sostituire il tema predefinito guide.theme.simpleEnrollment con il tema personalizzato.
• Definisci una nuova libreria client in /etc/designs/mycompany. Includi la libreria client dopo la voce tema predefinita nella pagina jsp. Includi tutti gli stili ignorati e i file Java Script aggiuntivi in questa libreria client.

Risorse Business.Adobe.com

Multichannel Communication Auto Form Fill Personalized Communications Document Generation Content As A Service Web Content Management