Erstellen einer benutzerdefinierten Funktion für ein auf Kernkomponenten basierendes adaptives Formular

Adaptive Forms, die auf Kernkomponenten basieren, bieten dynamische Benutzererlebnisse, indem Inhalte und Verhalten auf der Grundlage von Benutzereingaben angepasst werden. Benutzerdefinierte Funktionen ermöglichen es Entwicklerinnen und Entwicklern, die Funktionalität zu erweitern und sicherzustellen, dass Formulare bestimmte Anforderungen erfüllen können. Durch die Integration benutzerdefinierter Funktionen können Entwickler komplexe Logik implementieren, Prozesse automatisieren und einzigartige Interaktionen einführen, die mit spezifischen Geschäftsanforderungen oder Benutzererwartungen übereinstimmen. Dadurch wird sichergestellt, dass sich die Formulare nicht nur an unterschiedliche Bedingungen anpassen, sondern auch eine präzisere und effektivere Lösung für verschiedene Anwendungsfälle bieten.
Dieser Artikel führt Sie durch die Schritte zum Erstellen benutzerdefinierter Funktionen für adaptive Forms mithilfe von Kernkomponenten.

Überlegungen

Voraussetzungen zum Erstellen einer benutzerdefinierten Funktion.

Bevor Sie mit dem Hinzufügen einer benutzerdefinierten Funktion zu Ihrem adaptiven Forms beginnen, stellen Sie sicher, dass Sie Folgendes haben:

Software:

Erstellen einer benutzerdefinierten Funktion

Erstellen Sie eine Client-Bibliothek, um benutzerdefinierte Funktionen im Regeleditor aufzurufen. Weitere Informationen finden Sie unter Verwenden Client-seitiger Bibliotheken.

Die Schritte zum Erstellen benutzerdefinierter Funktionen sind die Folgenden:

Erstellen einer Client-Bibliothek create-client-library

Sie können benutzerdefinierte Funktionen hinzufügen, indem Sie eine Client-Bibliothek hinzufügen. Um eine Client-Bibliothek zu erstellen, führen Sie die folgenden Schritte aus:

Klonen Sie das Repository

Klonen Sie Ihr AEM Forms as a Cloud Service-Repository:

Mit diesem Befehl wird das Repository heruntergeladen und ein lokaler Ordner des geklonten Repositorys auf Ihrem Computer erstellt. In diesem Handbuch wird dieser Ordner als „AEMaaCS[Projektverzeichnis“ ].

Hinzufügen eines Client-Bibliotheksordners

Gehen Sie wie folgt vor, um dem [AEMaaCS-Projektverzeichnis] einen neuen Client-Bibliotheksordner hinzuzufügen:

Hinzufügen von Dateien und Ordnern zum Client-Bibliotheksordner

Fügen Sie dem hinzugefügten Client-Bibliotheksordner Folgendes hinzu:

Location is: [AEMaaCS project directory]/ui.apps/src/main/content/jcr_root/apps/experience-league/customclientlibs/

Schließen Sie den neuen Ordner in filter.xml ein:

Stellen Sie den neu erstellten Client-Bibliotheksordner in Ihrer AEM-Umgebung bereit

Stellen Sie das [AEMaaCS Projektverzeichnis] von AEM as a Cloud Service in Ihrer Cloud Service-Umgebung bereit. So stellen Sie es in Ihrer Cloud Service-Umgebung bereit:

Wenn Sie noch keine Pipeline eingerichtet haben, lesen Sie das Handbuch zur Einrichtung einer Pipeline für AEM Forms as a Cloud Service.

Sobald die Pipeline erfolgreich ausgeführt wurde, wird die benutzerdefinierte Funktion, die der Client-Bibliothek hinzugefügt wurde, in Ihrem Regeleditor für adaptive Formulare verfügbar.

Hinzufügen einer Client-Bibliothek zu einem adaptiven Formular use-custom-function

Nachdem Sie Ihre Client-Bibliothek in Ihrer Forms CS-Umgebung bereitgestellt haben, verwenden Sie die zugehörigen Funktionen in Ihrem adaptiven Formular. Hinzufügen der Client-Bibliothek zu einem adaptiven Formular

Sie können die benutzerdefinierte Funktion im Regeleditor eines adaptiven Formulars)die JavaScript-Anmerkungen.

Verwenden einer benutzerdefinierten Funktion in einem adaptiven Formular

In einem adaptiven Formular können Sie benutzerdefinierte Funktionen im Regeleditor). Fügen wir der JavaScript-Datei (Function.js-Datei) folgenden Code hinzu, um das Alter auf der Grundlage des Geburtsdatums (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:

Funktionen von benutzerdefinierten Funktionen

Benutzerdefinierte Funktionen in AEM-Formularen bieten eine robuste Lösung für die Erweiterung und Personalisierung der Funktionalität Ihrer Formulare. Sie können die benutzerdefinierten Funktionen verwenden, um die spezifischen Anforderungen Ihres Unternehmens zu erfüllen.

Diese Funktionen unterstützen verschiedene Funktionen, einschließlich der Arbeit mit bestimmten Feldern, der Verwendung globaler Felder und asynchroner Vorgänge sowie der Integration von Caching-Mechanismen. Durch diese Flexibilität können Formulare an komplexe Anforderungen angepasst werden und ein effizientes, maßgeschneidertes Benutzererlebnis bieten. Durch die Nutzung dieser erweiterten Funktionen können Sie die Formularinteraktionen verbessern und die Leistung optimieren, sodass Ihre AEM-Formulare sowohl funktionsfähiger als auch responsiver werden.

Im Folgenden werden die Merkmale von benutzerdefinierten Funktionen vorgestellt.

Asynchrone Unterstützung in benutzerdefinierten Funktionen support-of-async-functions

Sie können asynchrone Funktionen im Regeleditor mithilfe benutzerdefinierter Funktionen implementieren. Eine Anleitung dazu finden Sie im Artikel Verwenden asynchroner Funktionen in einem adaptiven Formular.

Unterstützte Objekte vom Typ Feld und Globaler Umfang in benutzerdefinierten Funktionen support-field-and-global-objects

Feldobjekte beziehen sich auf die einzelnen Komponenten oder Elemente innerhalb eines Formulars, 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.

Weitere Informationen zu Bereichsobjekten finden Sie im Artikel Bereichsobjekte in benutzerdefinierten Funktionen .

Caching-Unterstützung in benutzerdefinierter Funktion

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

Nächster Schritt

Sehen wir uns nun verschiedene Beispiele für benutzerdefinierte Funktionen für ein adaptives Formular an, das auf Kernkomponenten basiert.

Siehe auch