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

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

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

Componente collegamento link-component

Componente Bozze e invii drafts-amp-submissions-component

Nota:

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

Articoli correlati