Kenntnisse im Umgang mit HTML und CSS
In der Benutzeroberfläche von AEM Forms können Sie jedem beliebigen Formular Metadaten hinzufügen. Mit benutzerdefinierten Metadaten können Sie die Benutzererfahrung bei der Auflistung und beim Durchsuchen von Formularen in Ihrem Unternehmen verbessern.
In Forms Portal können Sie benutzerdefinierte Metadaten in den Formularlisten verwenden. Beim Erstellen von benutzerdefinierten Vorlagen für Assets können Sie das Layout bearbeiten und benutzerdefinierte Metadaten mit Ihrem CSS-Vorlagensatz verwenden.
Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Vorlage für verschiedene Forms Portal-Komponenten zu erstellen.
Erstellen eines sling:Folder-Knotens unter /apps
Fügen Sie eine fpContentType-Eigenschaft hinzu. Geben Sie entsprechende Werte für die Eigenschaft abhängig von der Komponente an, für die Sie die benutzerdefinierte Vorlage definieren.
Komponente „Search & Lister“: „/libs/fd/fp/formTemplate“
Komponente „Drafts & Submissions“:
Komponente „Link“: /libs/fd/fp/linkTemplate
Fügen Sie einen Titel hinzu, der während der Auswahl der Layoutvorlagen angezeigt werden soll.
Der Titel kann sich von dem Knotennamen des erstellten sling:Folder unterscheiden.
Die folgende Abbildung zeigt die Konfiguration der Komponente „Search & Lister“.
Erstellen Sie in diesem Ordner eine Datei „Template.html“, die als benutzerdefinierte Vorlage dienen soll.
Schreiben Sie die benutzerdefinierte Vorlage und verwenden Sie dafür benutzerdefinierte Metadaten wie unten beschrieben.
Beim Folgenden Beispiel handelt es sich um eine Implementierung einer benutzerdefinierten Vorlage, bei der Forms Portal ein benutzerdefiniertes Geometrixx Gov Card-Layout von der 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>
Eine benutzerdefinierte Vorlage für eine beliebige Formularportal-Komponente enthält wiederholbare und nicht wiederholbare Einträge. Wiederholbare Einträge sind die grundlegenden Einheiten für die Auflistung. Beispiele für wiederholbare Einträge sind Komponenten des Typs „Search & Lister“, „Drafts & Submissions“ sowie „Link“.
Forms Portal bietet eine Syntax für Platzhalter zur Anzeige von benutzerdefinierten bzw. OOTB-Metadaten. Die Platzhalter werden nach der Anzeige der Ergebnisse aus Formularen, Entwürfen oder Übermittlungen angezeigt.
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-repeatableim Div-Element weist den Wert trueauf.
Jeder Platzhalter verfügt über einen exklusiven OOTB-Metadatensatz. Um die benutzerdefinierten Metadaten an einer bestimmten Position im Formular anzuzeigen, fügen Sie die ${metadata_prop}-Eigenschaft an der entsprechenden Position hinzu.
Im Beispiel wird die Metadaten-Eigenschaft in mehreren Instanzen verwendet. Sie wird z. B. bei description,name,formUrl,htmlStyle,pdfUrl,pdfStyleund pathin der genannten Weise verwendet.
Verschiedene Forms Portal-Komponenten bieten exklusive OOTB-Metadatensätze, die Sie für Auflistungen verwenden können.
Title: Titel des Formulars
name: Name des Formulars (meist identisch mit dem Titel)
description: Beschreibung des Formulars
formUrl: URL zur Ausgabe des Formulars als HTML
pdfUrl: URL zur Ausgabe des Formulars als PDF
assetType: Typ des Assets. Gültige Werte sind unter anderem Form,PDF Form,Print Form und Adaptive Form
htmlStyle& pdfStyle: Anzeigestil für HTML- bzw. PDF-Symbole für die Ausgabe. Gültige Werte sind „__FP_display_none“ oder leer.
Denken Sie daran, im benutzerdefinierten Stylesheet die Klasse „__FP_display_none“ zu verwenden.
Unterstützung für Lokalisierung, Sortierung und Verwendung von Konfigurationseigenschaften in der Benutzeroberfläche (nur Search & Lister):
Lokalisierungsunterstützung: Zur Lokalisierung von beliebigem statischem Text verwenden Sie das Attribut ${localize-YOUR_TEXT}
und stellen Sie den lokalisierten Wert bereit, sofern er nicht bereits vorhanden ist.
Im genannten Beispiel werden die Attribute ${localize-Apply}
und ${localize-Download}
verwendet, um den Text „Apply“ und „Download“ zu lokalisieren.
Unterstützung für die Sortierung: Klicken Sie auf das HTML-Element, um die Suchergebnisse zu sortieren. Um Sortierung in ein Tabellenlayout einzufügen, fügen Sie dem jeweiligen Tabellen-Header das Attribut „data-sortKey“ hinzu. Fügen Sie außerdem seinen Wert als die Metadaten hinzu, nach denen Sie sortieren möchten.
So ist z. B. im Header „Title“ in der Rasteransicht der Wert für den Header „data-sortKey“ „title“. Klicken Sie auf die Überschrift, um die Werte in einer bestimmten Spalte zu sortieren.
Verwenden von Konfigurationseigenschaften: Die Komponente „Search & Lister“ verfügt über mehrere Konfigurationen, die Sie in der Benutzeroberfläche verwenden können. Verwenden Sie z. B. das Attribut ${config-htmlLinkText}
, um im Bearbeitungsdialogfeld gespeicherten HTML-QuickInfo-Text anzuzeigen. Verwenden Sie analog dazu für PDF-QuickInfo-Text das Attribut ${config-pdfLinkText}
.
Hinweis:
Geben Sie der CSS-Klasse für die Löschoption im Bereich „Drafts“ in der Komponente „Drafts & Submissions“ den Namen „__FP_deleteDraft“. Schließen Sie außerdem das Attribut „draftID“ mit dem Wert ${draftID} ein, bei dem es sich um die Entwurfs-ID des entsprechenden Entwurfs handelt.
Beim Erstellen von Links zu geöffneten Entwürfen und Übermittlungen können Sie ${path}.html als Wert des href-Attributs für das Anker-Tag angeben.
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“