View a markdown version of this page

Verwenden JavaScript , um Ausdrücke in App Studio zu schreiben - AWS App Studio
BasissyntaxInterpolationVerkettungDatum und UhrzeitCode-BlöckeGlobale Variablen und FunktionenReferenzieren oder Aktualisieren von UI-KomponentenwertenArbeiten mit TabellendatenAuf Automatisierungen zugreifen

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Verwenden JavaScript , um Ausdrücke in App Studio zu schreiben

In AWS App Studio können Sie JavaScript Ausdrücke verwenden, um das Verhalten und das Erscheinungsbild Ihrer Anwendungen dynamisch zu steuern. Single-line JavaScript Ausdrücke werden in doppelten geschweiften Klammern geschrieben und können in verschiedenen Kontexten wie Automatisierungen, Benutzeroberflächenkomponenten und Datenabfragen verwendet werden. {{ }} Diese Ausdrücke werden zur Laufzeit ausgewertet und können verwendet werden, um Berechnungen durchzuführen, Daten zu manipulieren und die Anwendungslogik zu steuern.

App Studio bietet native Unterstützung für drei JavaScript Open-Source-Bibliotheken: Luxon, UUID, Lodash sowie SDK-Integrationen zur Erkennung von JavaScript Syntax- und Typprüfungsfehlern in den Konfigurationen Ihrer App.

Wichtig

App Studio unterstützt nicht die Verwendung von Drittanbieter-Bibliotheken oder benutzerdefinierten Bibliotheken. JavaScript

Basissyntax

JavaScript Ausdrücke können Variablen, Literale, Operatoren und Funktionsaufrufen enthalten. Ausdrücke werden häufig verwendet, um Berechnungen durchzuführen oder Bedingungen auszuwerten.

Im Folgenden sind einige Beispiele aufgeführt:

  • {{ 2 + 3 }}wird mit 5 ausgewertet.

  • {{ "Hello, " + "World!" }}wird zu „Hello, World!“ ausgewertet.

  • {{ Math.max(5, 10) }}wird mit 10 bewertet.

  • {{ Math.random() * 10 }}gibt eine Zufallszahl (mit Dezimalzahlen) zwischen [0-10) zurück.

Interpolation

Sie können es auch verwenden JavaScript , um dynamische Werte in statischem Text zu interpolieren. Dies wird erreicht, indem der JavaScript Ausdruck wie im folgenden Beispiel in doppelte geschweifte Klammern eingeschlossen wird:

Hello {{ currentUser.firstName }}, welcome to App Studio!

In diesem Beispiel currentUser.firstName ist das ein JavaScript Ausdruck, der den Vornamen des aktuellen Benutzers abruft, der dann dynamisch in die Grußnachricht eingefügt wird.

Verkettung

Sie können Zeichenketten und Variablen mithilfe des + Operators in verketten JavaScript, wie im folgenden Beispiel.

{{ currentRow.FirstName + " " + currentRow.LastName }}

Dieser Ausdruck kombiniert die Werte von currentRow.FirstName und currentRow.LastName mit einem Leerzeichen dazwischen, was den vollständigen Namen der aktuellen Zeile ergibt. Wenn z. B. currentRow.FirstName ist John und currentRow.LastName istDoe, würde der Ausdruck in aufgelöst werdenJohn Doe.

Datum und Uhrzeit

JavaScript bietet verschiedene Funktionen und Objekte für die Arbeit mit Datums- und Uhrzeitangaben. Beispiel:

  • {{ new Date().toLocaleDateString() }}: Gibt das aktuelle Datum in einem lokalisierten Format zurück.

  • {{ DateTime.now().toISODate() }}: Gibt das aktuelle Datum im YYYY-MM-DD Format zurück, das in der Date-Komponente verwendet werden kann.

Vergleich von Datum und Uhrzeit

Verwenden Sie Operatoren wie=,,>, oder <>=, <= um Datums- oder Uhrzeitwerte zu vergleichen. Beispiel:

  • {{ui.timeInput.value > "10:00 AM"}}: Prüft, ob die Uhrzeit nach 10:00 Uhr liegt.

  • {{ui.timeInput.value <= "5:00 PM"}}: Prüft, ob die Uhrzeit um oder vor 17:00 Uhr liegt.

  • {{ui.timeInput.value > DateTime.now().toISOTime()}}: Prüft, ob die Uhrzeit nach der aktuellen Uhrzeit liegt.

  • {{ui.dateInput.value > DateTime.now().toISODate()}}: Prüft, ob das Datum vor dem aktuellen Datum liegt.

  • {{ DateTime.fromISO(ui.dateInput.value).diff(DateTime.now(), "days").days >= 5 }}: Prüft, ob das Datum mindestens 5 Tage vom aktuellen Datum entfernt ist.

