Dieser Artikel enthält Inhalte für einige Funktionen vor der Veröffentlichung. Auf diese Funktionen vor der Veröffentlichung kann nur über unsere Pre-Release-Kanal. Die Funktionen des Vorversionsprogramms sind:

  • Unterstützung optionaler Parameter in benutzerdefinierten Funktionen
  • Caching-Funktion für benutzerdefinierte Funktionen
  • Unterstützung für globale Objekte und Feldobjekte für benutzerdefinierte Funktionen
  • Unterstützung für moderne JavaScript-Funktionen wie let- und pfeile Funktionen (ES10-Unterstützung).
    Stellen Sie sicher, dass Kernkomponente ist auf Version 3.0.8 festgelegt. , um Funktionen vor der Veröffentlichung in benutzerdefinierten Funktionen zu verwenden.

Benutzerdefinierte Funktionen in Adaptive Forms (Kernkomponenten)

Einführung

AEM Forms unterstützt benutzerdefinierte Funktionen, mit denen Benutzer JavaScript-Funktionen zur Implementierung komplexer Geschäftsregeln definieren können. Diese benutzerdefinierten Funktionen erweitern die Funktionen von Formularen, indem sie die Manipulation und Verarbeitung der eingegebenen Daten zur Erfüllung bestimmter Anforderungen erleichtern. Sie ermöglichen auch eine dynamische Änderung des Formularverhaltens basierend auf vordefinierten Kriterien.

Verwendung benutzerdefinierter Funktionen uses-of-custom-function

Die Verwendung benutzerdefinierter Funktionen in Adaptive Forms bietet folgende Vorteile:

  • Datenverarbeitung: Benutzerdefinierte Funktionen helfen bei der Verarbeitung der in die Formularfelder eingegebenen Daten.
  • Datenvalidierung: Benutzerdefinierte Funktionen ermöglichen es Ihnen, benutzerdefinierte Prüfungen von Formulareingaben durchzuführen und bestimmte Fehlermeldungen bereitzustellen.
  • Dynamisches Verhalten: Benutzerdefinierte Funktionen ermöglichen es Ihnen, das dynamische Verhalten Ihrer Formulare anhand bestimmter Bedingungen zu 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 hilft beim Abrufen von Daten aus externen Quellen, beim Senden von Daten an externe REST-Endpunkte oder beim Ausführen benutzerdefinierter Aktionen basierend auf externen Ereignissen.

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 den Benutzer in einem adaptiven Formular zur Verfügung. Die benutzerdefinierten Funktionen werden durch die JavaScript-Anmerkungen im Regeleditor identifiziert.

Unterstützte JavaScript-Anmerkungen für benutzerdefinierte Funktionen js-annotations

JavaScript-Anmerkungen werden verwendet, um Metadaten für JavaScript-Code bereitzustellen. Es enthält Kommentare, die mit bestimmten Symbolen beginnen, z. B. /** und @. Die Anmerkungen enthalten wichtige Informationen zu Funktionen, Variablen und anderen Elementen im Code. Das adaptive Formular unterstützt die folgenden JavaScript-Anmerkungen für benutzerdefinierte Funktionen:

Name

Der Name wird verwendet, um die benutzerdefinierte Funktion im Regeleditor eines adaptiven Formulars zu identifizieren. 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 eines adaptiven Formulars.

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} stellt den Parametertyp dar. 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).
    • Zeichenfolge[]: 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 globale Objekt dar, das von benutzerdefinierten Funktionen zur Laufzeit verwendet wird. Sie wird als letzter Parameter in JavaScript-Anmerkungen deklariert und ist im 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 Trigger.

    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. Es kann mehrere Wörter enthalten.

    Standardmäßig sind alle Parameter obligatorisch. Sie können einen Parameter als optional definieren, indem Sie entweder "="nach dem Parametertyp hinzufügen oder den Parameternamen in "[]"einschließen. Parameter, die in JavaScript-Anmerkungen als optional definiert wurden, werden im Regeleditor als optional angezeigt.
    Um eine Variable als optionalen Parameter zu definieren, können Sie eine der folgenden Syntaxen verwenden:

    • @param {type=} Input1

    In der obigen Codezeile ist "Input1"ein optionaler Parameter ohne Standardwert. So deklarieren Sie einen optionalen Parameter mit dem Standardwert:
    @param {string=&lt;value>} input1

    "input1"als optionalen Parameter mit dem Standardwert "value".

    • `@param {type} [Input1]"

    In der obigen Codezeile ist "Input1"ein optionaler Parameter ohne Standardwert. So deklarieren Sie einen optionalen Parameter mit dem Standardwert:
    @param {array} [input1=&lt;value>]
    "input1"ist ein optionaler Parameter des Array-Typs, bei dem der Standardwert "value"festgelegt ist.
    Stellen Sie sicher, dass der Parametertyp in geschweifte Klammern eingeschlossen ist. {} und der Parametername in eckigen Klammern [] eingeschlossen ist.

    Betrachten Sie das folgende Code-Snippet, bei dem input2 als optionaler Parameter definiert ist:

    "javascript

    /**

    • optionale Parameterfunktion
    • @name OptionalParameterFunction
    • @param {string} input1
    • @param {string=} input2
    • @return

    */
    function OptionalParameterFunction(input1, input2) {
    let result = "Result: ";
    result += input1;
    if (input2 !== null) {
    result += " " + input2;
    }
    Rückgabeergebnis;
    }
    "

    Die folgende Abbildung zeigt die Verwendung der benutzerdefinierten Funktion "OptionalParameterFunction"im Regeleditor:

    <!>— Optionale oder erforderliche Parameter —>

    Sie können die Regel speichern, ohne einen Wert für die erforderlichen Parameter anzugeben. Die Regel wird jedoch nicht ausgeführt und es wird eine Warnmeldung angezeigt, wie folgt:

    <!>— unvollständige Regelwarnung —>

    Wenn der Benutzer den optionalen Parameter leer lässt, wird der Wert "Undefined"an die benutzerdefinierte Funktion für den optionalen Parameter übergeben.

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} stellt den Rückgabetyp der Funktion dar. 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).
    • Zeichenfolge[]: 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 direkt das Formularobjekt anstelle des Werts 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.

