Benutzerdefinierte Funktionen in Kernkomponenten für adaptive Formulare

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:

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.

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.

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.

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: