Personalizzazione dei modelli per i componenti di Forms Portal customizing-templates-for-forms-portal-components

Prerequisiti prerequisites

Gestione dei metadati del modulo

Conoscenza pratica di HTML e CSS

Panoramica overview

L’interfaccia utente di AEM Forms consente di aggiungere metadati a qualsiasi modulo. I metadati personalizzati possono migliorare l’esperienza utente nell’elencare e cercare i moduli dell’organizzazione.

Forms Portal consente di utilizzare metadati personalizzati negli elenchi dei moduli. Durante la creazione di modelli personalizzati per le risorse, puoi modificarne il layout e utilizzare metadati personalizzati con il set di stili CSS.

Effettua le seguenti operazioni per creare un modello personalizzato per vari componenti di Forms Portal.

Creazione di un modello personalizzato creating-a-nbsp-custom-template

  1. Creare un nodo sling:Folder in /apps

    Aggiungi una proprietà "fpContentType". Specifica i valori appropriati per la proprietà a seconda del componente per il quale stai definendo il modello personalizzato.

    • Componente Ricerca ed elenco: "/libs/fd/fp/formTemplate"

    • Componente Bozze e invii:

      • Sezione bozze: /libs/fd/fp/draftTemplate
      • Sezione invii: /libs/fd/fp/submissionsTemplate
    • Componente collegamento: /libs/fd/fp/linkTemplate

    Aggiungi un titolo da visualizzare durante la selezione dei modelli di layout.

    note note
    NOTE
    Il titolo può essere diverso dal nome del nodo sling:Folder creato.

    L’immagine seguente illustra la configurazione del componente Ricerca ed elenco.
    Creazione di una cartella sling:Folder

  2. Crea un file template.html in questa cartella affinché possa fungere da modello personalizzato.

  3. Scrivi il modello personalizzato e utilizza i metadati personalizzati come descritto di seguito.

Esempio di lavoro working-example

Di seguito è riportato un esempio di implementazione di un modello personalizzato in cui Forms Portal acquisisce un layout personalizzato per la scheda Geometrixx per il componente Ricerca ed elenco.

<div class="__FP_boxes-container __FP_single-color">
    <div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
 <div class="__FP_boxes-thumbnail">
     <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
        </div>
        <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
        <p>${description}</p>
        <div class="boxes-icon-cont __FP_boxes-icon-cont">
            <div class="op-dow">
                <a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
                <a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
            </div>
        </div>
    </div>
</div>

Specifiche tecniche per i modelli personalizzati technical-specifications-for-custom-templates

Un modello personalizzato per qualsiasi componente di Forms Portal include voci ripetibili e non ripetibili. Le voci ripetibili sono entità di base per l'inserimento nell'elenco. Esempi di voci ripetibili sono Search & Lister (Ricerca e elenco), Bozze e invii e Componenti link.

Forms Portal fornisce una sintassi per i segnaposto per visualizzare metadati personalizzati/preconfigurati. I segnaposto vengono compilati dopo la visualizzazione dei risultati di maschere, bozze o invii.

Per includere una voce ripetibile, configurare il valore dell'attributo dati-ripetibili su true.

Nell'esempio discusso, due elementi Div sono presenti nella parte superiore del modello personalizzato. La prima, con classe CSS "__FP_boxes-container", funziona come elemento contenitore per i moduli elencati. La seconda, con la classe CSS "__FP_boxes", è un modello per le entità di base, in questo caso un modulo. L'attributo data-Repeable ​presente nell'elemento Div ha il valore true.

Ogni segnaposto dispone di un set di metadati predefinito esclusivo. Per visualizzare i metadati personalizzati in una posizione specifica del modulo, aggiungere la proprietà ${metadata_prop} nella posizione desiderata.

Nell'esempio, la proprietà dei metadati viene utilizzata in più istanze. Ad esempio, viene utilizzato in description,name,formUrl,htmlStyle,pdfUrl,pdfStyle ​e path ​nel modo prescritto.

Metadati pronti all’uso out-of-the-box-metadata

Diversi componenti di Forms Portal forniscono set esclusivi di metadati predefiniti che è possibile utilizzare per l’elenco.

Componente Ricerca ed elenco search-amp-lister-component

  • Titolo: Titolo del modulo

  • nome: nome del modulo (per lo più è lo stesso del titolo)

  • descrizione: descrizione del modulo

  • formUrl: URL per il rendering del modulo come HTML

  • pdfUrl: URL per il rendering del modulo come PDF

  • assetType: tipo di risorsa. I valori validi includono Modulo, Modulo PDF, Modulo di stampa e Modulo adattivo

  • htmlStyle& pdfStyle: stile di visualizzazione rispettivamente per le icone HTML e PDF utilizzate per il rendering. I valori validi sono "__FP_display_none" o vuoti.