Code-Blöcke

Zusätzlich zu Ausdrücken können Sie auch mehrzeilige JavaScript Codeblöcke schreiben. Im Gegensatz zu Ausdrücken benötigen Codeblöcke keine geschweiften Klammern. Stattdessen können Sie Ihren JavaScript Code direkt im Codeblock-Editor schreiben.

Anmerkung

Während Ausdrücke ausgewertet und ihre Werte angezeigt werden, werden Codeblöcke ausgeführt und ihre Ausgabe (falls vorhanden) wird angezeigt.

Globale Variablen und Funktionen

App Studio bietet Zugriff auf bestimmte globale Variablen und Funktionen, die in Ihren JavaScript Ausdrücken und Codeblöcken verwendet werden können. currentUserist beispielsweise eine globale Variable, die den aktuell angemeldeten Benutzer darstellt, und Sie können auf Eigenschaften zugreifen, currentUser.role um beispielsweise die Rolle des Benutzers abzurufen.

Referenzieren oder Aktualisieren von UI-Komponentenwerten

Sie können Ausdrücke in Komponenten und Automatisierungsaktionen verwenden, um UI-Komponentenwerte zu referenzieren und zu aktualisieren. Durch programmgesteuertes Referenzieren und Aktualisieren von Komponentenwerten können Sie dynamische und interaktive Benutzeroberflächen erstellen, die auf Benutzereingaben und Datenänderungen reagieren.

Referenzieren von UI-Komponentenwerten

Sie können interaktive und datengesteuerte Anwendungen erstellen, indem Sie dynamisches Verhalten implementieren, indem Sie auf Werte aus UI-Komponenten zugreifen.

Sie können auf Werte und Eigenschaften von UI-Komponenten auf derselben Seite zugreifen, indem Sie den ui Namespace in Ausdrücken verwenden. Indem Sie auf den Namen einer Komponente verweisen, können Sie ihren Wert abrufen oder Operationen auf der Grundlage ihres Status ausführen.

Anmerkung

Der ui Namespace zeigt nur Komponenten auf der aktuellen Seite an, da Komponenten auf ihre jeweiligen Seiten beschränkt sind.

Die grundlegende Syntax für den Verweis auf Komponenten in einer App Studio-App lautet:. {{ui.componentName}}

Die folgende Liste enthält Beispiele für die Verwendung des ui Namespace für den Zugriff auf UI-Komponentenwerte:

  • {{ui.textInputName.value}}: Stellt den Wert einer Texteingabekomponente mit dem Namen textInputName dar.

  • {{ui.formName.isValid}}: Prüfen Sie anhand der von Ihnen angegebenen Validierungskriterien, ob alle Felder im benannten Formular gültig formName sind.

  • {{ui.tableName.currentRow.columnName}}: Stellt den Wert einer bestimmten Spalte in der aktuellen Zeile einer benannten Tabellenkomponente dartableName.

  • {{ui.tableName.selectedRowData.fieldName}}: Stellt den Wert des angegebenen Felds aus der ausgewählten Zeile in einer benannten Tabellenkomponente dartableName. Sie können dann einen Feldnamen wie ID ({{ui.tableName.selectedRowData.ID}}) anhängen, um auf den Wert dieses Felds aus der ausgewählten Zeile zu verweisen.

