Benutzerdefinierte Funktionen in Kernkomponenten für adaptive Formulare
- Themen:
- Adaptive Formulare
- Kernkomponenten
Erstellt für:
- Admin
- Benutzende
- Entwickler
In diesem Artikel wird das Erstellen benutzerdefinierter Funktionen mit der neuesten Kernkomponente für adaptive Formulare beschrieben, die die aktuellsten Funktionen aufweist, z. B.:
- Caching-Funktion für benutzerdefinierte Funktionen
- Globale Unterstützung von Objekt- und Feldobjekten für benutzerdefinierte Funktionen
- Unterstützung für moderne JavaScript-Funktionen wie Let- und Pfeil-Funktionen (ES10-Unterstützung)
Stellen Sie sicher, dass die neueste Formularversion in Ihrer AEM Forms-Kernkomponentenumgebung festgelegt ist, damit Sie die neuesten Features in benutzerdefinierten Funktionen verwenden können.
Einführung
AEM Forms 6.5 umfasst JavaScript-Funktionen, mit denen Sie mithilfe des Regeleditors komplexe Geschäftsregeln definieren können. AEM Forms bietet verschiedene vordefinierte Funktionen, für die jedoch in vielen Fällen benutzerdefinierte Funktionen definiert werden müssen, damit sie in mehreren Formularen verwendet werden können. Diese benutzerdefinierten Funktionen erweitern die Möglichkeiten von Formularen, indem sie die Be- und Verarbeitung von eingegebenen Daten ermöglichen, wenn spezifische Anforderungen erfüllt werden sollen. Darüber hinaus ermöglichen sie dynamische Veränderungen des Formularverhaltens basierend auf den vordefinierten Kriterien.
Vorteile benutzerdefinierter Funktionen
Vorteile der Verwendung benutzerdefinierter Funktionen in Kernkomponenten für adaptive Formulare sind:
- Datenverwaltung: Benutzerdefinierte Funktionen helfen beim Verwalten und Verarbeiten der Daten, die in die Formularfelder eingegeben wurden.
- Datenverarbeitung: Benutzerdefinierte Funktionen helfen bei der Verarbeitung der in die Formularfelder eingegebenen Daten.
- Datenvalidierung: Benutzerdefinierte Funktionen ermöglichen Ihnen benutzerdefinierte Überprüfungen von Formulareingaben und das Anzeigen bestimmter Fehlermeldungen.
- Dynamisches Verhalten: Mit benutzerdefinierten Funktionen können Sie das dynamische Verhalten Ihrer Formulare anhand bestimmter Bedingungen steuern. Beispielsweise können Sie Felder ein-/ausblenden, Feldwerte ändern oder die Formularlogik dynamisch anpassen.
- Integration: Sie können benutzerdefinierte Funktionen zur Integration mit externen APIs oder Diensten verwenden. Dies ist hilfreich beim Abrufen von Daten aus externen Quellen, beim Senden von Daten an externe REST-Endpunkte oder beim Ausführen benutzerdefinierter Aktionen entsprechend externer Ereignisse.
Benutzerdefinierte Funktionen sind im Wesentlichen Client-Bibliotheken, die in der JavaScript-Datei hinzugefügt werden. Nachdem Sie eine benutzerdefinierte Funktion erstellt haben, steht sie im Regeleditor zur Auswahl durch Benutzende in einem adaptiven Formular zur Verfügung. Die benutzerdefinierten Funktionen sind im Regeleditor anhand der JavaScript-Anmerkungen zu erkennen.
Unterstützte JavaScript-Anmerkungen für benutzerdefinierte Funktionen
JavaScript-Anmerkungen bieten Metadaten für JavaScript-Code. Dies schließt Kommentare ein, die mit bestimmten Symbolen beginnen, z. B. /**
und @
. Die Anmerkungen enthalten wichtige Informationen zu Funktionen, Variablen und anderen Elementen im Code. Adaptive Formulare unterstützen die folgenden JavaScript-Anmerkungen für benutzerdefinierte Funktionen:
Name
Der Name wird verwendet, um die benutzerdefinierte Funktion im Regeleditor eines adaptiven Formulars zu erkennen. Die folgenden Syntaxen werden verwendet, um eine benutzerdefinierte Funktion zu benennen:
@name [functionName] <Function Name>
@function [functionName] <Function Name>
@func [functionName] <Function Name>
[functionName]
ist der Name der Funktion. Leerzeichen sind nicht zulässig.<Function Name>
ist der Anzeigename der Funktion im Regeleditor von adaptiven Formularen.Wenn der Anzeigename der Funktion mit dem Namen der Funktion selbst übereinstimmt, können Sie in der Syntax
[functionName]
weglassen.Parameter
Der Parameter ist eine Liste von Argumenten, die von benutzerdefinierten Funktionen verwendet werden. Eine Funktion kann mehrere Parameter unterstützen. Die folgenden Syntaxen werden verwendet, um einen Parameter in einer benutzerdefinierten Funktion zu definieren:
-
@param {type} name <Parameter Description>
-
@argument
{type} name <Parameter Description>
-
@arg
{type}
name <Parameter Description>
{type}
gibt den Parametertyp an. Zulässige Parametertypen sind:- string: Stellt einen einzelnen Zeichenfolgenwert dar.
- number: Stellt einen einzelnen numerischen Wert dar.
- boolean: Stellt einen einzelnen booleschen Wert dar (true oder false).
- string[]: Stellt ein Array von Zeichenfolgenwerten dar.
- number[]: Stellt ein Array numerischer Werte dar.
- boolean[]: Stellt ein Array boolescher Werte dar.
- date: Stellt einen einzelnen Datumswert dar.
- date[]: Stellt ein Array von Datumswerten dar.
- array: Stellt ein generisches Array dar, das Werte verschiedener Typen enthält.
- object: Stellt ein an eine benutzerdefinierte Funktion übergebenes Formularobjekt dar, anstatt dessen Wert direkt weiterzugeben.
- scope: Stellt das globals-Objekt dar, das schreibgeschützte Variablen wie Formularinstanzen, Zielfeldinstanzen und Methoden zum Ausführen von Formularänderungen innerhalb der benutzerdefinierten Funktionen enthält. Es wird als letzter Parameter in den JavaScript-Anmerkungen deklariert und ist für den Regeleditor eines adaptiven Formulars nicht sichtbar. Der Parameter „scope“ greift auf das Objekt des Formulars oder der Komponente zu, um die für die Formularverarbeitung erforderliche Regel oder das Ereignis auszulösen. Um weitere Informationen zum globals-Objekt und dessen Verwendung zu erhalten, klicken Sie hier.
Beim Parametertyp wird nicht zwischen Groß- und Kleinschreibung unterschieden und Leerzeichen sind im Parameternamen nicht zulässig.
<Parameter Description>
enthält Details zum Zweck des Parameters. Dies kann aus mehreren Wörtern bestehen.
Rückgabetyp
Der Rückgabetyp gibt den Typ des Werts an, den die benutzerdefinierte Funktion nach der Ausführung zurückgibt. Die folgenden Syntaxen werden verwendet, um einen Rückgabetyp in einer benutzerdefinierten Funktion zu definieren:
@return {type}
@returns {type}
{type}
gibt den Rückgabetyp der Funktion an. Zulässige Rückgabetypen sind:- string: Stellt einen einzelnen Zeichenfolgenwert dar.
- number: Stellt einen einzelnen numerischen Wert dar.
- boolean: Stellt einen einzelnen booleschen Wert dar (true oder false).
- string[]: Stellt ein Array von Zeichenfolgenwerten dar.
- number[]: Stellt ein Array numerischer Werte dar.
- boolean[]: Stellt ein Array boolescher Werte dar.
- date: Stellt einen einzelnen Datumswert dar.
- date[]: Stellt ein Array von Datumswerten dar.
- array: Stellt ein generisches Array dar, das Werte verschiedener Typen enthält.
- object: Stellt das Formularobjekt anstatt direkt den Wert dar.
Beim Rückgabetyp wird nicht zwischen Groß- und Kleinschreibung unterschieden.
Privat
Die als privat deklarierte benutzerdefinierte Funktion wird nicht in der Liste der benutzerdefinierten Funktionen im Regeleditor eines adaptiven Formulars angezeigt. Standardmäßig sind benutzerdefinierte Funktionen öffentlich. Die Syntax zum Deklarieren der benutzerdefinierten Funktion als privat lautet @private
.
Richtlinien beim Erstellen benutzerdefinierter Funktionen
Um die benutzerdefinierten Funktionen im Regeleditor aufzulisten, können Sie eines der folgenden Formate verwenden:
Funktionsanweisung mit oder ohne jsdoc-Kommentare
Sie können eine benutzerdefinierte Funktion mit oder ohne jsdoc-Kommentare erstellen.
function functionName(parameters)
{
// code to be executed
}
Wenn Benutzende zu einer benutzerdefinierten Funktion keine JavaScript-Anmerkungen hinzufügen, wird sie im Regeleditor anhand ihres Funktionsnamens aufgelistet. Es wird jedoch empfohlen, JavaScript-Anmerkungen einzubeziehen, um die Lesbarkeit der benutzerdefinierten Funktionen zu verbessern.
Pfeilfunktion mit obligatorischen JavaScript-Anmerkungen oder -Kommentaren
Sie können eine benutzerdefinierte Funktion mit einer Pfeilfunktionssyntax erstellen:
/**
* test function
* @name testFunction
* @param {string} a parameter description
* @param {string=} b parameter description
* @return {string}
*/
testFunction = (a, b) => {
return a + b;
};
/** */
testFunction1=(a) => (return a)
/** */
testFunction2 = a => a + 100;
Wenn Benutzende der benutzerdefinierten Funktion keine JavaScript-Anmerkungen hinzufügen, wird die benutzerdefinierte Funktion nicht im Regeleditor eines adaptiven Formulars aufgeführt.
Funktionsausdruck mit obligatorischen JavaScript-Anmerkungen oder -Kommentaren
Um benutzerdefinierte Funktionen im Regeleditor eines adaptiven Formulars aufzulisten, erstellen Sie benutzerdefinierte Funktionen im folgenden Format:
/**
* test function
* @name testFunction
* @param {string} input1 parameter description
* @param {string=} input2 parameter description
* @return {string}
*/
testFunction = function(input1,input2)
{
// code to be executed
}
Wenn Benutzende der benutzerdefinierten Funktion keine JavaScript-Anmerkungen hinzufügen, wird die benutzerdefinierte Funktion nicht im Regeleditor eines adaptiven Formulars aufgeführt.
Voraussetzungen zum Erstellen einer benutzerdefinierten Funktion.
Bevor Sie mit dem Hinzufügen einer benutzerdefinierten Funktion zu Ihrem adaptiven Formular beginnen, stellen Sie sicher, dass Sie die folgende Software auf Ihrem Computer installiert haben:
-
Nur-Text-Editor (IDE): Zwar kann jeder einfache Nur-Text-Editor verwendet werden, aber eine integrierte Entwicklungsumgebung (IDE) wie Microsoft Visual Studio Code bietet erweiterte Funktionen für eine einfachere Bearbeitung.
-
Git:: Dieses Versionskontrollsystem ist für die Verwaltung von Code-Änderungen erforderlich. Wenn Sie nicht über das Programm verfügen, laden Sie es von https://git-scm.com herunter.
Erstellen einer benutzerdefinierten Funktion
Die Schritte zum Erstellen benutzerdefinierter Funktionen sind die Folgenden:
- Erstellen einer Client-seitigen Bibliothek mit dem AEM-Projektarchetyp und Hinzufügen einer benutzerdefinierten Funktion
ODER
Erstellen benutzerdefinierter Funktionen über CRXDE - Hinzufügen einer Client-Bibliothek zu einem adaptiven Formular
- Verwenden einer benutzerdefinierten Funktion in einem adaptiven Formular
Erstellen einer Client-Bibliothek mit dem AEM-Projektarchetyp
Sie können benutzerdefinierte Funktionen hinzufügen, indem Sie unter Verwendung des AEM-Projektarchetyps eine Client-Bibliothek zu dem erstellten Projekt hinzufügen.
Wenn Sie über ein vorhandenes Projekt verfügen , können Sie Ihrem lokalen Projekt direkt benutzerdefinierte Funktionen hinzufügen.
Nachdem Sie ein Archetypprojekt erstellt oder ein vorhandenes Projekt verwendet haben, erstellen Sie eine Client-Bibliothek. Um eine Client-Bibliothek zu erstellen, führen Sie die folgenden Schritte aus:
Hinzufügen eines Client-Bibliotheksordners
Gehen Sie wie folgt vor, um einen neuen Client-Bibliotheksordner zu Ihrem [AEM-Projektverzeichnis] hinzuzufügen:
-
Öffnen Sie das [AEM-Projektverzeichnis] in einem Editor.
-
Suchen Sie
ui.apps
. -
Fügen Sie einen neuen Ordner hinzu. Erstellen Sie beispielsweise einen Ordner mit dem Namen
experience-league
. -
Navigieren Sie zum Ordner
/experience-league/
und fügen Sie einenClientLibraryFolder
hinzu. Erstellen Sie beispielsweise einen Client-Bibliotheksordner mit dem Namencustomclientlibs
.Der Speicherort ist:
[AEM project directory]/ui.apps/src/main/content/jcr_root/apps/
.
Hinzufügen von Dateien und Ordnern zum Client-Bibliotheksordner
Fügen Sie dem hinzugefügten Client-Bibliotheksordner Folgendes hinzu:
- Datei
.content.xml
- Datei
js.txt
- Ordner
js
Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/
-
Fügen Sie in
.content.xml
die folgenden Code-Zeilen hinzu:<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="cq:ClientLibraryFolder" categories="[customfunctionscategory]"/>
NOTESie können für die Eigenschaftenclient library folder
undcategories
beliebige Namen auswählen. -
Fügen Sie in
js.txt
die folgenden Code-Zeilen hinzu:#base=js function.js
-
Fügen Sie im Ordner
js
die JavaScript-Datei, die die benutzerdefinierten Funktionen enthält, alsfunction.js
hinzu:/** * Calculates Age * @name calculateAge * @param {object} field * @return {string} */ function calculateAge(field) { var dob = new Date(field); var now = new Date(); var age = now.getFullYear() - dob.getFullYear(); var monthDiff = now.getMonth() - dob.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) { age--; } return age; }
-
Speichern Sie die Dateien.
Schließen Sie den neuen Ordner in filter.xml ein:
-
Navigieren Sie zur Datei
/ui.apps/src/main/content/META-INF/vault/filter.xml
in Ihrem [AEMaaCS-Projektverzeichnis]. -
Öffnen Sie die Datei und fügen Sie die folgende Zeile am Ende ein:
<filter root="/apps/experience-league" />
-
Speichern Sie die Datei.
-
Erstellen Sie den neu erstellten Client-Bibliotheksordner in Ihrer AEM-Umgebung, indem Sie die Schritte im Abschnitt Anleitung zum Erstellen befolgen.
Erstellen und Bereitstellen benutzerdefinierter Funktionen über CRXDE
Wenn Sie die aktuellsten Versionen von AEM Forms- und des Forms-Add-ons verwenden, können Sie über CRXDE eine benutzerdefinierte Funktion erstellen, um die neuesten Aktualisierungen von benutzerdefinierten Funktionen zu verwenden. Führen Sie dazu die folgenden Schritte aus:
-
Melden Sie sich bei
http://server:port/crx/de/index.jsp#
an. -
Erstellen Sie einen Ordner unter dem Ordner
/apps
. Erstellen Sie beispielsweise einen Ordner mit dem Namenexperience-league
. -
Speichern Sie Ihre Änderungen.
-
Navigieren Sie zum erstellten Ordner und erstellen Sie einen Knoten vom Typ
cq:ClientLibraryFolder
alsclientlibs
. -
Navigieren Sie zum neu erstellten Ordner
clientlibs
und fügen Sie die EigenschaftenallowProxy
undcategories
hinzu:NOTESie können einen beliebigen Namen anstelle voncustomfunctionsdemo
verwenden. -
Speichern Sie Ihre Änderungen.
-
Erstellen Sie einen Ordner mit dem Namen
js
unter dem Ordnerclientlibs
. -
Erstellen Sie eine JavaScript-Datei mit dem Namen
functions.js
unter dem Ordnerjs
-
Erstellen Sie eine Datei mit dem Namen
js.txt
unter dem Ordnerclientlibs
. -
Speichern Sie Ihre Änderungen.
Die erstellte Ordnerstruktur sieht wie folgt aus: -
Doppelklicken Sie auf die Datei
functions.js
, um den Editor zu öffnen. Die Datei enthält den Code für die benutzerdefinierte Funktion.
Fügen wir der JavaScript-Datei den folgenden Code hinzu, um das Alter basierend auf dem Geburtsdatum (JJJJ-MM-TT) zu berechnen./** * Calculates Age * @name calculateAge * @return {string} */ function calculateAge(dateOfBirthString) { var dob = new Date(dateOfBirthString); var now = new Date(); var age = now.getFullYear() - dob.getFullYear(); var monthDiff = now.getMonth() - dob.getMonth(); if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) { age--; } return age; }
-
Speichern
function.js
. -
Navigieren Sie zu
js.txt
und fügen Sie den folgenden Code hinzu:#base=js functions.js
-
Speichern Sie die Datei
js.txt
.
Sie können auf den folgenden Ordner Benutzerdefinierte Funktion verweisen. Laden Sie diesen Ordner herunter und installieren Sie ihn in Ihrer AEM-Instanz.
Jetzt können Sie die benutzerdefinierte Funktion in Ihrem adaptiven Formular verwenden, indem Sie die Client-Bibliothek hinzufügen.
Hinzufügen einer Client-Bibliothek in einem adaptiven Formular
Nachdem Sie Ihre Client-Bibliothek in Ihrer AEM Forms-Umgebung bereitgestellt haben, verwenden Sie die zugehörigen Funktionen in Ihrem adaptiven Formular. Hinzufügen der Client-Bibliothek zu einem adaptiven Formular
-
Öffnen Sie das Formular im Bearbeitungsmodus. Um ein Formular im Bearbeitungsmodus zu öffnen, wählen Sie ein Formular aus und wählen Sie dann Bearbeiten aus.
-
Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars aus.
-
Klicken Sie auf das Symbol „Guide-Container-Eigenschaften“. Das Dialogfeld „Container für adaptive Formulare“ wird geöffnet.
-
Öffnen Sie die Registerkarte Einfach und wählen Sie den Namen der Client-Bibliothekskategorie aus der Dropdown-Liste aus (in diesem Fall
customfunctionscategory
). -
Klicken Sie auf Fertig.
Jetzt können Sie eine Regel erstellen, um benutzerdefinierte Funktionen im Regeleditor zu verwenden:
Im Folgenden erfahren Sie, wie Sie einen benutzerdefinierten Fehler-Handler mit dem Aufrufdienst des Regeleditors in AEM Forms 6.5 konfigurieren und verwenden.
Verwenden von benutzerdefinierten Funktionen in einem adaptiven Formular.
In einem adaptiven Formular können Sie benutzerdefinierte Funktionen im Regeleditor verwenden.
Fügen Sie der JavaScript-Datei (Function.js
) den folgenden Code hinzu, um das Alter basierend auf dem Geburtsdatum (JJJJ-MM-TT) zu berechnen. Erstellen Sie eine benutzerdefinierte Funktion als calculateAge()
, die das Geburtsdatum als Eingabe annimmt und das Alter zurückgibt:
/**
* Calculates Age
* @name calculateAge
* @param {object} field
* @return {string}
*/
function calculateAge(field) {
var dob = new Date(field);
var now = new Date();
var age = now.getFullYear() - dob.getFullYear();
var monthDiff = now.getMonth() - dob.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
age--;
}
return age;
}
Wenn Benutzende im obigen Beispiel das Geburtsdatum im Format JJJJ-MM-TT eingeben, wird die benutzerdefinierte Funktion calculateAge
aufgerufen und das Alter zurückgegeben.
Sehen wir uns das Formular in der Vorschau an, um zu sehen, wie die benutzerdefinierten Funktionen über den Regeleditor implementiert werden:
Unterstützung für asynchrone Funktionen in benutzerdefinierten Funktionen
Asynchrone benutzerdefinierte Funktionen werden nicht in der Liste des Regeleditors angezeigt. Es ist jedoch möglich, asynchrone Funktionen innerhalb benutzerdefinierter Funktionen aufzurufen, die mit synchronen Funktionsausdrücken erstellt wurden.
Sehen Sie sich den folgenden Code an, um zu erfahren, wie Sie asynchrone Funktionen mit benutzerdefinierten Funktionen aufrufen können:
async function asyncFunction() {
const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
const data = await response.json();
return data;
}
/**
* callAsyncFunction
* @name callAsyncFunction callAsyncFunction
*/
function callAsyncFunction() {
asyncFunction()
.then(responseData => {
console.log('Response data:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
}
Im obigen Beispiel ist die Funktion „asyncFunction“ eine asynchronous function
. Sie führt einen asynchronen Vorgang durch, indem eine GET
-Anfrage an https://petstore.swagger.io/v2/store/inventory
gesendet wird. Sie wartet mit await
auf die Antwort, analysiert den Antworttext mithilfe der response.json()
als JSON und gibt dann die Daten zurück. Die Funktion callAsyncFunction
ist eine synchrone benutzerdefinierte Funktion, die die Funktion asyncFunction
aufruft und die Antwortdaten in der Konsole anzeigt. Obwohl die Funktion callAsyncFunction
synchron ist, ruft sie die asynchrone Funktion „asyncFunction“ auf und verarbeitet ihr Ergebnis mit den Anweisungen then
und catch
.
Um ihre Funktionsweise zu sehen, fügen wir eine Schaltfläche hinzu und erstellen eine Regel für die Schaltfläche, die die asynchrone Funktion bei einem Klick auf eine Schaltfläche aufruft.
In der Abbildung unten finden Sie das Konsolenfenster, um zu zeigen, dass beim Klicken auf die Schaltfläche Fetch
die benutzerdefinierte Funktion callAsyncFunction
aufgerufen wird, die wiederum die asynchrone Funktion asyncFunction
aufruft. Inspizieren Sie das Konsolenfenster, um die Antwort anzusehen, wenn Sie auf die Schaltfläche klicken:
Im Folgenden werden die Merkmale von benutzerdefinierten Funktionen vorgestellt.
Verschiedene Merkmale von benutzerdefinierten Funktionen
Sie können benutzerdefinierte Funktionen verwenden, um personalisierte Merkmale zu Funktionen hinzuzufügen. Diese Funktionen unterstützen verschiedene Fähigkeiten, wie z. B. das Arbeiten mit bestimmten Feldern, das Verwenden globaler Felder oder das Zwischenspeichern. Diese Flexibilität ermöglicht es Ihnen, Formulare entsprechend den Anforderungen Ihres Unternehmens anzupassen.
Objekte mit dem Gültigkeitsbereich „Feld“ und „Global“ in benutzerdefinierten Funktionen
Feldobjekte beziehen sich auf die einzelnen Komponenten oder Elemente in einem Formular, z. B. Textfelder und Kontrollkästchen. Das Globals-Objekt enthält schreibgeschützte Variablen wie Formularinstanz, Zielfeldinstanz und Methoden zum Durchführen von Formularänderungen in benutzerdefinierten Funktionen.
param {scope} globals
muss der letzte Parameter sein und wird nicht im Regeleditor eines adaptiven Formulars angezeigt.Im Folgenden erfahren wir, wie benutzerdefinierte Funktionen für verschiedene Anwendungsfälle Feld- und global-Objekte mithilfe eines Contact Us
-Formulars verwenden.
Anwendungsfall: Anzeigen eines Bedienfelds mithilfe der SetProperty
-Regel
Fügen Sie den folgenden Code in der benutzerdefinierten Funktion hinzu, wie im Abschnitt create-custom-function beschrieben, um das Formularfeld auf Required
festzulegen.
/**
* enablePanel
* @name enablePanel
* @param {object} field1
* @param {object} field2
* @param {scope} globals
*/
function enablePanel(field1,field2, globals)
{
if(globals.functions.validate(field1).length === 0)
{
globals.functions.setProperty(field2, {visible: true});
}
}
- Sie können die Feldeigenschaften mit den verfügbaren Eigenschaften in
[form-path]/jcr:content/guideContainer.model.json
konfigurieren. - Änderungen am Formular, die mit der Methode
setProperty
des Globals-Objekts vorgenommen werden, sind asynchron und werden bei der Ausführung der benutzerdefinierten Funktion nicht berücksichtigt.
In diesem Beispiel wird das Bedienfeld personaldetails
durch Klicken auf die Schaltfläche überprüft. Wenn im Bedienfeld keine Fehler erkannt werden, wird ein weiteres Bedienfeld, das Bedienfeld feedback
, beim Klicken auf die Schaltfläche angezeigt.
Erstellen wir eine Regel für die Schaltfläche Next
, die das Bedienfeld personaldetails
validiert und das Bedienfeld feedback
sichtbar macht, wenn Benutzende auf die Schaltfläche Next
klicken.
In der folgenden Abbildung sehen Sie, wie das Bedienfeld personaldetails
beim Klicken auf die Schaltfläche Next
validiert wird. Falls alle Felder innerhalb der personaldetails
validiert werden, wird das Bedienfeld feedback
angezeigt.
Wenn Fehler in den Feldern des Bedienfelds personaldetails
vorhanden sind, werden sie beim Klicken auf die Schaltfläche Next
auf Feldebene angezeigt und das Bedienfeld feedback
bleibt unsichtbar.
Anwendungsfall: Das Feld validieren.
Fügen Sie den folgenden Code in der benutzerdefinierten Funktion hinzu, wie im Abschnitt create-custom-function beschrieben, um das Feld zu validieren.
/**
* validateField
* @name validateField
* @param {object} field
* @param {scope} globals
*/
function validateField(field,globals)
{
globals.functions.validate(field);
}
validate()
kein Argument übergeben wird, wird das Formular validiert.In diesem Beispiel wird ein benutzerdefiniertes Überprüfungsmuster auf das Feld contact
angewendet. Benutzende müssen eine Telefonnummer eingeben, die mit 10
gefolgt von 8
Ziffern beginnt. Wenn Benutzende eine Telefonnummer eingeben, die nicht mit 10
beginnt oder nicht genau 8
Ziffern enthält, wird beim Klicken auf die Schaltfläche eine Validierungsfehlermeldung angezeigt:
Der nächste Schritt besteht darin, eine Regel für die Schaltfläche Next
zu erstellen, die das Feld contact
beim Klicken auf die Schaltfläche validiert.
Beziehen Sie sich auf die folgende Abbildung, die zeigt, dass eine Fehlermeldung auf Feldebene angezeigt wird, wenn Benutzende eine Telefonnummer eingeben, die nicht mit 10
beginnt:
Wenn Benutzende eine gültige Telefonnummer eingeben und alle Felder im Bedienfeld personaldetails
validiert worden sind, wird das Bedienfeld feedback
auf dem Bildschirm angezeigt:
Anwendungsfall: Zurücksetzen eines Bedienfelds
Fügen Sie den folgenden Code in der benutzerdefinierten Funktion hinzu, wie im Abschnitt create-custom-function beschrieben, um das Bedienfeld zurückzusetzen.
/**
* resetField
* @name resetField
* @param {string} input1
* @param {object} field
* @param {scope} globals
*/
function resetField(field,globals)
{
globals.functions.reset(field);
}
reset()
kein Argument übergeben wird, wird das Formular validiert.In diesem Beispiel wird das Bedienfeld personaldetails
beim Klicken auf die Schaltfläche Clear
zurückgesetzt. Als Nächstes erstellen Sie eine Regel für die Schaltfläche Clear
, die das Bedienfeld bei einem Klick auf die Schaltfläche zurücksetzt.
In der folgenden Abbildung sehen Sie, dass der Bereich personaldetails
zurückgesetzt wird, wenn jemand auf die Schaltfläche clear
klickt:
Anwendungsfall: Eine benutzerdefinierte Nachricht auf Feldebene anzeigen und das Feld als ungültig markieren
Mit der Funktion markFieldAsInvalid()
können Sie ein Feld als ungültig definieren und eine benutzerdefinierte Fehlermeldung auf Feldebene festlegen. Der Wert fieldIdentifier
kann fieldId
, field qualifiedName
oder field dataRef
lauten. Der Wert des Objekts namens option
kann {useId: true}
, {useQualifiedName: true}
oder {useDataRef: true}
lauten.
Die Syntaxen, die zum Markieren des Felds als ungültig und zum Festlegen der benutzerdefinierten Nachricht verwendet werden, sind:
globals.functions.markFieldAsInvalid(field.$id,"[custom message]",{useId: true});
globals.functions.markFieldAsInvalid(field.$qualifiedName, "[custom message]", {useQualifiedName: true});
globals.functions.markFieldAsInvalid(field.$dataRef, "[custom message]", {useDataRef: true});
Um eine benutzerdefinierte Nachricht auf Feldebene zu aktivieren, fügen Sie den folgenden Code in der benutzerdefinierten Funktion hinzu, wie im Abschnitt create-custom-function beschrieben.
/**
* customMessage
* @name customMessage
* @param {object} field
* @param {scope} globals
*/
function customMessage(field, globals) {
const minLength = 15;
const comments = field.$value.trim();
if (comments.length < minLength) {
globals.functions.markFieldAsInvalid(field.$id, "Comments must be at least 15 characters long.", { useId: true });
}
}
In diesem Beispiel wird eine benutzerdefinierte Meldung auf Feldebene angezeigt, wenn Benutzende weniger als 15 Zeichen in das Textfeld „Kommentare“ eingeben.
Der nächste Schritt besteht darin, eine Regel für das Feld comments
zu erstellen:
Sehen Sie sich das Beispiel unten an, in dem dargestellt wird, wie die Eingabe von negativem Feedback in das Feld comments
die Anzeige einer benutzerdefinierten Nachricht auf Feldebene auslöst:
Wenn jemand mehr als 15 Zeichen in das Textfeld „Kommentare“ eingibt, wird das Feld validiert und das Formular wird gesendet:
Anwendungsfall: Übermittlung geänderter Daten an den Server
Diese Codezeileglobals.functions.submitForm(globals.functions.exportData(), false);
wird verwendet, um die Formulardaten nach der Bearbeitung zu senden.
- Das erste Argument sind die zu übermittelnden Daten.
- Das zweite Argument gibt an, ob das Formular vor der Übermittlung validiert werden soll. Es ist
optional
und standardmäßig auftrue
festgelegt. - Das dritte Argument ist der
contentType
der Übermittlung, der ebenfalls optional ist und den Standardwertmultipart/form-data
hat. Die anderen Werte könnenapplication/json
undapplication/x-www-form-urlencoded
sein.
Fügen Sie den folgenden Code in der benutzerdefinierten Funktion hinzu, wie im Abschnitt create-custom-function beschrieben, um die bearbeiteten Daten an den Server zu senden:
/**
* submitData
* @name submitData
* @param {object} field
* @param {scope} globals
*/
function submitData(globals)
{
var data = globals.functions.exportData();
if(!data.comments) {
data.comments = 'NA';
}
console.log('After update:{}',data);
globals.functions.submitForm(data, false);
}
Wenn jemand in diesem Beispiel das Textfeld comments
leer lässt, wird beim Senden des Formulars an den Server NA
gesendet.
Erstellen Sie nun eine Regel für die Schaltfläche Submit
, mit der Daten gesendet werden:
In der Abbildung unten finden Sie das console window
, das zeigt, dass der Wert als NA
an den Server gesendet wird, wenn jemand das Textfeld comments
leer lässt:
Sie können auch das Konsolenfenster überprüfen, um die an den Server gesendeten Daten anzuzeigen:
Caching-Unterstützung für benutzerdefinierte Funktionen
Adaptive Formulare nutzen Caching für benutzerdefinierte Funktionen, um die Antwortzeit beim Abrufen der Liste der benutzerdefinierten Funktionen im Regeleditor zu verbessern. In der Datei error.log
wird eine Meldung Fetched following custom functions list from cache
angezeigt.
Wenn die benutzerdefinierten Funktionen geändert werden, wird das Caching invalidiert, und es wird analysiert.
Fehlerbehebung
-
Die Benutzenden müssen sicherstellen, dass die Kernkomponente und die Spezifikationsversion von auf die neueste Version festgelegt sind. Für bestehende AEM-Projekte und -Formulare sind jedoch zusätzliche Schritte erforderlich:
-
Für das AEM Projekt sollten Benutzende alle Instanzen von
submitForm('custom:submitSuccess', 'custom:submitError')
durchsubmitForm()
ersetzen und das Projekt bereitstellen. -
Wenn die benutzerdefinierten Übermittlungs-Handler für vorhandene Formulare nicht richtig funktionieren, müssen Benutzende die Regel
submitForm
mithilfe des Regeleditors anhand der Schaltfläche Senden öffnen und speichern. Diese Aktion ersetzt im Formular die vorhandene RegelsubmitForm('custom:submitSuccess', 'custom:submitError')
durchsubmitForm()
.
-
-
Wenn die JavaScript-Datei mit dem Code für benutzerdefinierte Funktionen einen Fehler enthält, werden die benutzerdefinierten Funktionen nicht im Regeleditor eines adaptiven Formulars aufgeführt. Um die Liste der benutzerdefinierten Funktionen zu überprüfen, können Sie für den Fehler zur Datei
error.log
navigieren. Im Fall eines Fehlers wird die Liste der benutzerdefinierten Funktionen leer angezeigt:Wenn kein Fehler auftritt, wird die benutzerdefinierte Funktion abgerufen und in der Datei
error.log
angezeigt. In der Dateierror.log
wird eine Meldung mit dem WertFetched following custom functions list
angezeigt:
Überlegungen
-
Der
parameter type
und derreturn type
unterstützenNone
nicht. -
Folgende Funktionen werden in der Liste der benutzerdefinierten Funktionen nicht unterstützt:
- Generator-Funktionen
- Async/Await-Funktionen
- Methodendefinitionen
- Klassenmethoden
- Standardparameter
- Rest-Parameter: