Anpassen von Vorlagen für Forms Portal-Komponenten customizing-templates-for-forms-portal-components

Voraussetzungen prerequisites

Formularmetadaten verwalten

Kenntnisse im Bereich HTML und CSS

Übersicht overview

In der Benutzeroberfläche von AEM Forms können Sie jedem beliebigen Formular Metadaten hinzufügen. Benutzerdefinierte Metadaten können das Benutzererlebnis beim Auflisten und Suchen von Formularen in Ihrer Organisation verbessern.

Mit Forms Portal können Sie benutzerdefinierte Metadaten in Formularlisten verwenden. Beim Erstellen benutzerdefinierter Vorlagen für Assets können Sie das Layout ändern und benutzerdefinierte Metadaten mit Ihrem CSS-Stilsatz verwenden.

Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Vorlage für verschiedene Forms Portal-Komponenten zu erstellen.

Benutzerdefinierte Vorlage erstellen creating-a-nbsp-custom-template

Arbeitsbeispiel working-example

Im Folgenden finden Sie eine Beispielimplementierung einer benutzerdefinierten Vorlage, bei der Forms Portal ein benutzerdefiniertes Geometrixx Gov Card-Layout für die Komponente "Search & Lister"abruft.

<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>

Technische Spezifikationen für benutzerdefinierte Vorlagen technical-specifications-for-custom-templates

Eine benutzerdefinierte Vorlage für eine beliebige Formularportal-Komponente enthält wiederholbare und nicht wiederholbare Einträge. Wiederholbare Einträge sind grundlegende Entitäten für die Auflistung. Beispiele für wiederholbare Einträge sind die Komponenten "Search & Lister", "Drafts & Submissions"und "Link".

Forms Portal bietet eine Syntax für Platzhalter zur Anzeige von benutzerdefinierten bzw. OOTB-Metadaten. Die Platzhalter werden nach der Anzeige der Ergebnisse von Formularen, Entwürfen oder Übermittlungen ausgefüllt.

Um einen wiederholbaren Eintrag einzuschließen, konfigurieren Sie den Wert des Attributs data-repeatable  als  true.

*Im gezeigten Beispiel sind oben in der benutzerdefinierten Vorlage zwei Div-Elemente vorhanden. Das erste mit der CSS-Klasse „__FP_boxes-container“ fungiert als Containerelement für die aufgelisteten Formulare. Das zweite mit der CSS-Klasse „__FP_boxes“ ist eine Vorlage für die Basiseinheiten, in diesem Fall ein Formular. Das Attribut data-repeatable im Div-Element weist den Wert true auf.

Jeder Platzhalter verfügt über einen exklusiven OOTB-Metadatensatz. Um benutzerdefinierte Metadaten an einer bestimmten Stelle im Formular anzuzeigen, fügen Sie die $metadata_prop property am Ort.

Im Beispiel wird die Metadaten-Eigenschaft in mehreren Instanzen verwendet. Sie wird z. B. bei description,name,formUrl,htmlStyle,pdfUrl,pdfStyle ​und path ​in der genannten Weise verwendet.

Vordefinierte Metadaten out-of-the-box-metadata

Verschiedene Forms Portal-Komponenten bieten exklusive OOTB-Metadatensätze, die Sie für die Auflistung verwenden können.

Komponente „Suche und Auflister“ search-amp-lister-component

Unterstützung für Lokalisierung, Sortierung und Verwendung von Konfigurationseigenschaften in der Benutzeroberfläche (nur Search & Lister):

Komponente „Link“ link-component

Komponente "Drafts & Submissions" drafts-amp-submissions-component

Hinweis:

A. Container-Element

B.  „path“-Metadaten mit einer festen Hierarchie zum Abruf der für jedes Formular gespeicherten Miniatur.

C. Datenwiederholbares Attribut für den Vorlagenbereich jedes Formulars

D. Zu lokalisierender String „Apply“

E. Verwenden der Konfigurationseigenschaft „pdfLinkText“

F.  Verwenden der Metadaten „pdfUrl“

Tipps, Tricks und bekannte Probleme tips-tricks-and-known-issues

Ähnliche Artikel