Die folgende Liste enthält spezifischere Beispiele für das Verweisen auf Komponentenwerte:

  • {{ui.inputText1.value.trim().length > 0}}: Prüfen Sie, ob der Wert der inputText1 Komponente nach dem Abschneiden aller führenden oder nachfolgenden Leerzeichen eine nicht leere Zeichenfolge enthält. Dies kann nützlich sein, um Benutzereingaben oder enabling/disabling andere Komponenten anhand des Werts des Eingabetextfeldes zu validieren.

  • {{ui.multiSelect1.value.join(", ")}}: Für eine benannte Komponente mit multiSelect1 Mehrfachauswahl konvertiert dieser Ausdruck das Array der ausgewählten Optionswerte in eine durch Kommas getrennte Zeichenfolge. Dies kann hilfreich sein, um die ausgewählten Optionen in einem benutzerfreundlichen Format anzuzeigen oder die Auswahl an eine andere Komponente oder Automatisierung zu übergeben.

  • {{ui.multiSelect1.value.includes("option1")}}: Dieser Ausdruck prüft, ob der option1 Wert im Array der ausgewählten Optionen für die multiSelect1 Komponente enthalten ist. Es gibt „true“ zurück, wenn es ausgewählt option1 ist, andernfalls „false“. Dies kann für das bedingte Rendern von Komponenten oder das Ergreifen von Aktionen auf der Grundlage bestimmter Optionsauswahlen nützlich sein.

  • {{ui.s3Upload1.files.length > 0}}: Für eine Amazon S3-Datei-Upload-Komponente mit dem Namen prüft dieser Ausdrucks3Upload1, ob Dateien hochgeladen wurden, indem er die Länge des Datei-Arrays überprüft. Er kann für enabling/disabling andere Komponenten oder Aktionen nützlich sein, je nachdem, ob Dateien hochgeladen wurden.

  • {{ui.s3Upload1.files.filter(file => file.type === "image/png").length}}: Dieser Ausdruck filtert die Liste der hochgeladenen Dateien in der s3Upload1 Komponente, sodass nur PNG-Bilddateien enthalten sind, und gibt die Anzahl dieser Dateien zurück. Dies kann hilfreich sein, um Informationen zu den hochgeladenen Dateitypen zu validieren oder anzuzeigen.

Die Werte der UI-Komponenten werden aktualisiert

Um den Wert einer Komponente zu aktualisieren oder zu bearbeiten, verwenden Sie das RunComponentAction innerhalb einer Automatisierung. Hier ist ein Beispiel für die Syntax, mit der Sie den Wert einer Texteingabekomponente aktualisieren können, die myInput mithilfe der RunComponentAction Aktion benannt wurde:

RunComponentAction(ui.myInput, "setValue", "New Value")

In diesem Beispiel ruft der RunComponentAction Schritt die setValue Aktion für die myInput Komponente auf und übergibt den neuen Wert,New Value.

Arbeiten mit Tabellendaten

Sie können auf Tabellendaten und Werte zugreifen, um Operationen auszuführen. Sie können die folgenden Ausdrücke verwenden, um auf Tabellendaten zuzugreifen:

  • currentRow: Wird für den Zugriff auf Tabellendaten aus der aktuellen Zeile in der Tabelle verwendet. Zum Beispiel das Festlegen des Namens einer Tabellenaktion, das Senden eines Werts aus der Zeile an eine Automatisierung, die von einer Aktion aus gestartet wird, oder das Verwenden von Werten aus vorhandenen Spalten in einer Tabelle, um eine neue Spalte zu erstellen.

  • ui.tableName.selectedRowund ui.tableName.selectedRowData werden beide verwendet, um von anderen Komponenten auf der Seite aus auf Tabellendaten zuzugreifen. Beispielsweise, wenn Sie den Namen einer Schaltfläche auf der Grundlage der ausgewählten Zeile außerhalb der Tabelle festlegen. Die zurückgegebenen Werte sind dieselben, aber die Unterschiede zwischen selectedRow und selectedRowData lauten wie folgt:

    • selectedRow: Dieser Namespace enthält den Namen, der in der Spaltenüberschrift für jedes Feld angezeigt wird. Sie sollten ihn verwendenselectedRow, wenn Sie auf einen Wert aus einer sichtbaren Spalte in der Tabelle verweisen. Zum Beispiel, wenn Sie eine benutzerdefinierte oder berechnete Spalte in Ihrer Tabelle haben, die nicht als Feld in der Entität existiert.

    • selectedRowData: Dieser Namespace umfasst die Felder in der Entität, die als Quelle für die Tabelle verwendet werden. Sie sollten ihn verwendenselectedRowData, um auf einen Wert aus der Entität zu verweisen, der in der Tabelle nicht sichtbar ist, aber für andere Komponenten oder Automatisierungen in Ihrer App nützlich ist.

