Anpassa mallar för komponenter i formulärportalen customizing-templates-for-forms-portal-components
Förutsättningar prerequisites
Arbetskunskaper i HTML och CSS
Översikt overview
Med AEM Forms användargränssnitt kan du lägga till metadata i alla formulär. Anpassade metadata kan förbättra användarupplevelsen samtidigt som du listar och söker efter formulär i organisationen.
Med Forms Portal kan du använda anpassade metadata i formulärlistor. När du skapar anpassade mallar för resurser kan du ändra deras layout och använda anpassade metadata med din CSS-formatuppsättning.
Följ de här stegen för att skapa en anpassad mall för olika Forms Portal-komponenter.
Skapa en anpassad mall creating-a-nbsp-custom-template
-
Skapa en sling:Mappnod under */apps *
Lägg till en fpContentType-egenskap. Ange lämpliga värden för egenskapen beroende på vilken komponent du definierar den anpassade mallen för.
-
Komponenten Search & Lister: "/libs/fd/fp/formTemplate"
-
Komponenten Utkast och inskickat material:
- Avsnittet Utkast: /libs/fd/fp/draftTemplate
- Inlämningsavsnitt: /libs/fd/fp/sendingTemplate
-
Länkkomponent: /libs/fd/fp/linkTemplate
Lägg till en titel som du vill ska visas när du väljer layoutmallar.
*Obs! Titeln kan skilja sig från nodnamnet för sling:Mapp som du skapade. *
I följande bild visas konfigurationen för komponenten Sök och Lister. -
-
Skapa en filmall.html i den här mappen som ska fungera som anpassad mall.
-
Skriv den anpassade mallen och använd anpassade metadata enligt beskrivningen nedan.
Exempel working-example
Nedan följer ett exempel på implementering av en anpassad mall där Forms Portal förvärvar en anpassad Geometrixx-Gov-kortlayout för komponenten Sök och visa.
<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>
Tekniska specifikationer för anpassade mallar technical-specifications-for-custom-templates
En anpassad mall för valfri Forms Portal-komponent innehåller repeterbara och icke-repeterbara poster. Repeterbara poster är grundläggande enheter som ska tas upp i förteckningen. Exempel på upprepningsbara poster är komponenterna Sök och Lister, Utkast och överföringar samt Länka.
Forms Portal innehåller en syntax där platshållare kan visa anpassade metadata/OTB-metadata. Platshållarna fylls i när resultatet av formulär, utkast eller inskickade formulär visas.
Om du vill ta med en repeterbar post konfigurerar du värdet för attributet data-repeterbar till true.
*I det exempel som beskrivs finns två Div-element högst upp i den anpassade mallen. Den första, med CSS-klassen"__FP_boxes-container", fungerar som ett behållarelement för de formulär som visas. Den andra, med CSS-klassen"__FP_boxes", är en mall för de grundläggande entiteterna, i det här fallet ett formulär. The data-repeterbar attributet i Div-elementet har värdet true.
Varje platshållare har en exklusiv OTB-metadatauppsättning. Om du vill visa anpassade metadata på en viss plats i formuläret lägger du till Egenskapen $metadata_prop på stället.
I exemplet används metadataegenskapen i flera instanser. Den används till exempel i description,name,formUrl,htmlStyle,pdfUrl,pdfStyle och bana på föreskrivet sätt.
Inga metadata out-of-the-box-metadata
Olika Forms Portal-komponenter innehåller exklusiva uppsättningar OTB-metadata som du kan använda för att visa en lista.
Komponenten Search & Lister search-amp-lister-component
-
Titel: Formulärets namn
-
name: Formulärets namn (oftast är det samma som titeln)
-
description: Beskrivning av formuläret
-
formUrl: URL för att återge formuläret som HTML
-
pdfUrl: URL för att återge formuläret som PDF
-
assetType: Typ av tillgång. Giltiga värden är Formulär, PDF Form, Skriv ut formulär och Adaptiv form
-
htmlStyle & pdfStyle: Visningsformat för HTML och PDF som används för återgivning. Giltiga värden är __FP_display_none" eller blank
Obs! Kom ihåg att använda klassen __FP_display_none i din anpassade formatmall
-
downloadUrl: URL för att hämta en resurs.
Stöd för lokalisering, sortering och användning av konfigurationsegenskaper i användargränssnittet (endast sökning och lister):
-
Lokaliseringsstöd: Använd attributet för att lokalisera statisk text ${localize-DIN_TEXT} och göra det lokaliserade värdet tillgängligt, om det inte redan finns.
I det exempel som behandlas används attributen ${localize-Apply} och ${localize-Download} för att lokalisera texten Använd och Hämta.
-
Stöd för sortering: Klicka på elementet HTML för att sortera sökresultaten. Om du vill implementera sortering i en skickad layout lägger du till attributet data-sortKey i den aktuella tabellrubriken. Lägg dessutom till dess värde som de metadata som du vill sortera efter.
För rubrikrubriken i stödrastervyn är värdet för rubriken"data-sortKey" till exempel"title". Klicka på rubriken om du vill sortera värdena i en viss kolumn.
-
Använda konfigurationsegenskaper: Komponenten Sök och visa har flera konfigurationer som du kan använda i användargränssnittet. Om du till exempel vill visa HTML-verktygstipstext som har sparats i redigeringsdialogrutan använder du ${config-htmlLinkText}-attribut. På samma sätt kan du använda kommandot ${config-pdfLinkText} -attribut.
Länkkomponent link-component
- Titel: Formulärets namn
- formUrl: URL för att återge formuläret som HTML
- target: Länkens målattribut. Giltiga värden är "_blank" och "_self".
- linkText: Länkbeskrivning
Komponenten Utkast och inskickat material drafts-amp-submissions-component
- Bana: Sökväg till metadatanoden för utkast/överföringar. Använd det med tillägget .HTML som en URL för att öppna ett utkast eller en sändning.
- contextPath: AEM kontextsökväg
- firstLetter: Första bokstaven (versaler) i titeln på det adaptiva formuläret, som sparats som utkast eller skickad.
- formName: Titeln på det adaptiva formuläret, som har sparats som utkast eller skickats.
- draftID: ID för det utkast som visas (Använd bara i mallen för avsnittet Utkast).
- submitID: ID för överföringen som visas (Använd bara i mallen för avsnittet Skicka).
- status: Status för det skickade formuläret. (Använd endast i mallen för avsnittet Skicka).
- description: Beskrivning av det adaptiva formulär som är kopplat till utkastet eller inlämningen.
- diffTime: Skillnaden mellan aktuell tid och den senaste sparåtgärden för utkastet. Alternativt kan det vara en skillnad mellan den aktuella tiden och den senaste sändningsåtgärden för överföringen.
- iconClass: CSS-klass som används för att visa den första bokstaven i utkastet/sändningen. Forms Portal innehåller följande klasser med olika färgade bakgrunder.
- ägare: Användare som skapade utkastet/överföringen.
- Idag: Datum då utkastet eller inlämningen skapades i DDYYYY-format.
- TimeNow: Tid då utkastet eller inlämningen skapades i HHSS 24-timmarsformat
Obs!
-
Om du vill ta bort alternativet i avsnittet Utkast under komponenten Utkast och överföringar ska du ge CSS-klassen namnet"__FP_deleteDraft". Inkludera dessutom attributet "draftID" med värdet ${draftID}, som är utkastets ID.
-
När du skapar länkar till öppna utkast och inskickade dokument kan du ange $path.html som värdet för href -attribut för ankartaggen.
A. Behållarelement
B. "path"-metadata med en fast hierarki för att få miniatyrbilder lagrade för varje formulär.
C. Attribut som kan upprepas för varje formulär i mallavsnittet
D. För att lokalisera strängen "Använd"
E. Använda konfigurationsegenskapen pdfLinkText
F. Använda metadata för pdfUrl
Tips, tricks och kända fel tips-tricks-and-known-issues
- Använd inte enkla citattecken (') i någon anpassad mall.
- För anpassade metadata sparar du den här egenskapen på jcr:innehåll/metadata endast nod. Om du lagrar det på något annat ställe kan inte Forms Portal visa metadata.
- Kontrollera att namnet på anpassade metadata eller befintliga metadata inte innehåller ett kolon (:). Om det gör det kan du inte visa det i användargränssnittet.
- data-repeterbar har ingen betydelse för Länk -komponenten. Adobe rekommenderar att du undviker att använda den här egenskapen i mallen för en länkkomponent.
Relaterade artiklar
- Aktivera komponenter i formulärportalen
- Skapa portalsida för formulär
- Visa formulär på en webbsida med API:er
- Använda komponenten Utkast och inskickat material
- Anpassa lagring av utkast och inskickade formulär
- Exempel för att integrera komponent för utkast och inlämning med databas
- Anpassa mallar för komponenter i formulärportalen
- Introduktion till att publicera formulär på en portal