Weitere Informationen zum Definieren optionaler Parameter in JSDocs finden Sie unter Klicken Sie hier.

Richtlinien beim Erstellen benutzerdefinierter Funktionen considerations

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 der Benutzer der benutzerdefinierten Funktion keine JavaScript-Anmerkungen hinzufügt, wird sie im Regeleditor anhand ihres Funktionsnamens aufgelistet. Es wird jedoch empfohlen, JavaScript-Anmerkungen einzufügen, 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;
  • 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
        }

Benutzerdefinierte Funktion erstellen create-custom-function

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

Schritte zum Erstellen benutzerdefinierter Funktionen:

Erstellen einer Client-Bibliothek create-client-library

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

  1. Klonen Sie Ihr AEM Forms as a Cloud Service-Repository.

  2. Erstellen Sie einen Ordner unter dem Ordner [AEM Forms as a Cloud Service repository folder]/apps/. Erstellen Sie beispielsweise einen Ordner mit dem Namen experience-league.

  3. Navigieren Sie zu [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/experience-league/ und erstellen Sie eine ClientLibraryFolder. Erstellen Sie beispielsweise einen Client-Bibliotheksordner als customclientlibs.

  4. Hinzufügen einer Eigenschaft categories mit einem Zeichenfolgentyp -Wert. Weisen Sie beispielsweise den Wert zu customfunctionscategory der categories -Eigenschaft für customclientlibs Ordner.

    note note
    NOTE
    Sie können einen beliebigen Namen für client library folder und categories -Eigenschaft.
  5. Erstellen Sie einen Ordner mit dem Namen js.

  6. Navigieren Sie zum Ordner [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/customclientlibs/js.

  7. Fügen Sie eine JavaScript-Datei hinzu, z. B. function.js. Die Datei enthält den Code für die benutzerdefinierte Funktion.

  8. Speichern Sie die Datei function.js.

  9. Navigieren Sie zum Ordner [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/customclientlibs/js.

  10. Hinzufügen einer Textdatei als js.txt. Die Datei enthält:

    code language-javascript
        #base=js
        functions.js
    
  11. Speichern Sie die Datei js.txt.

  12. Fügen Sie die Änderungen mit den folgenden Befehlen hinzu, übertragen Sie sie und pushen Sie sie in das Repository:

    code language-javascript
        git add .
        git commit -a -m "Adding custom functions"
        git push
    
  13. Pipeline ausführen , um die benutzerdefinierte Funktion bereitzustellen.

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

Clientbibliothek zu einem adaptiven Formular hinzufügen 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 zum adaptiven Formular

  1. Öffnen Sie das Formular im Bearbeitungsmodus. Um ein Formular im Bearbeitungsmodus zu öffnen, wählen Sie ein Formular aus und wählen Sie Bearbeiten.

  2. Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars aus.

  3. Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften Guide-Eigenschaften . Das Dialogfeld „Container für ein adaptives Formular“ wird geöffnet.

  4. Öffnen Sie die Allgemein und wählen Sie den Namen der Client-Bibliothekskategorie aus der Dropdown-Liste aus (in diesem Fall wählen Sie customfunctionscategory).

    Hinzufügen der benutzerdefinierten Funktion zur Client-Bibliothek

    note note
    NOTE
    Es können mehrere Kategorien hinzugefügt werden, indem Sie eine kommagetrennte Liste innerhalb der Kategorie der Client-Bibliothek -Feld.
  5. Klicken Sie auf Fertig.

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

Verwenden der benutzerdefinierten Funktion in einem adaptiven Formular

In einem adaptiven Formular können Sie benutzerdefinierte Funktionen im Regeleditor. Fügen Sie der JavaScript-Datei (Function.js ), um das Alter basierend auf dem Geburtsdatum (JJJ-MM-TT) zu berechnen. Erstellen Sie eine benutzerdefinierte Funktion als calculateAge() , das 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 der Benutzer im obigen Beispiel das Geburtsdatum im Format (JJJJ-MM-TT) eingibt, wird die benutzerdefinierte Funktion calculateAge aufgerufen wird und das Alter zurückgibt.

Benutzerdefinierte Funktion Seite berechnenim Regeleditor

Sehen wir uns das Formular in der Vorschau an, um zu sehen, wie die benutzerdefinierten Funktionen über den Regeleditor implementiert werden:

Benutzerdefinierte Funktion Seite berechnenin der Formularvorschau des Regeleditors

NOTE
Sie können auf Folgendes verweisen: benutzerdefinierte Funktion Ordner. Laden Sie diesen Ordner herunter und installieren Sie ihn in Ihrer AEM mithilfe der Package Manager.

Unterstützung für asynchrone Funktionen in benutzerdefinierten Funktionen support-of-async-functions

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.

Benutzerdefinierte Funktion Synchronisieren und asynchron

NOTE
Der Vorteil des Aufrufs asynchroner Funktionen in benutzerdefinierten Funktionen besteht darin, dass asynchrone Funktionen die gleichzeitige Ausführung mehrerer Aufgaben ermöglichen, wobei das Ergebnis jeder Funktion in den benutzerdefinierten Funktionen verwendet wird.

Im folgenden Code erfahren Sie, 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 asyncFunction-Funktion ein asynchronous function. Er führt einen asynchronen Vorgang durch, indem er eine GET Anfrage an https://petstore.swagger.io/v2/store/inventory. Es wartet auf die Antwort mit await, analysiert den Antworttext mit der response.json()und gibt dann die Daten zurück. Die callAsyncFunction -Funktion ist eine synchrone benutzerdefinierte Funktion, die die asyncFunction und zeigt die Antwortdaten in der Konsole an. Obwohl die Variable callAsyncFunction -Funktion synchron ist, ruft sie die asynchrone asyncFunction-Funktion auf und verarbeitet ihr Ergebnis mit then und catch -Anweisungen.

Um seine 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.

Erstellen einer Regel für die asynchrone Funktion

In der Abbildung unten sehen Sie das Konsolenfenster, um zu veranschaulichen, dass der Benutzer beim Klicken auf die Fetch Schaltfläche, die benutzerdefinierte Funktion callAsyncFunction aufgerufen wird, was wiederum eine asynchrone Funktion aufruft asyncFunction. Inspect Sie das Konsolenfenster, um die Antwort anzuzeigen, wenn Sie auf die Schaltfläche klicken:

Konsolenfenster

Im Folgenden werden die Funktionen von benutzerdefinierten Funktionen vorgestellt.

Verschiedene Funktionen für benutzerdefinierte Funktionen

Sie können benutzerdefinierte Funktionen verwenden, um Formularen personalisierte Funktionen hinzuzufügen. Diese Funktionen unterstützen verschiedene Funktionen, 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.

Felder und globale Perimeter in benutzerdefinierten Funktionen support-field-and-global-objects

Feldobjekte beziehen sich auf die einzelnen Komponenten oder Elemente in einem Formular, z. B. Textfelder und Kontrollkästchen. Globale Perimeter beziehen sich auf die globalen Variablen oder Einstellungen, auf die über das gesamte Formular zugegriffen werden kann. Sehen wir uns das folgende Code-Snippet an:

    /**
    * updateDateTime
    * @name updateDateTime
    * @param {object} field
    * @param {scope} globals
    */
    function updateDateTime(field, globals) {
    // Accessing the Date object from the global scope
    var currentDate = new Date();
    // Formatting the date and time
    var formattedDateTime = currentDate.toLocaleString();
    // Updating the field value with the formatted date and time
    field.value = formattedDateTime;
    }
NOTE
Die param {scope} globals muss der letzte Parameter sein und wird nicht im Regeleditor eines adaptiven Formulars angezeigt.

Im obigen Codefragment wurde eine benutzerdefinierte Funktion mit dem Namen updateDateTime akzeptiert Parameter wie ein Feldobjekt und ein globales Objekt. Der Zugriff auf die Datums- und Uhrzeitobjekte erfolgt über den globalen Umfang. Das Feld stellt das Textfeld-Objekt dar, in dem der formatierte Datums- und Uhrzeitwert im Formular angezeigt wird.

Erfahren Sie, wie benutzerdefinierte Funktionen mithilfe eines Contact Us Formulare mit unterschiedlichen Anwendungsfällen verwenden.

Kontaktformular

Anwendungsfall: Zeigen Sie ein Bedienfeld mit dem SetProperty Regel

Fügen Sie den folgenden Code in die benutzerdefinierte Funktion ein, wie im Abschnitt create-custom-function Abschnitt, um das Formularfeld als Required.


    /**
    * 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});
       }
    }
NOTE
Sie können die Feldeigenschaften mit den verfügbaren Eigenschaften konfigurieren, die sich unter [form-path]/jcr:content/guideContainer.model.json.

In diesem Beispiel wird die personaldetails angezeigt, wenn auf die Schaltfläche geklickt wird. Wenn im Bedienfeld keine Fehler erkannt werden, wird in einem anderen Bedienfeld die feedback -Bedienfeld angezeigt, wird beim Klicken auf die Schaltfläche sichtbar.

Erstellen wir eine Regel für die Next -Schaltfläche, mit der die personaldetails und erstellt die feedback Bereich, der angezeigt wird, wenn der Benutzer auf die Next Schaltfläche.

Eigenschaft festlegen

In der folgenden Abbildung erfahren Sie, wo die Variable personaldetails beim Klicken auf Next Schaltfläche. Für alle Felder im personaldetails validiert werden, wird die feedback -Bedienfeld wird angezeigt.

Festlegen der Eigenschaftenformularvorschau

Wenn Fehler in den Feldern der Variablen personaldetails angezeigt werden, werden sie beim Klicken auf die Next und der feedback bleibt unsichtbar.

Festlegen der Eigenschaftenformularvorschau

Anwendungsfall: Validieren Sie das Feld.

Fügen Sie den folgenden Code in die benutzerdefinierte Funktion ein, wie im Abschnitt create-custom-function , um das Feld zu validieren.

    /**
    * validateField
    * @name validateField
    * @param {object} field
    * @param {scope} globals
    */
    function validateField(field,globals)
    {

        globals.functions.validate(field);

    }
NOTE
Wenn kein -Argument übergeben wird, wird die validate() -Funktion, validiert sie das Formular.

In diesem Beispiel wird ein benutzerdefiniertes Überprüfungsmuster auf die contact -Feld. Benutzer müssen eine Telefonnummer eingeben, die mit 10 gefolgt von 8 Ziffern. Wenn der Benutzer eine Telefonnummer eingibt, die nicht mit 10 oder enthält mehr oder weniger als 8 Ziffern angeben, wird beim Klicken auf die Schaltfläche eine Validierungsfehlermeldung angezeigt:

Überprüfungsmuster für E-Mail-Adressen

Der nächste Schritt besteht darin, eine Regel für die Next -Schaltfläche, die die contact auf der Schaltfläche klicken.

Überprüfungsmuster

Beachten Sie die folgende Abbildung, um zu zeigen, dass wenn der Benutzer eine Telefonnummer eingibt, die nicht mit 10wird auf Feldebene eine Fehlermeldung angezeigt:

Überprüfungsmuster für E-Mail-Adressen

Wenn der Benutzer eine gültige Telefonnummer und alle Felder in der personaldetails validiert werden, wird die feedback wird auf dem Bildschirm angezeigt:

Überprüfungsmuster für E-Mail-Adressen

Anwendungsfall: Zurücksetzen eines Bedienfelds

Fügen Sie den folgenden Code in die benutzerdefinierte Funktion ein, wie im Abschnitt create-custom-function -Abschnitt, 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);

    }
NOTE
Wenn kein -Argument übergeben wird, wird die reset() -Funktion, validiert sie das Formular.

In diesem Beispiel wird die personaldetails beim Klicken auf Clear Schaltfläche. Der nächste Schritt besteht darin, eine Regel für die Clear -Schaltfläche, mit der das Bedienfeld auf die Schaltfläche zurückgesetzt wird.

Schaltfläche Löschen

Die folgende Abbildung zeigt, dass der Benutzer durch Klicken auf die clear -Schaltfläche, personaldetails Bedienfeld zurückgesetzt:

Formular zurücksetzen

Anwendungsfall: So zeigen Sie benutzerdefinierte Nachrichten auf Feldebene an und kennzeichnen das Feld als ungültig

Sie können die markFieldAsInvalid() -Funktion, um ein Feld als ungültig zu definieren und eine benutzerdefinierte Fehlermeldung auf Feldebene festzulegen. Die fieldIdentifier Wert kann fieldIdoder field qualifiedNameoder field dataRef. Der Wert des Objekts mit dem Namen option kann {useId: true}, {useQualifiedName: true}oder {useDataRef: true}.
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});

