Show Menu
ARGOMENTI×

Personalizzazione dei modelli per i componenti del portale moduli

Prerequisiti

Conoscenza di base di HTML e CSS

Panoramica

L'interfaccia utente di AEM Forms consente di aggiungere metadati a qualsiasi modulo. I metadati personalizzati possono migliorare l'esperienza utente durante l'elencazione e la ricerca di moduli all'interno dell'organizzazione.
Forms Portal consente di utilizzare i metadati personalizzati negli elenchi dei moduli. Durante la creazione di modelli personalizzati per le risorse, potete modificarne il layout e usare metadati personalizzati con il set di stili CSS.
Per creare un modello personalizzato per vari componenti di Forms Portal, effettuare le operazioni seguenti.

Creating a custom template

  1. Creare un nodo sling:Folder in */apps *
    Aggiungete una proprietà "fpContentType". Specificate i valori appropriati per la proprietà a seconda del componente per il quale state definendo il modello personalizzato.
    • Componente Search & Lister: "/libs/fd/fp/formTemplate"
    • Componente Bozze e invii:
      • Sezione Bozze: /libs/fd/fp/draftTemplate
      • Sezione Invii: /libs/fd/fp/submitTemplate
    • Collegamento componente: /libs/fd/fp/linkTemplate
    Aggiungete un titolo da visualizzare durante la selezione dei modelli di layout.
    *Nota: Il titolo può essere diverso dal nome del nodo sling:Folder creato. * Nell’immagine seguente è illustrata la configurazione del componente Ricerca e filtro.
  2. Create un modello di file.html in questa cartella da usare come modello personalizzato.
  3. Scrivete il modello personalizzato e utilizzate i metadati personalizzati come descritto di seguito.

Esempio di lavoro

Di seguito è riportato un esempio di implementazione di un modello personalizzato in cui Forms Portal acquisisce un layout personalizzato della scheda governativa Geometrixx per il componente Ricerca e verifica.
<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

Un modello personalizzato per qualsiasi componente di Forms Portal include voci ripetibili e non ripetibili. Le voci ripetibili sono entità di base per l'elenco. Alcuni esempi di voci ripetibili sono i componenti Cerca e nascondi, Bozze e invii e Collegamento.
Forms Portal fornisce una sintassi per i segnaposto per la visualizzazione di metadati OOOTB personalizzati. I segnaposto vengono compilati dopo la visualizzazione dei risultati di moduli, bozze o invii.
Per includere una voce ripetibile, configurate il valore dell'attributo ripetibile su true .
*Nell'esempio illustrato, due elementi Div sono presenti nella parte superiore del modello personalizzato. La prima, con la classe CSS "_FP_boxes-container", funziona come un elemento contenitore per i moduli elencati. Il secondo, con la classe CSS "_FP_boxes", è un modello per le entità di base, in questo caso un modulo. L'attributo ripetibile di dati presente nell'elemento Div ha il valore true .
Ogni segnaposto dispone di un set di metadati OOTB esclusivo. Per visualizzare i metadati personalizzati in una posizione specifica del modulo, aggiungere la proprietà ​$metadata_prop nella posizione desiderata.
Nell'esempio, la proprietà metadata viene utilizzata in più istanze. Ad esempio, viene utilizzato in descrizione , nome , formUrl , htmlStyle , pdfUrl , pdfStyle, e nel modo prescritto, in modo analogo.

Metadati forniti

Diversi componenti di Forms Portal forniscono set esclusivi di metadati OOTB utilizzabili per l’elenco.

Ricerca e filtro, componente

  • ​Titolo: Titolo del modulo
  • name : Nome del modulo (in genere corrisponde al 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 per le icone HTML e PDF utilizzate rispettivamente per il rendering. I valori validi sono " __FP_display_none " o blank
    Nota: Ricordare di utilizzare la classe __FP_display_none nel foglio di stile personalizzato
  • downloadUrl : URL per scaricare una risorsa.
Supporto per localizzazione, ordinamento e utilizzo delle proprietà di configurazione nell’interfaccia utente (solo ricerca e filtro):
  1. Supporto per la localizzazione: Per localizzare qualsiasi testo statico, utilizzate l'attributo ${localize-***YOUR_TEXT​ *}** e rendete disponibile il valore localizzato, se non esiste già.
    Nell'esempio illustrato, gli attributi $ e $ vengono utilizzati per localizzare il testo Applica e Scarica.
  2. Supporto per l'ordinamento : Fate clic sull’elemento HTML per ordinare i risultati della ricerca. Per implementare l’ordinamento in un layout depositato, aggiungete l’attributo "data-sortKey" nella particolare intestazione della tabella. Inoltre, aggiungete il valore come metadati per i quali desiderate ordinare i dati.
    Ad esempio, per l’intestazione "Titolo" nella vista griglia, il valore dell’intestazione "data-sortKey" è "title". Fate clic sull’intestazione per ordinare i valori in una particolare colonna.
  3. Utilizzo delle proprietà di configurazione: Il componente Ricerca e filtro presenta diverse configurazioni utilizzabili nell’interfaccia utente. Ad esempio, per visualizzare il testo HTML ToolTip salvato tramite la finestra di dialogo di modifica, utilizzate l'attributo $. Analogamente, per il testo della descrizione comandi PDF, utilizzate l 'attributo $ .

Componente Bozze e invii

  • Percorso : Percorso del nodo di metadati bozza/invio. Utilizzatelo con l'estensione .HTML come URL per aprire una bozza o per inviarla.
  • contextPath : Percorso contestuale dell’istanza AEM
  • firstLetter : 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 (Utilizzate solo nel modello per la sezione Bozza).
  • submitID : ID per l'invio elencato (Usa solo nel modello per la sezione Invio).
  • status : Stato del modulo inviato. Utilizzate 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, differenza tra l'ora corrente e l'ultima azione di invio per l'invio.
  • iconClass : Classe CSS utilizzata per visualizzare la prima lettera della bozza/invio. Forms Portal include le classi seguenti, che forniscono sfondi colorati diversi.
  • proprietario : Utente che ha creato la bozza/invio.
  • Oggi : Data di creazione della bozza o di invio in formato GG:MM:AAAA.
  • Ora : Ora di creazione della bozza o di invio in formato HH:MM:SS 24 ore
Nota:
  1. Per l'opzione di eliminazione nella sezione Bozze del componente Bozze e invii, denominate la classe CSS "_FP_deleteDraft". Inoltre, includete l'attributo "draftID" con il valore $ , che è l'ID bozza della bozza corrispondente.
  2. Quando create collegamenti per aprire bozze e invii, potete specificare $path.html come valore dell'attributo href per il tag di ancoraggio.
A . Elemento contenitore
​B. metadati "percorso" con una gerarchia fissa per ottenere la miniatura memorizzata per ciascun modulo.
C. Attributo ripetibile ai dati utilizzato per la sezione del modello per ciascun modulo
​D. Per localizzare la stringa "Applica"
​E. Utilizzo della proprietà di configurazione pdfLinkText
​F. Utilizzo dei metadati "pdfUrl"

Suggerimenti, trucchi e problemi noti

  1. Non utilizzate virgolette singole (') in alcun modello personalizzato.
  2. Per i metadati personalizzati, memorizzate questa proprietà solo nel nodo jcr:content/metadata . Se i metadati vengono memorizzati in qualsiasi altra posizione, Forms Portal non è in grado di visualizzarli.
  3. Accertatevi che il nome di eventuali metadati personalizzati o metadati esistenti non contenga due punti (:). In caso contrario, non è possibile visualizzarlo nell'interfaccia utente.
  4. la ripetizione dei dati non ha alcun significato per un componente Link . Adobe consiglia di evitare di utilizzare questa proprietà nel modello per un componente Collegamento.