Die folgende Liste enthält Beispiele für den Zugriff auf Tabellendaten in Ausdrücken:

  • {{ui.tableName.selectedRow.columnNameWithNoSpace}}: Gibt den Wert der columnNameWithNoSpace Spalte aus der ausgewählten Zeile in der Tabelle zurück.

  • {{ui.tableName.selectedRow.['Column Name With Space']}}: Gibt den Wert der Column Name With Space Spalte aus der ausgewählten Zeile in der Tabelle zurück.

  • {{ui.tableName.selectedRowData.fieldName}}: Gibt den Wert des fieldName Entitätsfeldes aus der ausgewählten Zeile in der Tabelle zurück.

  • {{ui.tableName.selectedRows[0].columnMappingName}}: Verweisen Sie anhand anderer Komponenten oder Ausdrücke auf derselben Seite auf den Spaltennamen der ausgewählten Zeile.

  • {{currentRow.firstName + ' ' + currentRow.lastNamecolumnMapping}}: Verketten Sie Werte aus mehreren Spalten, um eine neue Spalte in einer Tabelle zu erstellen.

  • {{ { "Blocked": "🔴", "Delayed": "🟡", "On track": "🟢" }[currentRow.statuscolumnMapping] + " " + currentRow.statuscolumnMapping}}: Passen Sie den Anzeigewert eines Felds in einer Tabelle auf der Grundlage des gespeicherten Statuswerts an.

  • {{currentRow.colName}}, {{currentRow["First Name"]}}{{currentRow}}, oder{{ui.tableName.selectedRows[0]}}: Übergibt den Kontext der referenzierten Zeile innerhalb einer Zeilenaktion.

Auf Automatisierungen zugreifen

Sie können Automatisierungen verwenden, um serverseitige Logik und Operationen in App Studio auszuführen. In Automatisierungsaktionen können Sie Ausdrücke verwenden, um Daten zu verarbeiten, dynamische Werte zu generieren und Ergebnisse aus früheren Aktionen zu integrieren.

Zugreifen auf Automatisierungsparameter

Sie können dynamische Werte aus UI-Komponenten und anderen Automatisierungen an Automatisierungen übergeben, sodass diese wiederverwendbar und flexibel sind. Dies erfolgt mithilfe von Automatisierungsparametern mit dem params Namespace wie folgt:

{{params.parameterName}}: Verweisen Sie auf einen Wert, der von einer UI-Komponente oder einer anderen Quelle an die Automatisierung übergeben wurde. {{params.ID}}Würde beispielsweise auf einen Parameter mit dem Namen verweisenID.

Manipulieren von Automatisierungsparametern