Fügen Sie den folgenden Code in die benutzerdefinierte Funktion ein, wie im Abschnitt create-custom-function , um eine benutzerdefinierte Nachricht auf Feldebene zu aktivieren.

    /**
    * 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 der Benutzer weniger als 15 Zeichen in das Textfeld "Kommentare"eingibt.

Der nächste Schritt besteht darin, eine Regel für die comments -Feld:

Feld als ungültig markieren

Sehen Sie sich die unten stehende Demonstration an, um anzuzeigen, dass negative Rückmeldungen im comments -Feld wird die Anzeige einer benutzerdefinierten Nachricht auf Feldebene Trigger:

Feld als ungültiges Vorschauformular markieren

Wenn der Benutzer mehr als 15 Zeichen in das Textfeld "Kommentare"eingibt, wird das Feld validiert und das Formular wird gesendet:

Feld als gültiges Vorschauformular markieren

Anwendungsfall: Sendet geänderte Daten an den Server

Die folgende Codezeile:
globals.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 stellt dar, ob das Formular vor der Übermittlung validiert werden soll. Es ist optional und legen Sie true Standardmäßig.
  • Das dritte Argument ist die contentType der Vorlage, die auch optional mit dem Standardwert als multipart/form-data.

Fügen Sie den folgenden Code in die benutzerdefinierte Funktion ein, wie im Abschnitt create-custom-function , um die bearbeiteten Daten auf dem 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 der Benutzer in diesem Beispiel die comments Textfeld leer, das NA wird beim Senden des Formulars an den Server gesendet.

Erstellen Sie nun eine Regel für die Submit -Schaltfläche zum Senden von Daten:

Daten senden

Siehe Abbildung der console window unten, um zu zeigen, dass wenn der Benutzer die comments Textfeld leer, dann der Wert als NA wird auf dem Server gesendet:

Daten im Konsolenfenster senden

Sie können auch das Konsolenfenster überprüfen, um die an den Server gesendeten Daten anzuzeigen:

Inspect-Daten im Konsolenfenster

Caching-Unterstützung für benutzerdefinierte Funktionen

Adaptive Forms implementiert Caching für benutzerdefinierte Funktionen, um die Reaktionszeit beim Abrufen der benutzerdefinierten Funktionsliste im Regeleditor zu verkürzen. Eine Nachricht als Fetched following custom functions list from cache im error.log -Datei.

benutzerdefinierte Funktion mit Cache-Unterstützung

Wenn die benutzerdefinierten Funktionen geändert werden, wird die Zwischenspeicherung invalidiert und analysiert.

Fehlerbehebung

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 zum error.log -Datei für den Fehler. Im Fall eines Fehlers wird die Liste der benutzerdefinierten Funktionen leer angezeigt:

Fehlerprotokolldatei

Wenn kein Fehler auftritt, wird die benutzerdefinierte Funktion abgerufen und im error.log -Datei. Eine Nachricht als Fetched following custom functions list im error.log Datei:

Fehlerprotokolldatei mit entsprechender benutzerdefinierter Funktion

Überlegungen

  • Die parameter type und return type nicht unterstützen None.

  • Folgende Funktionen werden in der benutzerdefinierten Funktionsliste nicht unterstützt:

    • Generator-Funktionen
    • Async/Await-Funktionen
    • Methodendefinitionen
    • Klassenmethoden
    • Standardparameter
    • REST-Parameter

Siehe auch see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab