Personalizzazione dei modelli per i componenti del portale dei moduli

Prerequisiti

Gestione dei metadati dei moduli

Conoscenza di base di HTML e CSS

Panoramica

L'interfaccia utente 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 utilizzare i metadati personalizzati con il set di stili CSS.

Per creare un modello personalizzato per vari componenti di Forms Portal, effettuate le seguenti operazioni.

Creazione di un modello personalizzato

  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. Creazione di una sling:Folder

  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 scheda Geometrixx personalizzato 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 OOTB/personalizzati. I segnaposto vengono compilati dopo la visualizzazione dei risultati di moduli, bozze o invii.

Per includere una voce ripetibile, configurare 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 data-ripetibile 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 description,name,formUrl,htmlStyle,pdfUrl,pdfStyle​e percorso​nel modo prescritto.

Metadati forniti

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

Componente Search & Lister

  • 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 e 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 ${localize-Apply} e ${localize-Download} 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 della descrizione comandi salvato tramite la finestra di dialogo di modifica, utilizzare l'attributo ${config-htmlLinkText}. Analogamente, per il testo della descrizione comandi PDF, utilizzate l ' attributo${config-pdfLinkText}.

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

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 di contesto 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, la 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, assegnate alla classe CSS il nome "_FP_deleteDraft". Inoltre, includete l'attributo "draftID" con il valore ${draftID}, che è l'ID bozza della bozza corrispondente.

  2. Durante la creazione di collegamenti per l'apertura di bozze e invii, potete specificare $path.html come valore dell'attributo href per il tag di ancoraggio.

Nodo Bozze e invio

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, archiviate questa proprietà solo nel nodo jcr:content/metadata. Se li archiviate in qualsiasi altro luogo, Forms Portal non può visualizzare i metadati.
  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. i dati ripetibili non hanno alcun significato per un ​​componente Linkcomponent. Adobe consiglia di evitare di utilizzare questa proprietà nel modello per un componente Collegamento.

Articoli correlati

In questa pagina