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. Een tekenreeks maken:map

  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 op te nemen, vorm de waarde van het attribuut data-repeatable aan 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. Het data-repeatable attribuut aanwezig in het element Div 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 eigenschap $metadata_prop op de plaats toe.

In het voorbeeld wordt de eigenschap metadata in meerdere instanties gebruikt. Bijvoorbeeld, wordt het gebruikt in description,name,formUrl,htmlStyle,pdfUrl,pdfStyle, en <a 12/>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

  • Titel: Titel van het formulier

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

  • beschrijving: Beschrijving van het formulier

  • formUrl: URL om het formulier te genereren als HTML

  • pdfUrl: URL om het formulier te genereren als PDF

  • assetType: Type van het element. Geldige waarden zijn Form, PDF Form, Print Form en Adaptive Form

  • htmlStyle & pdfStyle: Weergavestijl voor respectievelijk HTML- en PDF-pictogrammen die 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_TEXT​} en stelt u de gelokaliseerde waarde beschikbaar als dit nog niet het geval is.

    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 HTML-element 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. Configuratie-eigenschappen 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 het kenmerk ${config-htmlLinkText} . Op dezelfde manier gebruikt u voor tekst in het knopinfo-bestand ${config-pdfLinkText} het kenmerk.

  • Titel: Titel van het formulier
  • formUrl: URL om het formulier te genereren als HTML
  • doel: 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 deze extensie 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 waarop het concept of de verzending is gemaakt in de indeling DD:MM:YYYY.
  • TijdNu: Tijdstip van aanmaak of verzending in UU: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. Bovendien omvat het attribuut "draftID"met de waarde ${draftID}, die conceptidentidentiteitskaart van het overeenkomstige ontwerp is.

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

Concepten en verzendknooppunt

A. Containerelement

Metagegevens van B. "pad" met een vaste hiërarchie om de voor elk formulier opgeslagen miniatuur te verkrijgen.

C. Data-herhaalbaar kenmerk gebruikt voor de sjabloonsectie voor elk formulier

D. De tekenreeks Toepassen lokaliseren

E. De configuratie-eigenschap 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 alleen op het knooppunt jcr:content/metadata op. 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. gegeven- herhaalbaar heeft geen betekenis voor een ​Linkcomponent. Adobe raadt u aan deze eigenschap niet te gebruiken in de sjabloon voor een koppelingscomponent.

Verwante artikelen

Op deze pagina