DokumentationAEM 6.4Användarhandbok om Forms

Skapa anpassade utseenden i HTML5-formulär create-custom-appearances-in-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • User
CAUTION
AEM 6.4 har nått slutet på den utökade supporten och denna dokumentation är inte längre uppdaterad. Mer information finns i teknisk supportperiod. Hitta de versioner som stöds här.

Du kan koppla anpassade widgetar till en Mobile Forms. Du kan utöka befintliga jQuery-widgetar eller utveckla egna widgetar med hjälp av utseenderamverket. XFA-motorn använder olika widgetar, se Appearance Framework for adaptive and HTML5 forms för detaljerad information.

Ett exempel på standardwidget och anpassad widget
Bild: Ett exempel på standardwidget och anpassad widget

Integrera anpassade widgetar med HTML5-formulär integrating-custom-widgets-with-html-forms

Skapa en profil  create-a-profile-nbsp

Du kan skapa en profil eller välja en befintlig profil för att lägga till en anpassad widget. Mer information om hur du skapar profiler finns i Skapa anpassad profil.

Skapa en widget create-a-widget

HTML5-formulär innehåller en implementering av widgetramverket som kan utökas för att skapa nya widgetar. Implementeringen är en jQuery-widget abstractWidget som kan utökas för att skriva en ny widget. Den nya widgeten kan bara göras funktionell genom att du utökar/åsidosätter funktionerna nedan.

Funktion/klass
Beskrivning
återge
Återgivningsfunktionen returnerar jQuery-objektet för widgetens standardelement HTML. Standardelementet för HTML ska vara av fokuserbar typ. Till exempel: <a>, <input>och <li>. Det returnerade elementet används som $userControl. Om $userControl anger begränsningen ovan fungerar funktionerna i klassen AbstractWidget som förväntat, i annat fall kräver vissa av de vanliga API:erna (focus, click) ändringar.
getEventMap
Returnerar en karta som konverterar HTML-händelser till XFA-händelser.
{
oskärpa: XFA_EXIT_EVENT,
}
I det här exemplet visas att oskärpan är en HTML-händelse och att XFA_EXIT_EVENT motsvarar en XFA-händelse.
getOptionsMap
Returnerar en karta som ger en detaljerad beskrivning av vilken åtgärd som ska utföras när ett alternativ ändras. Nycklarna är de alternativ som finns för widgeten och värdena är de funktioner som anropas när en ändring av det alternativet upptäcks. Widgeten innehåller hanterare för alla vanliga alternativ (utom value och displayValue)
getCommitValue
Widget-ramverket läser in funktionen när värdet för widgeten sparas i XFAModel (till exempel vid exit-händelsen för ett textField). Implementeringen ska returnera värdet som sparas i widgeten. Hanteraren har det nya värdet för alternativet.
showValue
Som standard visas fältets rawValue i XFA vid enter-händelse. Den här funktionen anropas för att visa rawValue för användaren.
showDisplayValue
Som standard visas fältets formattedValue i XFA vid exit-händelse. Den här funktionen anropas för att visa formattedValue för användaren.

Om du vill skapa en egen widget inkluderar du referenser till JavaScript-filen som innehåller åsidosatta funktioner och nyligen tillagda funktioner i den profil som skapas ovan. Till exempel sliderNumericFieldWidget är en widget för numeriska fält. Om du vill använda widgeten i din profil i rubrikavsnittet inkluderar du följande rad:

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

Registrera anpassad widget med XFA Scripting Engine  register-custom-widget-with-xfa-scripting-engine-nbsp

När den anpassade widgetkoden är klar registrerar du widgeten med skriptmotorn med hjälp av registerConfigAPI för Form Bridge. WidgetConfigObject används som indata.

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject widgetconfigobject

Widgetkonfigurationen tillhandahålls som ett JSON-objekt (en samling nyckelvärdepar) där nyckeln identifierar fälten och värdet representerar widgeten som ska användas med dessa fält. En exempelkonfiguration ser ut så här:

*{*

*“identifier1” : “customwidgetname”,
“identifier2” : “customwidgetname2”,
..
}*

där "identifier" är en jQuery CSS-väljare som representerar ett visst fält, en uppsättning fält av en viss typ eller alla fält. I följande lista visas identifierarens värde i olika fall:

Typ av identifierare
Identifierare
Beskrivning
Särskilt fält med namn fältnamn
Identifierare:"div.fieldName"
Alla fält med namnet"fältnamn" återges med widgeten.
Alla fält av typen"type" (där typen är NumericField, DateField och så vidare).:
Identifierare: "div.type"
För Timefield och DateTimeField är typen textfält eftersom dessa fält inte stöds.
Alla fält
Identifierare: "div.field"
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da