Personalizzazione dei modelli per i componenti del portale dei moduli customizing-templates-for-forms-portal-components
Prerequisiti prerequisites
Gestione dei metadati dei moduli
Conoscenza di funzionamento 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 durante l’elenco e la ricerca di 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.
Esegui i seguenti passaggi per creare un modello personalizzato per vari componenti del portale Forms.
Creazione di un modello personalizzato creating-a-nbsp-custom-template
-
Crea un nodo sling:Folder sotto */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 e filtro: "/libs/fd/fp/formTemplate"
-
Componente Bozze e invii:
- Sezione Bozze: /libs/fd/fp/draftTemplate
- Sezione invii: /libs/fd/fp/submitTemplate
-
Componente collegamento: /libs/fd/fp/linkTemplate
Aggiungere un titolo da visualizzare durante la selezione dei modelli di layout.
*Nota: Il titolo può essere diverso dal nome del nodo di sling:Folder creato. *
L’immagine seguente illustra la configurazione del componente Ricerca e filtro . -
-
Crea un file template.html in questa cartella da usare come modello personalizzato.
-
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 della scheda Gov per il componente Ricerca e filtro.
<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 i componenti Search & Lister, Drafts & Submission e Link.
Forms Portal fornisce una sintassi per i segnaposto per la visualizzazione dei metadati personalizzati/OOTB. 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 per i dati a true.
*Nell'esempio illustrato, due elementi Div sono presenti nella parte superiore del modello personalizzato. Il primo, 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. La ripetibile per i dati l’attributo presente nell’elemento Div ha il valore true.
Ogni segnaposto ha un set di metadati OOTB esclusivo. Per visualizzare i metadati personalizzati in una posizione specifica del modulo, aggiungere la Proprietà $metadata_prop sul posto.
Nell'esempio, la proprietà metadati viene utilizzata in più istanze. Ad esempio, viene utilizzato in descrizione,name,formUrl,htmlStyle,pdfUrl,pdfStyle e path nel modo prescritto.
Metadati predefiniti out-of-the-box-metadata
Diversi componenti del portale Forms forniscono set esclusivi di metadati OOTB utilizzabili per l’inserimento nell’elenco.
Componente Ricerca e filtro search-amp-lister-component
-
Titolo: Titolo del modulo
-
name: Nome del modulo (in genere corrisponde al titolo)
-
descrizione: Descrizione del modulo
-
formUrl: URL per eseguire il rendering del modulo come HTML
-
pdfUrl: URL per eseguire il rendering del modulo come PDF
-
assetType: Tipo di risorsa. I valori validi includono Modulo, Modulo PDF, Stampa modulo e Modulo adattivo
-
htmlStyle & pdfStyle: Stile di visualizzazione per le icone di HTML e PDF utilizzate rispettivamente per il rendering. I valori validi sono "__FP_display_none" o vuoto
Nota: Ricordare 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 ricerca e filtro):
-
Supporto per la localizzazione: Per localizzare un testo statico, utilizza l’attributo ${localize-YOUR_TEXT} e rendere 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.
-
Supporto per l’ordinamento: Fai clic sull’elemento HTML per ordinare i risultati della ricerca. Per implementare l’ordinamento in un layout sottoposto, aggiungi l’attributo "data-sortKey" nella particolare intestazione della tabella. Inoltre, aggiungi il relativo valore come metadati per i quali desideri eseguire l’ordinamento.
Ad esempio, per l’intestazione "Titolo" nella vista griglia, il valore dell’intestazione "data-sortKey" è "title". Fai clic sull’intestazione per ordinare i valori in una particolare colonna.
-
Utilizzo delle proprietà di configurazione: Il componente Ricerca e filtro dispone di diverse configurazioni che è possibile utilizzare nell’interfaccia utente. Ad esempio, per visualizzare il testo della descrizione comandi di HTML salvato tramite la finestra di dialogo di modifica, utilizzare la Attributo ${config-htmlLinkText}. Analogamente, per il testo della descrizione comandi di PDF, utilizza la ${config-pdfLinkText} attributo.
Componente collegamento link-component
- Titolo: Titolo del modulo
- formUrl: URL per eseguire 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 drafts-amp-submissions-component
- Percorso: Percorso del nodo di metadati bozza/invio. Utilizzalo con l'estensione HTML come URL per aprire una bozza o un invio.
- 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 (da utilizzare solo nel modello per la sezione Bozza).
- submitID: ID per l’invio elencato (da utilizzare solo nel modello per la sezione Invio).
- status: Stato del modulo inviato. (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 di invio per l’invio.
- iconClass: Classe CSS utilizzata per visualizzare la prima lettera della bozza/invio. Forms Portal include le seguenti classi, che forniscono sfondi colorati diversi.
- proprietario: Utente che ha creato la bozza/invio.
- Oggi: Data di creazione del progetto o della presentazione in DDFormato AAAA.
- TimeNow: Data di creazione del progetto o della presentazione in HHFormato SS 24 ore
Nota:
-
Per l’opzione Elimina nella sezione Bozze del componente Bozze e invii , denomina la classe CSS "__FP_deleteDraft". Inoltre, includi l'attributo "DraftID" con il valore ${DraftID}, che è l'id bozza della bozza corrispondente.
-
Durante la creazione di collegamenti per aprire bozze e invii, è possibile specificare $path.html come valore del href per il tag di ancoraggio.
A. Elemento contenitore
B. metadati "path" 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. Localizzare la stringa "Applica"
E. Utilizzo della proprietà di configurazione pdfLinkText
F. Utilizzo dei metadati "pdfUrl"
Suggerimenti, trucchi e problemi noti tips-tricks-and-known-issues
- Non utilizzare virgolette singole (') in alcun modello personalizzato.
- Per i metadati personalizzati, memorizza questa proprietà nel jcr:content/metadata solo nodo. Se lo archivi in qualsiasi altro luogo, Forms Portal non può visualizzare i metadati.
- Assicurati che il nome di eventuali metadati personalizzati o metadati esistenti non includa due punti (:). In questo caso, non è possibile visualizzarlo nell’interfaccia utente.
- ripetibile per i dati non ha alcun significato per un Collegamento componente. Adobe consiglia di evitare di utilizzare questa proprietà nel modello per un componente Collegamento.
Articoli correlati
- Abilitare i componenti del portale moduli
- Pagina del portale dei moduli
- Elencare moduli in una pagina web utilizzando le API
- Usa componente Bozze e invii
- Personalizzare l’archiviazione delle bozze e dei moduli inviati
- Esempio per l'integrazione del componente bozze e invii con il database
- Personalizzazione dei modelli per i componenti del portale dei moduli
- Introduzione alla pubblicazione di moduli su un portale