NOTE
Ricordarsi di utilizzare la classe __FP_display_none nel foglio di stile personalizzato.
  • downloadUrl: URL per scaricare una risorsa.

Supporto per la localizzazione, l'ordinamento e l'utilizzo delle proprietà di configurazione nell'interfaccia utente (solo Search&List):

  1. Supporto localizzazione: per localizzare qualsiasi testo statico, utilizzare l'attributo ${localize-YOUR_TEXT} e rendere disponibile il valore localizzato, se non esiste già.
    Nell'esempio discusso, gli attributi ${localize-Apply} e ${localize-Download} vengono utilizzati per localizzare il testo Applica e Scarica.

  2. Supporto per l'ordinamento: fare clic sull'elemento HTML per ordinare i risultati della ricerca. Per implementare l’ordinamento in un layout di tabella, aggiungi l’attributo "data-sortKey" nell’intestazione della tabella specifica. Inoltre, aggiungi il relativo valore come metadati per i quali desideri ordinare.
    Ad esempio, per l’intestazione "Title" (Titolo) nella visualizzazione a griglia, il valore dell’intestazione "data-sortKey" è "title". Fai clic sull’intestazione per ordinare i valori in una particolare colonna.

  3. Utilizzo delle proprietà di configurazione: il componente Search & Lister dispone di diverse configurazioni che è possibile utilizzare nell'interfaccia utente. Per visualizzare ad esempio il testo della descrizione comandi HTML salvato nella finestra di dialogo di modifica, utilizzare l'attributo ${config-htmlLinkText}. Analogamente, per il testo della descrizione comandi di PDF, utilizzare l'attributo ${config-pdfLinkText}.

  • Titolo: Titolo del modulo
  • formUrl: URL per il rendering del modulo come HTML
  • target: attributo target del collegamento. I valori validi sono "_blank" e "_self".
  • linkText: didascalia collegamento

Componente Bozze e invii drafts-amp-submissions-component

  • Percorso: percorso del nodo metadati bozze/invii. Utilizzalo con l’estensione .HTML come URL per aprire una bozza o inviare.
  • contextPath: percorso contestuale dell'istanza AEM
  • primaLettera: prima lettera (maiuscola) del titolo del modulo adattivo, salvata come bozza o inviata.
  • formName: titolo del modulo adattivo, salvato come bozza o inviato.
  • draftID: ID per la bozza elencata (da utilizzare solo nel modello per la sezione Bozza).
  • submitID: ID per l'invio elencato (da utilizzare solo nel modello per la sezione Invio).
  • stato: stato del modulo inviato. (Da utilizzare solo nel modello per la sezione Invio ).
  • descrizione: descrizione del modulo adattivo associato alla bozza o all'invio.
  • diffTime: differenza tra l'ora corrente e l'ultima azione di salvataggio per la bozza. In alternativa, la differenza tra l'ora corrente e l'ultima azione inviata per l'invio.
  • iconClass: classe CSS utilizzata per visualizzare la prima lettera della bozza/invio. Forms Portal include le seguenti classi, che forniscono sfondi di diversi colori.
  • proprietario: utente che ha creato la bozza/invio.
  • Oggi: data di creazione della bozza o di invio nel formato DD:MM:YYYY.
  • Ora: ora di creazione della bozza o di invio nel formato HH:MM:SS di 24 ore

Nota:

  1. Per l’opzione Elimina nella sezione Bozze del componente Bozze e invii, assegna alla classe CSS il nome "__FP_deleteDraft". Inoltre, includi l'attributo "draftID" con il valore ${draftID}, che è l'ID bozza della bozza corrispondente.

  2. Durante la creazione di collegamenti per aprire bozze e invii, è possibile specificare ${path}.html come valore dell'attributo href per il tag di ancoraggio.

Bozze e nodo di invio

A. Elemento contenitore

Metadati "path" di B. con una gerarchia fissa per ottenere la miniatura archiviata per ciascun modulo.

Attributo C. Data-Repeable utilizzato per la sezione del modello per ogni modulo

D. Localizzare la stringa "Apply"

E. Utilizzo della proprietà di configurazione pdfLinkText

F. Utilizzo dei metadati "pdfUrl"

Suggerimenti, trucchi e problemi noti tips-tricks-and-known-issues

  1. Non utilizzare virgolette singole (') in alcun modello personalizzato.
  2. Per i metadati personalizzati, memorizzare questa proprietà solo nel nodo jcr:content/metadata. Se viene archiviato in un'altra posizione, Forms Portal non può visualizzare i metadati.
  3. Assicurati che il nome di eventuali metadati personalizzati o esistenti non includa i due punti ( : ). In tal caso, non è possibile visualizzarlo nell’interfaccia utente.
  4. dati-ripetibili non ha alcun significato per un componente Link. L’Adobe consiglia di evitare di utilizzare questa proprietà nel modello per un componente Collegamento.

Articoli correlati

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