Sjablonen aanpassen voor componenten van een formulierportal

Vereisten

Metagegevens van formulieren beheren

Werken met kennis van HTML en CSS

Overzicht

In de AEM Forms-gebruikersinterface kunt u metagegevens toevoegen aan elk formulier. Aangepaste metagegevens kunnen de gebruikerservaring verbeteren wanneer u formulieren van uw organisatie aanbiedt en zoekt.

Met Forms Portal kunt u aangepaste metagegevens gebruiken in formulierlijsten. Wanneer u aangepaste sjablonen voor elementen maakt, kunt u de lay-out van deze sjablonen wijzigen en aangepaste metagegevens gebruiken met de CSS-stijlset.

Voer de volgende stappen uit om een aangepaste sjabloon te maken voor verschillende Forms Portal-componenten.

Een aangepaste sjabloon maken

1. Een koppeling maken:Mapknooppunt onder */apps *

   Voeg een eigenschap "fpContentType" toe. Geef de juiste waarden voor de eigenschap op, afhankelijk van de component waarvoor u de aangepaste sjabloon definieert.

   • Onderdeel Zoeken en register: "/libs/fd/fp/formTemplate"

   • Component Concepten en verzendingen:

     • Sectie Concepten: /libs/fd/fp/conceptsTemplate
     • Sectie Verzending: /libs/fd/fp/submissionTemplate

   • Koppelingscomponent: /libs/fd/fp/linkTemplate

   Voeg een titel toe die u wilt weergeven tijdens het selecteren van lay-outsjablonen.

   *Opmerking: De titel kan verschillen van de knooppuntnaam van sling:Folder u creeerde. *
   In de volgende afbeelding ziet u de configuratie voor de component Search & Lister.

2. Maak een bestandssjabloon.html in deze map om als aangepaste sjabloon te dienen.

3. Schrijf de aangepaste sjabloon en gebruik aangepaste metagegevens zoals hieronder beschreven.

Werkvoorbeeld

Hieronder volgt een voorbeeldimplementatie van een aangepaste sjabloon waarbij Forms Portal een aangepaste Geometrixx Gov Card Layout voor de component Search & Lister verkrijgt.

<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 specificaties voor aangepaste sjablonen

Een douanemalplaatje voor om het even welke component van Forms Portal omvat herhaalbare en niet-herhaalbare ingangen. Herhaalbare vermeldingen zijn basisentiteiten voor plaatsing op de lijst. Voorbeelden van herhaalbare items zijn Zoeken en registreren, Concepten en verzenden en Koppelingscomponenten.

Forms Portal biedt een syntaxis waarmee plaatsaanduidingen aangepaste/OTB-metagegevens kunnen weergeven. De plaatsaanduidingen worden gevuld nadat de resultaten van formulieren, concepten of verzendingen zijn weergegeven.

Om een herhaalbare ingang te omvatten, vorm de waarde van de attributen data-herhaalbaar tot true.

*In het besproken voorbeeld, zijn twee elementen Div aanwezig bij de bovenkant in het douanemalplaatje. De eerste, met de CSS-klasse "__FP_boxes-container", werkt als een containerelement voor de formulieren die worden weergegeven. De tweede, met de CSS-klasse "__FP_boxes", is een sjabloon voor de basisentiteiten, in dit geval een Form. De data-herhaalbaar kenmerk aanwezig in Div-element heeft de waarde true.

Elke plaatsaanduiding heeft een exclusieve OTB-metagegevensset. Als u aangepaste metagegevens wilt weergeven op een bepaalde plaats op het formulier, voegt u de opdracht $metadata_prop, eigenschap ter plekke.

In het voorbeeld wordt de eigenschap metadata in meerdere instanties gebruikt. Het wordt bijvoorbeeld gebruikt in beschrijving,name,formUrl,htmlStyle,pdfUrl,pdfStyle, en pad​op de voorgeschreven wijze.

Metagegevens uit het vak

Verschillende Forms Portal-componenten bieden exclusieve sets OOTB-metagegevens die u voor een aanbieding kunt gebruiken.

Onderdeel Zoeken en bibliotheken

• Titel: Titel van het formulier

• name: Naam van het formulier (meestal gelijk aan de titel)

• beschrijving: Beschrijving van het formulier

• formUrl: URL om het formulier weer te geven als HTML

• pdfUrl: URL om het formulier weer te geven als PDF

• assetType: Type van het element. Geldige waarden zijn Formulier, PDF-formulier, Formulier afdrukken, en Adaptief formulier

• htmlStyle & pdfStyle: Weergavestijl voor HTML- en PDF-pictogrammen die respectievelijk worden gebruikt voor rendering. Geldige waarden zijn "__FP_display_none" of blank

  Opmerking: Vergeet niet de klasse __FP_display_none in uw aangepaste stijlblad te gebruiken

• downloadUrl: URL om een middel te downloaden.

Ondersteuning voor lokalisatie, sorteren en het gebruik van configuratie-eigenschappen in de gebruikersinterface (alleen zoeken en registreren):

1. Ondersteuning voor lokalisatie: Als u statische tekst wilt lokaliseren, gebruikt u het kenmerk ${localize-UW_TEKST​} en maak de gelokaliseerde waarde beschikbaar, als reeds niet bestaat.

   In het besproken voorbeeld worden de kenmerken ${localize-Apply} en ${localize-Download} gebruikt om de tekst Toepassen en downloaden te lokaliseren.

2. Ondersteuning voor sorteren: Klik op het element HTML om de zoekresultaten te sorteren. Als u sorteren in een ingediende lay-out wilt implementeren, voegt u het kenmerk "data-sortKey" toe aan de desbetreffende tabelkoptekst. Voeg ook de waarde ervan toe als de metagegevens waarvoor u wilt sorteren.

   Voor de koptekst 'Titel' in de rasterweergave is de waarde van de header 'data-sortKey' bijvoorbeeld 'title'. Klik op de kop om de waarden in een bepaalde kolom te sorteren.

3. Configuratieeigenschappen gebruiken: De component Search & Lister heeft verscheidene configuraties die u op het gebruikersinterface kunt gebruiken. Als u bijvoorbeeld HTML ToolTip-tekst wilt weergeven die is opgeslagen via het dialoogvenster Bewerken, gebruikt u de opdracht ${config-htmlLinkText}-kenmerk. Op dezelfde manier kunt u voor knopinfo-tekst de opdracht ${config-pdfLinkText} kenmerk.

Component Koppelen

• Titel: Titel van het formulier
• formUrl: URL om het formulier weer te geven als HTML
• target: Doelkenmerk van de koppeling. Geldige waarden zijn "_blank" en "_self".
• linkText: Bijschrift koppelen

Component Concepten en verzendingen

• Pad: Pad van het metagegevensknooppunt voor concept/verzending. Gebruik dit bestand met de extensie .HTML als een URL om een concept of verzending te openen.
• contextPath: Contextpad van AEM instantie
• firstLetter: Eerste letter (hoofdletters) van de titel van het adaptieve formulier, die als concept is opgeslagen of is ingediend.
• formName: De titel van het adaptieve formulier, dat als concept is opgeslagen of is verzonden.
• conceptID: Id voor het concept dat wordt weergegeven (alleen gebruiken in de sjabloon voor de sectie Concept).
• submitID: Id voor de verzending die wordt vermeld (alleen gebruiken in de sjabloon voor de sectie Verzending).
• status: Status van het ingediende formulier. (Alleen gebruiken in de sjabloon voor de sectie Verzending).
• beschrijving: Beschrijving van het aan het ontwerp of de indiening verbonden adaptieve formulier.
• diffTime: Verschil tussen de huidige tijd en de laatste opslagactie voor het concept. U kunt ook een verschil maken tussen de huidige tijd en de laatste verzendactie voor de verzending.
• iconClass: CSS-klasse die wordt gebruikt om de eerste letter van het concept/de verzending weer te geven. Forms Portal bevat de volgende klassen, die verschillende gekleurde achtergronden bieden.
• eigenaar: Gebruiker die het concept/de verzending heeft gemaakt.
• Vandaag: Datum van opstelling of indiening in DD:MM:YYYY-indeling.
• TimeNow: Tijdstip van ontwerp of indiening in HH:MM:SS 24-uursnotatie

Opmerking:

1. Geef de CSS-klasse "__FP_deleteDraft" een naam voor de verwijderoptie in de sectie Concepten onder de component Concepten en verzendingen. Voeg ook het kenmerk "draftID" toe aan de waarde ${conceptID}, de ontwerp-id van het corresponderende ontwerp.

2. Tijdens het maken van koppelingen naar open concepten en verzendingen kunt u $path.html als de waarde van de href voor de ankertag.

A. Containerelement

B. 'path'-metagegevens met een vaste hiërarchie om de voor elk formulier opgeslagen miniatuur te verkrijgen.

C. Kenmerk dat kan worden herhaald voor de sjabloonsectie voor elk formulier

D. De tekenreeks Toepassen lokaliseren

E. De configuratieeigenschap pdfLinkText gebruiken

F. De metagegevens "pdfUrl" gebruiken

Tips, trucs en bekende problemen

1. Gebruik geen enkel aanhalingsteken (') in enige douanemalplaatje.
2. Voor aangepaste metagegevens slaat u deze eigenschap op het tabblad jcr:inhoud/metagegevens alleen knooppunt. Als u het op een andere plaats opslaat, kan Forms Portal de meta-gegevens niet tonen.
3. Zorg ervoor dat de naam van aangepaste metagegevens of bestaande metagegevens geen dubbele punt (:) bevat. Als dit het geval is, kunt u het niet weergeven in de gebruikersinterface.
4. data-herhaalbaar heeft geen betekenis voor een Koppeling component. Adobe raadt u aan deze eigenschap niet te gebruiken in de sjabloon voor een koppelingscomponent.

Verwante artikelen

• Formulierportonderdelen inschakelen
• Pagina Formulierportal maken
• Formulieren op een webpagina weergeven met API's
• Concepten en verzendingscomponent gebruiken
• Opslag van concepten en verzonden formulieren aanpassen
• Voorbeeld voor het integreren van concepten en verzendingen in de database
• Sjablonen aanpassen voor componenten van een formulierportal
• Inleiding tot het publiceren van formulieren op een portal

Business.Adobe.com-bronnen

Auto Text Summarization Automated Onboarding Personalized Experiences Dynamic Media Customer Experience Management Digital Signage