Show Menu
ARGOMENTI×

Creazione di un modello di modulo adattivo personalizzato

Prerequisiti

  • Informazioni sul modello di pagina AEM e sull’authoring dei moduli adattivi
  • Informazioni sulle librerie lato client AEM

Adaptive form template

Un modello di modulo adattivo è un modello di pagina AEM specializzato, con determinate proprietà e struttura del contenuto utilizzata per creare il modulo adattivo. Il modello include layout, stili e struttura di contenuto iniziale preconfigurata.
Una volta creato il modulo, le modifiche apportate alla struttura del contenuto del modello originale non vengono applicate al modulo.

Modelli di modulo adattivo predefiniti

AEM QuickStart offre 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 consultare le schede in qualsiasi ordine casuale.
  • Base con Adobe Sign: Consente di creare un modulo con più schede e procedure guidate. Utilizza un layout tabulazioni a sinistra che consente di visitare le schede in qualsiasi ordine. Utilizza i servizi di progettazione di 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 da incorporare nelle pagine del sito AEM.
Questi modelli hanno la sling:resourceType proprietà impostata sul componente pagina corrispondente. Il componente Pagina esegue il rendering della pagina CQ, contenente un contenitore di moduli adattivi, che a sua volta esegue il rendering del modulo adattivo.
La tabella seguente elenca l'associazione tra i modelli e il componente pagina:
Modello
Componente pagina
/libs/fd/af/templates/surveyTemplate
/libs/fd/af/components/page/survey
/libs/fd/af/templates/simpleEnrollmentTemplate
/libs/fd/af/components/page/base
/libs/fd/af/templates/taccollEnrollmentTemplate
/libs/fd/af/components/page/tabbedenrollment
/libs/fd/afaddon/templates/advancedEnrollmentTemplate
/libs/fd/afaddon/components/page/advancedenrollment

Creazione di un modello di modulo adattivo mediante l'editor modelli

È possibile specificare la struttura e il contenuto iniziale di un modulo adattivo utilizzando l'Editor modelli. Ad esempio, si desidera che tutti gli autori dei moduli dispongano di alcune caselle di testo, di pulsanti di navigazione e di un pulsante di invio in un modulo di iscrizione. È possibile creare un modello che gli autori possano utilizzare per creare un modulo coerente con altri moduli di iscrizione. AEM Template Editor consente di:
  • Aggiungere componenti di intestazione e piè di pagina di un modulo nel livello struttura
  • Fornire il contenuto iniziale per il modulo.
  • Specificate un tema.
  • Specificate azioni quali Invia, Reimposta e Naviga.
Per ulteriori informazioni, vedere Editor Modelli di moduli adattivi 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 ai contenitori di moduli adattivi e agli elementi di pagina, come intestazione e piè di pagina.
Potete 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.
Per creare un modello personalizzato, ad esempio simpleEnrollmentTemplate, effettuate le seguenti operazioni.
  1. Passa a CRXDE Lite nell’istanza di authoring.
  2. Nella directory /apps, create la struttura di cartelle per l’applicazione. Ad esempio, se il nome dell’applicazione è una mia società, create una cartella con questo nome. In genere, la cartella dell'applicazione contiene componenti, configurazione, modelli, src e directory di installazione. Per questo esempio, create le cartelle componenti, configurazione e modelli.
  3. Andate alla cartella /libs/fd/af/templates.
  4. Copiare il simpleEnrollmentTemplate nodo.
  5. Andate 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, rinominatelo come modello di iscrizione.
  7. Andate alla posizione /apps/mycompany/templates/enrollment-template.
  8. Modificate le proprietà jcr:title e jcr:description del jcr:content nodo per distinguere il modello dal modello copiato.
  9. Il jcr:content nodo del modello modificato contiene i guideContainer componenti e guideformtitle . guideContainer è il contenitore che contiene il modulo adattivo. Il guideformtitle componente visualizza il nome dell’applicazione, la descrizione e così via.
    Invece di guideformtitle , potete includere un componente personalizzato o il parsys componente. Ad esempio, rimuovere guideformtitle e aggiungere un componente personalizzato o il nodo del parsys componente. Assicurarsi che la sling:resourceType proprietà del componente faccia riferimento al componente e che lo stesso sia definito nel file della pagina component.jsp .
  10. Andate alla posizione /apps/mycompany/templates/enrollment-template/jcr:content.
  11. Aprite la scheda Proprietà e modificate il valore della cq:designPath proprietà in /etc/designs/mycompany.
  12. Ora create un nodo /etc/designs/mycompany per il cq:Page tipo.

Creare un componente per pagina di modulo adattivo

Il modello personalizzato ha lo stesso stile del modello predefinito, in quanto fa riferimento al componente di pagina /libs/fd/af/components/page/base. Potete trovare il riferimento al componente come proprietà sling:resourceType definita nel nodo /apps/mycompany/templates/enrollment-template/jcr:content. Poiché base è un componente di base, non modificate questo componente.
  1. Andate al nodo /apps/mycompany/templates/enrollment-template/jcr:content e modificate il valore della proprietà sling:resourceType in /apps/mycompany/components/page/enrollpage
  2. Copiate il nodo /libs/fd/af/components/page/base nella cartella /apps/mycompany/components/page.
  3. Rinominare il componente copiato in enrollmentpage .
  4. (Solo se disponete già di una pagina di contenuto) Effettuate i seguenti passaggi (a-d), se disponete di un contentpage componente esistente per il sito Web. Se non disponete di un contentpage componente esistente per il sito Web, potete lasciare la resourceSuperType proprietà in modo che punti alla pagina di base OOTB.
    1. Per il enrollmentpage nodo, impostate il valore della proprietà sling:resourceSuperType su miosocietà/componenti/pagina/contenuto. Il contentpage componente è il componente della pagina di base per il sito. È possibile estendere anche altri componenti della pagina. Rimuovete i file di script in enrollmentpage , tranne head.jsp , content.jsp e library.jsp . Il sling:resourceSuperType componente, che in questo caso contentpage include tutti questi script. Le intestazioni, inclusa la barra di navigazione e il 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"/> .
      Il library.jsp file contiene la libreria guide.theme.simpleEnrollment client, che contiene lo stile del modulo adattivo.
      Il componente Pagina enrollmentpage dispone di un head.jsp file esclusivo che sostituisce il head.jsp file del contentpage componente.
    3. Includere tutti gli script nel head.jsp file del contentpage componente nel head.jsp file del enrollmentpage componente.
    4. Nello content.jsp script, è possibile aggiungere contenuto di pagina aggiuntivo o riferimenti ad altri componenti inclusi durante il rendering di una pagina. Ad esempio, se aggiungete il componente personalizzato applicationformheader , accertatevi di aggiungere il seguente riferimento al componente nel file JSP:
      <cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
      Analogamente, se aggiungete un parsys componente nella struttura del nodo del modello, includete anche il componente personalizzato.

Creazione di una libreria client per moduli adattivi

Il head.jsp file del enrollmentpage componente per il nuovo modello include una libreria client guide.theme.simpleEnrollment . Anche il modello predefinito utilizza questa libreria client. Modificate 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.
  • Definite una nuova libreria client in /etc/designs/mycompany. Includete la libreria client dopo la voce tema predefinita nella pagina jsp. Includi tutti gli stili sovrascritti e i file Java Script aggiuntivi in questa libreria client.
Il tema si riferisce a una libreria client inclusa nel componente della pagina utilizzato per il rendering di un modulo adattivo. La libreria del client regola principalmente l'aspetto di un modulo adattivo.