Sie können es verwenden JavaScript , um Automatisierungsparameter zu manipulieren. Im Folgenden sind einige Beispiele aufgeführt:

  • {{params.firstName}} {{params.lastName}}: Verkettet Werte, die als Parameter übergeben wurden.

  • {{params.numberParam1 + params.numberParam2}}: Fügt zwei Zahlenparameter hinzu.

  • {{params.valueProvided?.length > 0 ? params.valueProvided : 'Default'}}: Prüft, ob ein Parameter nicht Null oder undefiniert ist und eine Länge ungleich Null hat. Falls wahr, verwenden Sie den angegebenen Wert; andernfalls legen Sie einen Standardwert fest.

  • {{params.rootCause || "No root cause provided"}}: Wenn der params.rootCause Parameter falsch ist (null, undefiniert oder eine leere Zeichenfolge), verwenden Sie den angegebenen Standardwert.

  • {{Math.min(params.numberOfProducts, 100)}}: Beschränken Sie den Wert eines Parameters auf einen Maximalwert (in diesem Fall100).

  • {{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}: Wenn der params.startDate Parameter gleich ist"2023-06-15T10:30:00.000Z", ergibt dieser Ausdruck das Datum"2023-06-22T10:30:00.000Z", das eine Woche nach dem Startdatum liegt.

Der Zugriff auf Automatisierungsergebnisse aus einer vorherigen Aktion

Automatisierungen ermöglichen es der Anwendung, serverseitige Logik und Operationen auszuführen, wie z. B. das Abfragen von Datenbanken, die Interaktion mit APIs oder das Durchführen von Datentransformationen. Der results Namespace bietet Zugriff auf die Ausgaben und Daten, die von früheren Aktionen innerhalb derselben Automatisierung zurückgegeben wurden. Beachten Sie beim Zugriff auf Automatisierungsergebnisse die folgenden Punkte:

  1. Sie können nur auf Ergebnisse früherer Automatisierungsschritte innerhalb derselben Automatisierung zugreifen.

  2. Wenn Sie Aktionen benannt action1 und action2 in dieser Reihenfolge benannt haben, action1 können Sie auf keine Ergebnisse verweisen und action2 nur darauf zugreifenresults.action1.

  3. Das funktioniert auch bei clientseitigen Aktionen. Zum Beispiel, wenn Sie eine Schaltfläche haben, die mithilfe der Aktion eine Automatisierung auslöst. InvokeAutomation Sie können dann einen Navigationsschritt mit einer Run If Bedingung wie dem Navigieren results.myInvokeAutomation1.fileType === "pdf" zu einer Seite mit einem PDF-Viewer ausführen, wenn die Automatisierung angibt, dass es sich bei der Datei um eine PDF-Datei handelt.

Die folgende Liste enthält die Syntax für den Zugriff auf Automatisierungsergebnisse einer vorherigen Aktion mithilfe des results Namespaces.

  • {{results.stepName.data}}: Ruft das Datenarray aus einem Automatisierungsschritt mit dem Namen stepName ab.

  • {{results.stepName.output}}: Ruft die Ausgabe eines Automatisierungsschritts mit dem Namen abstepName.

Die Art und Weise, wie Sie auf die Ergebnisse eines Automatisierungsschritts zugreifen, hängt von der Art der Aktion und den zurückgegebenen Daten ab. Verschiedene Aktionen können unterschiedliche Eigenschaften oder Datenstrukturen zurückgeben. Hier sind einige gängige Beispiele:

  • Für eine Datenaktion können Sie auf das zurückgegebene Datenarray zugreifen, indem Sieresults.stepName.data.

  • Für eine API-Aufrufaktion können Sie auf den Antworttext zugreifen, indem Sieresults.stepName.body.

  • Für eine Amazon S3-Aktion können Sie auf den Dateiinhalt zugreifen mitresults.stepName.Body.transformToWebStream().

In der Dokumentation zu den spezifischen Aktionstypen, die Sie verwenden, finden Sie einen Überblick über die Form der Daten, die sie zurückgeben, und wie Sie innerhalb des results Namespaces darauf zugreifen können. Die folgende Liste enthält einige Beispiele

  • {{results.getDataStep.data.filter(row => row.status === "pending").length}}: Unter der Annahme, dass es sich um eine Invoke Data Action Automatisierungsaktion getDataStep handelt, die ein Array von Datenzeilen zurückgibt, filtert dieser Ausdruck das Datenarray so, dass es nur Zeilen enthält, bei denen das Statusfeld gleich istpending, und gibt die Länge (Anzahl) des gefilterten Arrays zurück. Dies kann nützlich sein, um Daten auf der Grundlage bestimmter Bedingungen abzufragen oder zu verarbeiten.

  • {{params.email.split("@")[0]}}: Wenn der params.email Parameter eine E-Mail-Adresse enthält, teilt dieser Ausdruck die Zeichenfolge am @-Symbol auf und gibt den Teil vor dem @-Symbol zurück, wodurch der Benutzernamenanteil der E-Mail-Adresse extrahiert wird.

  • {{new Date(params.timestamp * 1000)}}: Dieser Ausdruck verwendet einen Unix-Zeitstempelparameter (params.timestamp) und konvertiert ihn in ein JavaScript Date-Objekt. Er geht davon aus, dass der Zeitstempel in Sekunden angegeben ist, und multipliziert ihn mit 1000, um ihn in Millisekunden umzurechnen, was das vom Konstruktor erwartete Format ist. Date Dies kann für die Arbeit mit Datums- und Uhrzeitwerten in Automatisierungen nützlich sein.

  • {{results.stepName.Body}}: Für eine Amazon S3 GetObject Automatisierungsaktion mit dem Namen stepName ruft dieser Ausdruck den Dateiinhalt ab, der von Benutzeroberflächenkomponenten wie Image oder PDF Viewer zur Anzeige der abgerufenen Datei verwendet werden kann. Beachten Sie, dass dieser Ausdruck in der Automatisierungsausgabe der Automatisierung konfiguriert werden muss, um ihn in Komponenten verwenden zu können.