

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.

# Builder-Dokumentation
<a name="builder-documentation"></a>

Die folgenden Themen enthalten Informationen, die Benutzern in App Studio helfen sollen, die Anwendungen erstellen, bearbeiten und veröffentlichen.

**Topics**
+ [Lernprogramme](tutorials.md)
+ [Erstellen Sie Ihre App Studio-App mit generativer KI](generative-ai.md)
+ [Anwendungen erstellen, bearbeiten und löschen](applications-create-edit-delete.md)
+ [Anwendungen in der Vorschau anzeigen, veröffentlichen und teilen](applications-preview-publish-share.md)
+ [Seiten und Komponenten: Erstellen Sie die Benutzeroberfläche Ihrer App](pages-components-ux.md)
+ [Automatisierungen und Aktionen: Definieren Sie die Geschäftslogik Ihrer App](automations.md)
+ [Entitäten und Datenaktionen: Konfigurieren Sie das Datenmodell Ihrer App](data.md)
+ [Seiten- und Automatisierungsparameter](paramters.md)
+ [Verwenden JavaScript , um Ausdrücke in App Studio zu schreiben](expressions.md)
+ [Datenabhängigkeiten und zeitliche Überlegungen](data-dependencies-timing-considerations.md)
+ [Eine App mit mehreren Benutzern erstellen](builder-collaboration.md)
+ [Inhaltssicherheitseinstellungen Ihrer App anzeigen oder aktualisieren](app-content-security-settings-csp.md)

# Lernprogramme
<a name="tutorials"></a>

**Topics**
+ [Erstellen Sie mit Amazon Bedrock eine KI-App zur Textzusammenfassung](tutorial-conversational-bedrock.md)
+ [Interaktion mit Amazon Simple Storage Service mit Komponenten und Automatisierungen](automations-s3.md)
+ [Lambda-Funktionen in einer App Studio-App aufrufen](tutorial-lambda.md)

# Erstellen Sie mit Amazon Bedrock eine KI-App zur Textzusammenfassung
<a name="tutorial-conversational-bedrock"></a>

In diesem Tutorial erstellen Sie eine Anwendung in App Studio, die Amazon Bedrock verwendet, um präzise Zusammenfassungen der Texteingaben von Endbenutzern bereitzustellen. Die Anwendung enthält eine einfache Benutzeroberfläche, über die Benutzer beliebigen Text eingeben können, den sie zusammenfassen möchten. Dies können Besprechungsnotizen, Artikelinhalte, Forschungsergebnisse oder andere Textinformationen sein. Nachdem Benutzer den Text eingegeben haben, können sie eine Taste drücken, um den Text an Amazon Bedrock zu senden. Amazon Bedrock verarbeitet ihn mit dem Modell Claude 3 Sonnet und sendet eine zusammengefasste Version zurück.

**Contents**
+ [Voraussetzungen](#tutorial-conversational-bedrock-prerequisites)
+ [Schritt 1: Erstellen und konfigurieren Sie eine IAM-Rolle und einen App Studio-Connector](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [Schritt 2: Erstellen Sie eine Anwendung](#tutorial-conversational-bedrock-steps-create-application)
+ [Schritt 3: Erstellen und konfigurieren Sie eine Automatisierung](#tutorial-conversational-bedrock-steps-create-automation)
+ [Schritt 4: Seiten und Komponenten erstellen](#tutorial-conversational-bedrock-steps-user-interface)
  + [Benennen Sie die Standardseite um](#tutorial-conversational-bedrock-steps-user-interface-create-page)
  + [Fügen Sie der Seite Komponenten hinzu](#tutorial-conversational-bedrock-steps-user-interface-add-components)
  + [Konfigurieren Sie die Seitenkomponenten](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [Schritt 5: Veröffentlichen Sie die Anwendung in der **Testumgebung**](#tutorial-conversational-bedrock-steps-publish)
+ [(Optional) Bereinigen](#tutorial-conversational-bedrock-steps-cleanup)

## Voraussetzungen
<a name="tutorial-conversational-bedrock-prerequisites"></a>

Bevor Sie beginnen, sollten Sie die folgenden Voraussetzungen überprüfen und erfüllen:
+ Zugriff auf AWS App Studio. Beachten Sie, dass Sie in diesem Tutorial über die Administratorrolle verfügen müssen, um einen Connector zu erstellen.
+ Optional: Lesen [AWS App Studio-Konzepte](concepts.md) und dann[Tutorial: Beginne mit dem Erstellen von einer leeren App](getting-started-tutorial-empty.md), um sich mit wichtigen App Studio-Konzepten vertraut zu machen.

## Schritt 1: Erstellen und konfigurieren Sie eine IAM-Rolle und einen App Studio-Connector
<a name="tutorial-conversational-bedrock-steps-create-role-connector"></a>

Um App Studio Zugriff auf Amazon Bedrock-Modelle zu gewähren, müssen Sie:

1. Aktivieren Sie die Amazon Bedrock-Modelle, die Sie in Ihrer App verwenden möchten. Für dieses Tutorial verwenden Sie **Claude 3 Sonnet**. Stellen Sie also sicher, dass Sie dieses Modell aktivieren.

1. Erstellen Sie eine IAM-Rolle mit den entsprechenden Berechtigungen für Amazon Bedrock.

1. Erstellen Sie einen App Studio-Connector mit der IAM-Rolle, die in Ihrer App verwendet wird.

[Connect zu Amazon Bedrock her](connectors-bedrock.md)Ausführliche Anweisungen finden Sie unter und kehren Sie zu diesem Tutorial zurück, nachdem Sie die Schritte ausgeführt und den Connector erstellt haben.

## Schritt 2: Erstellen Sie eine Anwendung
<a name="tutorial-conversational-bedrock-steps-create-application"></a>

Gehen Sie wie folgt vor, um in App Studio eine leere App zu erstellen, die Sie in die Textzusammenfassungs-App integrieren.

1. Melden Sie sich bei App Studio an.

1. Navigieren Sie zum Builder-Hub und wählen Sie **\$1 App erstellen**.

1. Wählen Sie **Von vorne beginnen**.

1. Geben Sie im Feld **App-Name** einen Namen für Ihre App ein, z. **Text Summarizer** B.

1. Wenn Sie aufgefordert werden, Datenquellen oder einen Connector auszuwählen, wählen Sie für die Zwecke dieses Tutorials die Option **Überspringen**.

1. Wählen Sie **Weiter** aus, um fortzufahren.

1. (Optional): Sehen Sie sich das Video-Tutorial an, um einen schnellen Überblick über die Erstellung von Apps in App Studio zu erhalten.

1. Wählen Sie **App bearbeiten**, um zum Anwendungsstudio zu gelangen.

## Schritt 3: Erstellen und konfigurieren Sie eine Automatisierung
<a name="tutorial-conversational-bedrock-steps-create-automation"></a>

Sie definieren die Logik und das Verhalten einer App Studio-App in *Automatisierungen.* Automatisierungen bestehen aus einzelnen Schritten, den sogenannten *Aktionen*, *Parametern*, mit denen Daten aus anderen Ressourcen an die Aktion übergeben werden, und einer *Ausgabe*, die von anderen Automatisierungen oder Komponenten verwendet werden kann. In diesem Schritt erstellen Sie eine Automatisierung, die die Interaktion mit Amazon Bedrock wie folgt abwickelt:
+ Eingaben: Ein Parameter, um die Texteingabe vom Benutzer an die Automatisierung weiterzuleiten.
+ Aktionen: Eine **GenAI Prompt-Aktion**, die die Texteingabe an Amazon Bedrock sendet und die ausgegebene Textzusammenfassung zurückgibt.
+ Ausgaben: Eine Automatisierungsausgabe, die aus der verarbeiteten Zusammenfassung von Amazon Bedrock besteht und in Ihrer App verwendet werden kann.

**Um eine Automatisierung zu erstellen und zu konfigurieren, die eine Aufforderung an Amazon Bedrock sendet und eine Zusammenfassung verarbeitet und zurücksendet**

1. Wählen Sie oben auf der Leinwand die Registerkarte **Automationen** aus.

1. Wählen Sie **\$1 Automatisierung hinzufügen**.

1. Wählen Sie im rechten Bereich **Eigenschaften**.

1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **InvokeBedrock** und drücken **Sie die Eingabetaste**.

1. Fügen Sie der Automatisierung einen Parameter hinzu, der verwendet wird, um die Eingabeaufforderungseingabe des Benutzers an die Automatisierung weiterzuleiten, die in der Anfrage an Amazon Bedrock verwendet werden soll, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie auf der Leinwand im Parameterfeld **\$1 Hinzufügen** aus.

   1. Geben Sie unter **Name** **input** ein.

   1. **Geben Sie im Feld Beschreibung eine beliebige Beschreibung ein, z. **Text to be sent to Amazon Bedrock** B.**

   1. Wählen Sie **unter Typ** die Option **Zeichenfolge** aus.

   1. Wählen Sie **Hinzufügen**, um den Parameter zu erstellen.

1. Fügen Sie eine **GenAI Prompt-Aktion** hinzu, indem Sie die folgenden Schritte ausführen:

   1. **Wählen Sie im rechten Bereich Aktionen aus.**

   1. Wählen Sie **GenAI Prompt**, um eine Aktion hinzuzufügen.

1. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das **Eigenschaftenmenü** auf der rechten Seite zu öffnen.

   1. Benennen Sie die Aktion um in, **PromptBedrock** indem Sie das Stiftsymbol wählen, den Namen eingeben und die Eingabetaste drücken.

   1. Wählen Sie unter **Connector** den Connector aus, der in erstellt wurde[Schritt 1: Erstellen und konfigurieren Sie eine IAM-Rolle und einen App Studio-Connector](#tutorial-conversational-bedrock-steps-create-role-connector).

   1. Wählen Sie unter **Modell** das Amazon Bedrock-Modell aus, das Sie für die Verarbeitung der Aufforderung verwenden möchten. In diesem Tutorial wählen Sie **Claude 3.5 Sonnet**.

   1. Geben `{{params.input}}` Sie im Feld **Benutzeraufforderung** den Wert ein. Dies stellt den `input` Parameter dar, den Sie zuvor erstellt haben, und enthält die Texteingabe Ihrer App-Benutzer. 

   1. Geben Sie unter **Systemaufforderung** die Anweisungen zur Systemaufforderung ein, die Sie an Amazon Bedrock senden möchten. Geben Sie für dieses Tutorial Folgendes ein:

      ```
      You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
      ```

   1. Wählen Sie **„Einstellungen anfordern“**, um es zu erweitern, und aktualisieren Sie die folgenden Felder:
      + Geben Sie im Feld **Temperatur** den Wert ein`0`. Die Temperatur bestimmt die Zufälligkeit oder Kreativität der Ausgabe auf einer Skala von 0 bis 10. Je höher die Zahl, desto kreativer ist die Reaktion.
      + Geben Sie im Feld **Max. Tokens** ein, `4096` um die Länge der Antwort zu begrenzen.

1. Die Ausgabe dieser Automatisierung ist der zusammengefasste Text, jedoch erzeugen Automatisierungen standardmäßig keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass sie eine Automatisierungsausgabe erstellt, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie in der linken Navigationsleiste die **InvokeBedrock**Automatisierung aus.

   1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Ausgabe** die Option **\$1** Hinzufügen.

   1. Geben **\$1\$1results.PromptBedrock.text\$1\$1** Sie im Feld **Ausgabe** den Wert ein. Dieser Ausdruck gibt den Inhalt der `processResults` Aktion zurück.

## Schritt 4: Seiten und Komponenten erstellen
<a name="tutorial-conversational-bedrock-steps-user-interface"></a>

In App Studio stellt jede Seite einen Bildschirm der Benutzeroberfläche (UI) Ihrer Anwendung dar, mit dem Ihre Benutzer interagieren werden. Auf diesen Seiten können Sie verschiedene Komponenten wie Tabellen, Formulare, Schaltflächen und mehr hinzufügen, um das gewünschte Layout und die gewünschte Funktionalität zu erstellen. 

### Benennen Sie die Standardseite um
<a name="tutorial-conversational-bedrock-steps-user-interface-create-page"></a>

Die Textzusammenfassungs-App in diesem Tutorial wird nur eine Seite enthalten. Neu erstellte Anwendungen verfügen über eine Standardseite, sodass Sie diese umbenennen, anstatt eine hinzuzufügen.

**Um die Standardseite umzubenennen**

1. Wählen Sie im Navigationsmenü der oberen Leiste die Option **Seiten** aus.

1. Wählen Sie im linken Bereich **Page1** und dann im rechten Bereich das **Eigenschaften-Panel** aus.

1. **Wählen Sie das Stiftsymbol, geben Sie die Eingabetaste ein und drücken Sie **TextSummarizationTool** die Eingabetaste.**

1. Geben Sie in der **Navigationsbeschriftung** ein**TextSummarizationTool**.

### Fügen Sie der Seite Komponenten hinzu
<a name="tutorial-conversational-bedrock-steps-user-interface-add-components"></a>

Für dieses Tutorial hat die Textzusammenfassungs-App eine Seite, die die folgenden Komponenten enthält:
+ Eine **Texteingabekomponente**, mit der Endbenutzer eine Aufforderung zur Zusammenfassung eingeben.
+ Eine **Button-Komponente**, die verwendet wird, um die Aufforderung an Amazon Bedrock zu senden.
+ Eine **Textbereichskomponente**, die die Zusammenfassung von Amazon Bedrock anzeigt.

Fügen Sie der Seite eine **Texteingabekomponente** hinzu, über die Benutzer eine Texteingabeaufforderung zur Zusammenfassung eingeben.

**Um eine Texteingabekomponente hinzuzufügen**

1. Suchen Sie im rechten Bedienfeld „**Komponenten**“ die **Texteingabekomponente** und ziehen Sie sie auf die Leinwand.

1. Wählen Sie die Texteingabe auf der Leinwand aus, um sie auszuwählen.

1. Aktualisieren Sie im **Eigenschaftenbereich** auf der rechten Seite die folgenden Einstellungen:

   1. Wählen Sie das Stiftsymbol, in das Sie die Texteingabe umbenennen möchten**inputPrompt**.

   1. Geben Sie im Feld **Bezeichnung** den Wert ein**Prompt**.

   1. Geben **Enter text to be summarized** Sie im Feld **Platzhalter** den Wert ein.

Fügen Sie nun eine **Button-Komponente** hinzu, mit der Benutzer die Aufforderung an Amazon Bedrock senden können.

**Um eine Button-Komponente hinzuzufügen**

1. Suchen Sie im rechten Bedienfeld „**Komponenten**“ die **Button-Komponente** und ziehen Sie sie auf die Arbeitsfläche.

1. Wählen Sie die Schaltfläche auf der Leinwand aus, um sie auszuwählen.

1. Aktualisieren Sie im **Eigenschaftenbereich** auf der rechten Seite die folgenden Einstellungen:

   1. Wählen Sie das Stiftsymbol, in das Sie die Schaltfläche umbenennen möchten**sendButton**.

   1. Geben **Sie im Feld Schaltflächenbezeichnung** den Wert ein**Send**.

Fügen Sie nun eine **Textbereichskomponente** hinzu, die die von Amazon Bedrock zurückgegebene Zusammenfassung anzeigt.

**Um eine Textbereichskomponente hinzuzufügen**

1. Suchen Sie im rechten Bedienfeld „**Komponenten**“ die **Textbereichskomponente** und ziehen Sie sie auf die Leinwand.

1. Wählen Sie den Textbereich auf der Leinwand aus, um ihn auszuwählen.

1. Aktualisieren Sie im **Eigenschaftenbereich** auf der rechten Seite die folgenden Einstellungen:

   1. Wählen Sie das Stiftsymbol, in das Sie die Schaltfläche umbenennen möchten**textSummary**.

   1. Geben Sie im Feld **Bezeichnung** den Wert ein**Summary**.

### Konfigurieren Sie die Seitenkomponenten
<a name="tutorial-conversational-bedrock-steps-user-interface-configure-components"></a>

Da die App nun eine Seite mit Komponenten enthält, besteht der nächste Schritt darin, die Komponenten so zu konfigurieren, dass sie das entsprechende Verhalten ausführen. Um eine Komponente, z. B. eine Schaltfläche, so zu konfigurieren, dass sie Aktionen ausführt, wenn mit ihr interagiert wird, müssen Sie ihr einen *Auslöser* hinzufügen. Für die App in diesem Tutorial fügen Sie der `sendButton` Schaltfläche zwei Auslöser hinzu, um Folgendes zu tun:
+ Der erste Trigger sendet den Text in der `textPrompt` Komponente zur Analyse an Amazon Bedrock.
+ Der zweite Auslöser zeigt die von Amazon Bedrock zurückgegebene Zusammenfassung in der `textSummary` Komponente an.

**Um einen Auslöser hinzuzufügen, der die Aufforderung an Amazon Bedrock sendet**

1. Wählen Sie die Schaltfläche auf der Leinwand, um sie auszuwählen.

1. Wählen Sie im **Eigenschaftenfenster** auf der rechten Seite im Bereich **Auslöser** die Option **\$1 Hinzufügen**.

1. Wählen Sie „**Automatisierung aufrufen**“.

1. Wählen Sie den einen **InvokeAutomationTrigger** aus, der erstellt wurde, um ihn zu konfigurieren.

1. Geben Sie im Feld **Aktionsname** den Wert ein**invokeBedrockAutomation**.

1. Wählen Sie unter **Invoke Automation** die **InvokeBedrock**Automatisierung aus, die zuvor erstellt wurde.

1. Geben Sie im Parameterfeld in den **Eingabeparameter**, der zuvor erstellt wurde, den Text ein**\$1\$1ui.inputPrompt.value\$1\$1**, der den Inhalt der `inputPrompt` Texteingabekomponente übergibt.

1. Klicken Sie oben im Bedienfeld auf den Linkspfeil, um zum Menü mit den Komponenteneigenschaften zurückzukehren.

Jetzt haben Sie einen Trigger konfiguriert, der die Automatisierung zum Senden einer Anfrage an Amazon Bedrock aufruft, wenn auf die Schaltfläche geklickt wird. Der nächste Schritt besteht darin, einen zweiten Trigger zu konfigurieren, der die Ergebnisse in der Komponente anzeigt. `textSummary`

**Um einen Trigger hinzuzufügen, der die Amazon Bedrock-Ergebnisse in der Textbereichskomponente anzeigt**

1. Wählen Sie auf der rechten Seite des **Eigenschaftenfensters** der Schaltfläche im Bereich **Auslöser** die Option **\$1** Hinzufügen.

1. Wählen Sie „**Komponentenaktion ausführen**“.

1. Wählen Sie den **Runcomponentaction1-Trigger** aus, der für die Konfiguration erstellt wurde.

1. Geben Sie im Feld **Aktionsname** den Wert ein. **setTextSummary**

1. Wählen Sie unter **Komponente** die **TextSummary-Komponente** aus.

1. Wählen Sie unter **Aktion** die Option **Wert festlegen** aus.

1. Geben **Sie im Feld Wert setzen auf** ein**\$1\$1results.invokeBedrockAutomation\$1\$1**.

## Schritt 5: Veröffentlichen Sie die Anwendung in der **Testumgebung**
<a name="tutorial-conversational-bedrock-steps-publish"></a>

Während der Entwicklung einer App empfiehlt es sich in der Regel, eine Vorschau der App anzusehen, um zu sehen, wie sie aussieht, und erste Tests ihrer Funktionalität durchzuführen. Da Anwendungen in der Vorschauumgebung jedoch nicht mit externen Diensten interagieren, veröffentlichen Sie die App stattdessen in der Testumgebung, um das Senden von Anfragen und das Empfangen von Antworten von Amazon Bedrock testen zu können.

**Um Ihre App in der Testumgebung zu veröffentlichen**

1. Wählen Sie in der oberen rechten Ecke des App Builders die Option **Veröffentlichen** aus.

1. Fügen Sie eine Versionsbeschreibung für die Testumgebung hinzu.

1. Überprüfen Sie das Kontrollkästchen für das SLA und aktivieren Sie es. 

1. Wählen Sie **Starten**. Die Veröffentlichung kann bis zu 15 Minuten dauern.

1. (Optional) Wenn Sie bereit sind, können Sie anderen Zugriff gewähren, indem Sie „**Teilen**“ wählen und den Anweisungen folgen. Weitere Informationen zum Teilen von App Studio-Apps finden Sie unter[Gemeinsame Nutzung veröffentlichter Anwendungen](application-share.md).

Wählen Sie nach dem Testen Ihrer Anwendung erneut **Veröffentlichen**, um die Anwendung in die Produktionsumgebung hochzustufen. Beachten Sie, dass Apps in der Produktionsumgebung für Endbenutzer erst verfügbar sind, wenn sie gemeinsam genutzt werden. Weitere Informationen zu den verschiedenen Anwendungsumgebungen finden Sie unter[Anwendungsumgebungen](applications-publish.md#application-environments). 

## (Optional) Bereinigen
<a name="tutorial-conversational-bedrock-steps-cleanup"></a>

Sie haben das Tutorial nun erfolgreich abgeschlossen und mit Amazon Bedrock eine App zur Textzusammenfassung in App Studio erstellt. Sie können Ihre App weiterhin verwenden oder die Ressourcen bereinigen, die in diesem Tutorial erstellt wurden. Die folgende Liste enthält eine Liste der Ressourcen, die bereinigt werden müssen:
+ Der in App Studio erstellte Amazon Bedrock-Connector. Weitere Informationen finden Sie unter [Konnektoren anzeigen, bearbeiten und löschen](viewing-deleting-connectors.md).
+ Die Textzusammenfassungs-App in App Studio. Weitere Informationen finden Sie unter [Löschen einer Anwendung](applications-delete.md).
+ Die in der IAM-Konsole erstellte IAM-Rolle. Weitere Informationen finden Sie im *AWS Identity and Access Management Benutzerhandbuch* unter [Löschen von Rollen oder Instanzprofilen](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html).
+ Wenn Sie Modellzugriff für Claude 3 Sonnet beantragt haben und den Zugriff rückgängig machen möchten, finden Sie weitere Informationen unter [Zugriff auf Amazon Bedrock Foundation-Modelle verwalten](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html) im *Amazon Bedrock-Benutzerhandbuch*.

# Interaktion mit Amazon Simple Storage Service mit Komponenten und Automatisierungen
<a name="automations-s3"></a>

Sie können verschiedene Amazon S3 S3-Operationen von einer App Studio-App aus aufrufen. Sie könnten beispielsweise ein einfaches Admin-Panel erstellen, um Ihre Benutzer und Bestellungen zu verwalten und Ihre Medien von Amazon S3 aus anzuzeigen. Sie können zwar jeden Amazon S3 S3-Vorgang mit der AWS Aktion **Aufrufen aufrufen**, es gibt jedoch vier spezielle Amazon S3 S3-Aktionen, die Sie zu Automatisierungen in Ihrer App hinzufügen können, um allgemeine Operationen an Amazon S3 S3-Buckets und -Objekten durchzuführen. Die vier Aktionen und ihre Operationen lauten wie folgt:
+ **Objekt platzieren**: Verwendet den `Amazon S3 PutObject` Vorgang, um ein Objekt zu einem Amazon S3 S3-Bucket hinzuzufügen.
+ **Objekt abrufen**: Verwendet den `Amazon S3 GetObject` Vorgang, um ein Objekt aus einem Amazon S3 S3-Bucket abzurufen.
+ **Objekte auflisten**: Verwendet den `Amazon S3 ListObjects` Vorgang, um Objekte in einem Amazon S3 S3-Bucket aufzulisten.
+ **Objekt löschen**: Verwendet den `Amazon S3 DeleteObject` Vorgang, um ein Objekt aus einem Amazon S3 S3-Bucket zu löschen.

Zusätzlich zu den Aktionen gibt es eine **S3-Upload-Komponente**, die Sie Seiten in Anwendungen hinzufügen können. Benutzer können diese Komponente verwenden, um eine Datei zum Hochladen auszuwählen, und die Komponente ruft `Amazon S3 PutObject` auf, um die Datei in den konfigurierten Bucket und Ordner hochzuladen. In diesem Tutorial wird diese Komponente anstelle der eigenständigen Automatisierungsaktion „**Objekt platzieren**“ verwendet. (Die eigenständige Aktion sollte in komplexeren Szenarien verwendet werden, die zusätzliche Logik oder Aktionen beinhalten, die vor oder nach dem Hochladen ausgeführt werden müssen.)

## Voraussetzungen
<a name="automations-s3-prerequisites"></a>

In diesem Handbuch wird davon ausgegangen, dass Sie die folgenden Voraussetzungen erfüllt haben:

1. Erstellung und Konfiguration eines Amazon S3-Buckets, einer IAM-Rolle und -Richtlinie sowie eines Amazon S3 S3-Connectors, um Amazon S3 erfolgreich in App Studio zu integrieren. Um einen Connector zu erstellen, benötigen Sie die Administratorrolle. Weitere Informationen finden Sie unter [Connect zu Amazon Simple Storage Service (Amazon S3) her](connectors-s3.md).

## Erstellen Sie eine leere Anwendung
<a name="automations-s3-create-app"></a>

Erstellen Sie eine leere Anwendung, die Sie in diesem Handbuch verwenden können, indem Sie die folgenden Schritte ausführen.

**Um eine leere Anwendung zu erstellen**

1. Wählen Sie im Navigationsbereich **Meine Anwendungen** aus.

1. Wählen Sie **\$1 App erstellen**.

1. Geben Sie Ihrer Anwendung im Dialogfeld „**App erstellen**“ einen Namen, wählen Sie „**Von vorne beginnen**“ und **dann „Weiter**“.

1. Wählen **Sie im Dialogfeld Mit vorhandenen Daten verbinden** die Option **Überspringen** aus, um die Anwendung zu erstellen.

1. Wählen Sie **App bearbeiten**, um zur Arbeitsfläche Ihrer neuen App zu gelangen, wo Sie Komponenten, Automatisierungen und Daten verwenden können, um das Aussehen und die Funktion Ihrer Anwendung zu konfigurieren.

## Seiten erstellen
<a name="automations-s3-create-pages"></a>

Erstellen Sie drei Seiten in Ihrer Anwendung, um Informationen zu sammeln oder anzuzeigen.

**Um Seiten zu erstellen**

1. Wählen Sie bei Bedarf den Tab **Seiten** oben auf der Leinwand aus.

1. In der linken Navigation befindet sich eine einzelne Seite, die mit Ihrer App erstellt wurde. Wählen Sie zweimal **\$1 Hinzufügen**, um zwei weitere Seiten zu erstellen. Im Navigationsbereich sollten insgesamt drei Seiten angezeigt werden.

1. Aktualisieren Sie den Namen der Seite **Page1**, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie das Ellipsensymbol und dann **Seiteneigenschaften.**

   1. Wählen Sie im rechten **Eigenschaftenmenü** das Stiftsymbol, um den Namen zu bearbeiten.

   1. Geben Sie die Eingabetaste ein **FileList** und drücken Sie die **Eingabetaste**.

1. Wiederholen Sie die vorherigen Schritte, um die zweite und dritte Seite wie folgt zu aktualisieren:
   + Benennen Sie **Page2** um in. **UploadFile**
   + Benennen Sie **Seite3** um in. **FailUpload**

Jetzt sollte Ihre App drei Seiten mit den Namen **FileList**, und haben **UploadFile**FailUpload****, die im **Seitenmenü** auf der linken Seite angezeigt werden.

Als Nächstes erstellen und konfigurieren Sie die Automatisierungen, die mit Amazon S3 interagieren.

## Automatisierungen erstellen und konfigurieren
<a name="automations-s3-automations"></a>

Erstellen Sie die Automatisierungen Ihrer Anwendung, die mit Amazon S3 interagieren. Verwenden Sie die folgenden Verfahren, um die folgenden Automatisierungen zu erstellen:
+ Eine **GetFiles-Automatisierung**, die die Objekte in Ihrem Amazon S3 S3-Bucket auflistet, die zum Füllen einer Tabellenkomponente verwendet werden.
+ Eine **DeleteFile-Automatisierung**, die ein Objekt aus Ihrem Amazon S3 S3-Bucket löscht, das verwendet wird, um einer Tabellenkomponente eine Löschschaltfläche hinzuzufügen.
+ Eine **ViewFile-Automatisierung**, die ein Objekt aus Ihrem Amazon S3 S3-Bucket abruft und anzeigt. Dies wird verwendet, um weitere Details zu einem einzelnen Objekt anzuzeigen, das aus einer Tabellenkomponente ausgewählt wurde.

### Erstellen Sie eine Automatisierung `getFiles`
<a name="automations-s3-get-files"></a>

Erstellen Sie eine Automatisierung, die die Dateien in einem bestimmten Amazon S3 S3-Bucket auflistet.

1. Wählen Sie oben auf der Leinwand die Registerkarte **Automationen** aus.

1. Wählen Sie **\$1 Automatisierung hinzufügen**.

1. Wählen Sie im rechten Bereich **Eigenschaften** aus.

1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **getFiles** und drücken **Sie die Eingabetaste**.

1. Fügen Sie eine Aktion **Objekte auflisten** hinzu, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Bereich **Aktionen** aus.

   1. Wählen Sie **Objekte auflisten**, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werden`ListObjects1`.

1. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das **Eigenschaftenmenü** auf der rechten Seite zu öffnen.

   1. Wählen Sie für **Connector** den Amazon S3 S3-Connector aus, den Sie aus den Voraussetzungen erstellt haben.

   1. Geben Sie für **Konfiguration** den folgenden Text ein und *bucket\$1name* ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:

      ```
      {
        "Bucket": "bucket_name",
        "Prefix": ""
      }
      ```
**Anmerkung**  
Sie können das `Prefix` Feld verwenden, um die Antwort auf Objekte zu beschränken, die mit der angegebenen Zeichenfolge beginnen.

1. Die Ausgabe dieser Automatisierung wird verwendet, um eine Tabellenkomponente mit Objekten aus Ihrem Amazon S3 S3-Bucket zu füllen. Standardmäßig erzeugen Automatisierungen jedoch keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass sie eine Automatisierungsausgabe erstellt, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie in der linken Navigationsleiste die **GetFiles-Automatisierung** aus.

   1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Automationsausgabe** die Option **\$1** Ausgabe hinzufügen.

   1. Geben **\$1\$1results.ListObjects1.Contents\$1\$1** Sie für **Ausgabe** den Wert ein. Dieser Ausdruck gibt den Inhalt der Aktion zurück und kann nun zum Auffüllen einer Tabellenkomponente verwendet werden.

### Erstellen Sie eine Automatisierung `deleteFile`
<a name="automations-s3-delete-file"></a>

Erstellen Sie eine Automatisierung, die ein Objekt aus einem angegebenen Amazon S3 S3-Bucket löscht.

1. **Wählen Sie im **Automationsbereich** auf der linken Seite die Option \$1 Hinzufügen.**

1. Wählen Sie **\$1 Automatisierung hinzufügen**.

1. Wählen Sie im rechten Bereich **Eigenschaften** aus.

1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **deleteFile** und drücken **Sie die Eingabetaste**.

1. Fügen Sie einen Automatisierungsparameter hinzu, der verwendet wird, um Daten an eine Automatisierung zu übergeben, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Automatisierungsparameter** die Option **\$1 Hinzufügen** aus.

   1. Wählen Sie das Stiftsymbol, um den Automatisierungsparameter zu bearbeiten. Aktualisieren Sie den Parameternamen auf **fileName** und drücken Sie **die Eingabetaste**.

1. Fügen Sie eine Aktion **„Objekt löschen**“ hinzu, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Bereich **Aktionen** aus.

   1. Wählen Sie **Objekt löschen**, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werden`DeleteObject1`.

1. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das **Eigenschaftenmenü** auf der rechten Seite zu öffnen.

   1. Wählen Sie für **Connector** den Amazon S3 S3-Connector aus, den Sie aus den Voraussetzungen erstellt haben.

   1. Geben Sie für **Konfiguration** den folgenden Text ein und *bucket\$1name* ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:

      ```
      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }
      ```

### Erstellen Sie eine `viewFile` Automatisierung
<a name="automations-s3-view-file"></a>

Erstellen Sie eine Automatisierung, die ein einzelnes Objekt aus einem bestimmten Amazon S3 S3-Bucket abruft. Später werden Sie diese Automatisierung mit einer Datei-Viewer-Komponente konfigurieren, um das Objekt anzuzeigen.

1. Wählen Sie im **Automationsbereich** auf der linken Seite die Option **\$1** Hinzufügen.

1. Wählen Sie **\$1 Automatisierung hinzufügen**.

1. Wählen Sie im rechten Bereich **Eigenschaften** aus.

1. Aktualisieren Sie den Namen der Automatisierung, indem Sie das Stiftsymbol auswählen. Geben Sie ein **viewFile** und drücken **Sie die Eingabetaste**.

1. Fügen Sie einen Automatisierungsparameter hinzu, der verwendet wird, um Daten an eine Automatisierung zu übergeben, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Automatisierungsparameter** die Option **\$1 Hinzufügen** aus.

   1. Wählen Sie das Stiftsymbol, um den Automatisierungsparameter zu bearbeiten. Aktualisieren Sie den Parameternamen auf **fileName** und drücken Sie **die Eingabetaste**.

1. Fügen Sie eine Aktion „**Objekt abrufen**“ hinzu, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie im rechten Bereich **Aktionen** aus.

   1. Wählen Sie **Objekt abrufen**, um eine Aktion hinzuzufügen. Die Aktion sollte benannt werden`GetObject1`.

1. Konfigurieren Sie die Aktion, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie die Aktion auf der Arbeitsfläche aus, um das **Eigenschaftenmenü** auf der rechten Seite zu öffnen.

   1. Wählen Sie für **Connector** den Amazon S3 S3-Connector aus, den Sie aus den Voraussetzungen erstellt haben.

   1. Geben Sie für **Konfiguration** den folgenden Text ein und *bucket\$1name* ersetzen Sie ihn durch den Bucket, den Sie in den Voraussetzungen erstellt haben:

      ```
      {
        "Bucket": "bucket_name",
        "Key": params.fileName
      }
      ```

1. Standardmäßig erzeugen Automatisierungen keine Ausgaben. Konfigurieren Sie die Automatisierung so, dass sie eine Automatisierungsausgabe erstellt, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie in der linken Navigationsleiste die **ViewFile-Automatisierung** aus.

   1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Automationsausgabe** die Option **\$1** Ausgabe hinzufügen.

   1. Geben **\$1\$1results.GetObject1.Body.transformToWebStream()\$1\$1** Sie für **Ausgabe** den Wert ein. Dieser Ausdruck gibt den Inhalt der Aktion zurück.
**Anmerkung**  
Sie können die Antwort von auf folgende `S3 GetObject` Weise lesen:  
`transformToWebStream`: Gibt einen Stream zurück, der zum Abrufen der Daten verbraucht werden muss. Wenn sie als Automatisierungsausgabe verwendet wird, verarbeitet die Automatisierung dies, und die Ausgabe kann als Datenquelle für eine Bild- oder PDF-Viewer-Komponente verwendet werden. Sie kann auch als Eingabe für eine andere Operation verwendet werden, z. `S3 PutObject`
`transformToString`: Gibt die Rohdaten der Automatisierung zurück und sollte in einer JavaScript Aktion verwendet werden, wenn Ihre Dateien Textinhalte wie JSON-Daten enthalten. Muss abgewartet werden, zum Beispiel: `await results.GetObject1.Body.transformToString();`
`transformToByteArray`: Gibt ein Array von 8-Bit-Ganzzahlen ohne Vorzeichen zurück. Diese Antwort dient dem Zweck eines Byte-Arrays, das das Speichern und Bearbeiten von Binärdaten ermöglicht. Muss abgewartet werden, zum Beispiel: `await results.GetObject1.Body.transformToByteArray();`

Als Nächstes fügen Sie den Seiten, die Sie zuvor erstellt haben, Komponenten hinzu und konfigurieren sie mit Ihren Automatisierungen, sodass Benutzer Ihre App zum Anzeigen und Löschen von Dateien verwenden können.

## Fügen Sie Seitenkomponenten hinzu und konfigurieren Sie sie
<a name="automations-s3-components"></a>

Nachdem Sie nun die Automatisierungen erstellt haben, die die Geschäftslogik und Funktionalität Ihrer App definieren, werden Sie Komponenten erstellen und beide miteinander verbinden.

### Fügen Sie der Seite Komponenten hinzu **FileList**
<a name="automations-s3-components-filelist-page"></a>

Die **FileList**Seite, die Sie zuvor erstellt haben, wird verwendet, um eine Liste der Dateien im konfigurierten Amazon S3 S3-Bucket und weitere Details zu jeder Datei anzuzeigen, die aus der Liste ausgewählt wurde. Gehen Sie dazu wie folgt vor:

1. Erstellen Sie eine Tabellenkomponente, um die Liste der Dateien anzuzeigen. Sie konfigurieren die Zeilen der Tabelle so, dass sie mit der Ausgabe der **GetFiles-Automatisierung** gefüllt werden, die Sie zuvor erstellt haben.

1. Erstellen Sie eine PDF-Viewer-Komponente, um ein einzelnes PDF anzuzeigen. Sie konfigurieren die Komponente so, dass sie eine aus der Tabelle ausgewählte Datei anzeigt, und verwenden dabei die **ViewFile-Automatisierung**, die Sie zuvor erstellt haben, um die Datei aus Ihrem Bucket abzurufen.

**Um Komponenten zur Seite hinzuzufügen **FileList****

1. Wählen Sie oben auf der Leinwand den Tab **Seiten**.

1. Wählen Sie im **Seitenbedienfeld auf** der linken **FileList**Seite die Seite aus.

1. Suchen Sie auf der rechten **Komponentenseite** nach der **Tabellenkomponente** und ziehen Sie sie in die Mitte der Arbeitsfläche.

1. Wählen Sie die Tabellenkomponente aus, die Sie der Seite gerade hinzugefügt haben.

1. **Wählen Sie im rechten **Eigenschaftenmenü** die Dropdownliste **Quelle** und dann Automatisierung aus.**

1. **Wählen Sie das **Drop-down-Menü Automatisierung** und wählen Sie die GetFiles-Automatisierung aus.** Die Tabelle verwendet die Ausgabe der **GetFiles-Automatisierung** als Inhalt.

1. Fügen Sie eine Spalte hinzu, die mit dem Namen der Datei gefüllt werden soll.

   1. Wählen Sie auf der rechten Seite im **Eigenschaftenmenü** neben **Spalten** die Option **\$1 Hinzufügen**.

   1. Wählen Sie das Pfeilsymbol rechts neben der **Spalte Spalte1**, die gerade hinzugefügt wurde.

   1. Benennen Sie die **Spalte für Spaltenbezeichnung** in um. **Filename**

   1. Geben Sie für **Wert** **\$1\$1currentRow.Key\$1\$1** ein.

   1. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptfenster „**Eigenschaften**“ zurückzukehren.

1. Fügen Sie eine Tabellenaktion hinzu, um die Datei nacheinander zu löschen.

   1. Wählen Sie auf der rechten Seite im **Eigenschaftenmenü** neben **Aktionen** die Option **\$1 Hinzufügen** aus.

   1. Benennen Sie **Button** unter **Aktionen** in um**Delete**.

   1. Wählen Sie das Pfeilsymbol rechts neben der Aktion **Löschen**, die gerade umbenannt wurde.

   1. Wählen **Sie unter Beim Klicken** die Option **\$1 Aktion hinzufügen** und dann **Automatisierung aufrufen** aus.

   1. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.

   1. Für **Aktionsname** geben Sie **DeleteRecord** ein.

   1. Wählen Sie unter **Automatisierung aufrufen** die Option aus**deleteFile**.

   1. Geben **\$1\$1currentRow.Key\$1\$1** Sie in das Textfeld für den Parameter ein.

   1. Geben Sie für **Wert** **\$1\$1currentRow.Key\$1\$1** ein.

1. Wählen Sie im rechten Bereich „**Komponenten**“, um das Komponentenmenü aufzurufen. Es gibt zwei Möglichkeiten, Dateien anzuzeigen:
   + Ein **Bildbetrachter** zum Anzeigen von Dateien mit der `.jpg` Erweiterung `.png``.jpeg`, oder.
   + Eine **PDF-Viewer-Komponente** zum Anzeigen von PDF-Dateien.

   In diesem Tutorial werden Sie die **PDF-Viewer-Komponente** hinzufügen und konfigurieren.

1. Fügen Sie die **PDF-Viewer-Komponente** hinzu.

   1. Suchen Sie auf der rechten **Komponentenseite** nach der **PDF-Viewer-Komponente** und ziehen Sie sie auf die Arbeitsfläche unter der Tabellenkomponente.

   1. Wählen Sie die **PDF-Viewer-Komponente** aus, die gerade hinzugefügt wurde.

   1. **Wählen Sie im rechten **Eigenschaftenmenü** die Dropdownliste **Quelle** und dann Automatisierung aus.**

   1. **Wählen Sie das **Drop-down-Menü Automatisierung** und dann die ViewFile-Automatisierung aus.** Die Tabelle verwendet die Ausgabe der **ViewFile-Automatisierung** als Inhalt.

   1. Geben **\$1\$1ui.table1.selectedRow["Filename"]\$1\$1** Sie in das Parametertextfeld ein.

   1. Im rechten Bereich befindet sich auch ein Feld für **den Dateinamen**. Der Wert dieses Felds wird als Header für die PDF-Viewer-Komponente verwendet. Geben Sie denselben Text wie im vorherigen Schritt ein:**\$1\$1ui.table1.selectedRow["Filename"]\$1\$1**.

### Fügen Sie der **UploadFile**Seite Komponenten hinzu
<a name="automations-s3-components-uploadfile-page"></a>

Die **UploadFile**Seite wird eine Dateiauswahl enthalten, mit der Sie eine Datei auswählen und in den konfigurierten Amazon S3 S3-Bucket hochladen können. Sie fügen der Seite die **S3-Upload-Komponente** hinzu, mit der Benutzer eine Datei auswählen und hochladen können.

1. Wählen Sie im **Seitenbereich auf** der linken **UploadFile**Seite die Seite aus.

1. Suchen Sie auf der rechten **Komponentenseite** nach der **S3-Upload-Komponente** und ziehen Sie sie in die Mitte der Arbeitsfläche.

1. Wählen Sie die S3-Upload-Komponente aus, die Sie der Seite gerade hinzugefügt haben.

1. Konfigurieren Sie im rechten **Eigenschaftenmenü** die Komponente:

   1. Wählen Sie in der Dropdownliste **Connector** den Amazon S3 S3-Connector aus, der in den Voraussetzungen erstellt wurde.

   1. Geben Sie für **Bucket** den Namen Ihres Amazon S3 S3-Buckets ein.

   1. Geben Sie als **Dateiname** ein**\$1\$1ui.s3Upload1.files[0]?.nameWithExtension\$1\$1**.

   1. Geben Sie unter **Max. Dateigröße** den Wert **5** in das Textfeld ein und stellen Sie sicher, dass dieser Wert in der Dropdownliste ausgewählt **MB** ist.

   1. Fügen Sie im Abschnitt **Trigger** Aktionen hinzu, die nach erfolgreichen oder erfolglosen Uploads ausgeführt werden, indem Sie die folgenden Schritte ausführen:

      Um eine Aktion hinzuzufügen, die nach erfolgreichen Uploads ausgeführt wird:

      1. Wählen Sie **unter Bei Erfolg** die Option **\$1 Aktion hinzufügen** und anschließend **Navigieren** aus.

      1. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.

      1. Wählen Sie als **Navigationstyp** die Option **Seite** aus.

      1. Wählen **Sie für Navigieren zu** die Option**FileList**.

      1. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptfenster „**Eigenschaften**“ zurückzukehren.

      Um eine Aktion hinzuzufügen, die nach erfolglosen Uploads ausgeführt wird:

      1. Wählen Sie **unter Bei einem Fehler** die Option **\$1 Aktion hinzufügen** und anschließend **Navigieren** aus.

      1. Wählen Sie die Aktion aus, die hinzugefügt wurde, um sie zu konfigurieren.

      1. Wählen Sie als **Navigationstyp** die Option **Seite** aus.

      1. Wählen **Sie für Navigieren zu** die Option**FailUpload**.

      1. Wählen Sie das Pfeilsymbol oben im Bedienfeld, um zum Hauptfenster „**Eigenschaften**“ zurückzukehren.

### Fügen Sie der **FailUpload**Seite Komponenten hinzu
<a name="automations-s3-components-failupload-page"></a>

Die **FailUpload**Seite ist eine einfache Seite mit einem Textfeld, das Benutzer darüber informiert, dass ihr Upload fehlgeschlagen ist.

1. Wählen Sie im **Seitenmenü auf** der linken **FailUpload**Seite die Seite aus.

1. Suchen Sie auf der rechten **Komponentenseite** nach der **Textkomponente** und ziehen Sie sie in die Mitte der Leinwand.

1. Wählen Sie die Textkomponente aus, die Sie der Seite gerade hinzugefügt haben.

1. Geben Sie im rechten **Eigenschaftenmenü** im Feld **Wert den** Text ein**Failed to upload, try again**.

## Aktualisieren Sie Ihre App-Sicherheitseinstellungen
<a name="automations-s3-components-app-security-settings"></a>

Jede Anwendung in App Studio verfügt über Inhaltssicherheitseinstellungen, mit denen Sie externe Medien oder Ressourcen einschränken oder festlegen können, in welche Domänen in Amazon S3 Sie Objekte hochladen können. Die Standardeinstellung ist das Blockieren aller Domains. Um Objekte aus Ihrer Anwendung nach Amazon S3 hochzuladen, müssen Sie die Einstellung aktualisieren, um die Domains zuzulassen, in die Sie Objekte hochladen möchten.

**Um Domains für das Hochladen von Objekten auf Amazon S3 zuzulassen**

1. Wählen Sie den Tab **App-Einstellungen**.

1. Wählen Sie den Tab **Content Security Settings**.

1. Wählen **Sie für Quelle verbinden** die Option **Alle Verbindungen zulassen** aus.

1. Wählen Sie **Speichern**.

## Nächste Schritte: Zeigen Sie eine Vorschau der Anwendung an und veröffentlichen Sie sie zum Testen
<a name="automations-s3-preview-publish-test"></a>

Die Anwendung ist jetzt bereit zum Testen. Weitere Informationen zur Vorschau und Veröffentlichung von Anwendungen finden Sie unter[Anwendungen in der Vorschau anzeigen, veröffentlichen und teilen](applications-preview-publish-share.md).

# Lambda-Funktionen in einer App Studio-App aufrufen
<a name="tutorial-lambda"></a>

Dieses Tutorial zeigt Ihnen, wie Sie App Studio mit Lambda verbinden und Lambda-Funktionen aus Ihren Apps aufrufen.

## Voraussetzungen
<a name="tutorial-lambda-prerequisites"></a>

In diesem Handbuch wird davon ausgegangen, dass Sie die folgenden Voraussetzungen erfüllt haben:

1. Eine App Studio-App erstellt. Wenn Sie noch keine haben, können Sie eine leere App erstellen, die Sie im Tutorial verwenden können. Weitere Informationen finden Sie unter [Erstellen einer Anwendung](applications-create.md).

**Anmerkung**  
Sie benötigen zwar keine Lambda-Funktion, um diesem Tutorial zu folgen und zu lernen, wie man sie konfiguriert, aber es kann hilfreich sein, eine zu haben, um sicherzustellen, dass Sie die App korrekt konfiguriert haben. [Dieses Tutorial enthält keine Informationen zum Erstellen von Lambda-Funktionen. Weitere Informationen finden Sie im AWS Lambda Entwicklerhandbuch.](https://docs.aws.amazon.com/lambda/latest/dg/)

## Erstellen Sie einen Lambda-Konnektor
<a name="tutorial-lambda-create-connector"></a>

Um Lambda-Funktionen in Ihrer App Studio-App verwenden zu können, müssen Sie einen Connector verwenden, um App Studio mit Lambda zu verbinden, um Zugriff auf Ihre Funktionen zu gewähren. Sie müssen Administrator sein, um Connectors in App Studio erstellen zu können. Weitere Informationen zum Erstellen von Lambda-Konnektoren, einschließlich der Schritte zum Erstellen eines solchen, finden Sie unter[Verbinden mit AWS Lambda](connectors-lambda.md).

## Erstellen und konfigurieren Sie eine Automatisierung
<a name="tutorial-lambda-automation"></a>

Automatisierungen werden verwendet, um die Logik Ihrer Anwendung zu definieren und bestehen aus Aktionen. Um eine Lambda-Funktion in Ihrer App aufzurufen, fügen Sie zunächst eine Aktion „*Lambda aufrufen“ zu einer Automatisierung* hinzu und konfigurieren sie. Gehen Sie wie folgt vor, um eine Automatisierung zu erstellen und ihr die Aktion „*Lambda aufrufen*“ hinzuzufügen.

1. Wählen Sie bei der Bearbeitung Ihrer App den Tab **Automatisierungen**.

1. Wählen Sie **\$1 Automatisierung hinzufügen**.

1. Wählen Sie im rechten **Aktionsmenü** die Option **Lambda aufrufen**, um den Schritt zu Ihrer Automatisierung hinzuzufügen.

1. Wählen Sie den neuen Lambda-Schritt auf der Arbeitsfläche aus, um seine Eigenschaften anzuzeigen und zu konfigurieren.

1. Konfigurieren Sie den Schritt im rechten **Eigenschaftenmenü**, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie unter **Connector** den Connector aus, der erstellt wurde, um App Studio mit Ihren Lambda-Funktionen zu verbinden.

   1. Geben Sie im Feld **Funktionsname** den Namen Ihrer Lambda-Funktion ein.

   1. Geben Sie im Feld **Funktionsereignis** das Ereignis ein, das an die Lambda-Funktion übergeben werden soll. In der folgenden Liste sind einige gängige Anwendungsfälle aufgeführt:
      + Übergeben des Werts eines Automatisierungsparameters, z. B. eines Dateinamens oder einer anderen Zeichenfolge: `varName: params.paramName`
      + Übergabe des Ergebnisses einer vorherigen Aktion: `varName: results.actionName1.data[0].fieldName`
      + Wenn Sie innerhalb einer *Loop-Aktion* eine Aktion „*Lambda aufrufen*“ hinzufügen, können Sie Felder von jedem iterierten Element senden, die Parametern ähneln: `varName: currentItem.fieldName`

   1. Das **Ausgabefeld Mocked** kann verwendet werden, um eine Scheinausgabe bereitzustellen, um die App während der Vorschau zu testen, wenn die Konnektoren nicht aktiv sind.

## Konfigurieren Sie ein UI-Element, um die Automatisierung auszuführen
<a name="tutorial-lambda-create-pages"></a>

Da Sie nun über eine Automatisierung verfügen, die mit einer Aktion zum Aufrufen Ihrer Lambda-Funktion konfiguriert ist, können Sie ein UI-Element konfigurieren, um die Automatisierung auszuführen. In diesem Tutorial erstellen Sie eine Schaltfläche, die die Automatisierung ausführt, wenn Sie darauf klicken. 

**Tipp**  
Mit der Aktion Automatisierung *aufrufen* können Sie auch Automatisierungen von anderen Automatisierungen aus ausführen.

**Um Ihre Automatisierung über eine Schaltfläche auszuführen**

1. Wählen Sie bei der Bearbeitung Ihrer App den Tab **Seiten**.

1. Wählen Sie im Menü auf der rechten Seite die **Button-Komponente** aus, um der Seite eine Schaltfläche hinzuzufügen.

1. Wählen Sie die neue Schaltfläche, um sie zu konfigurieren.

1. Wählen Sie im rechten **Eigenschaftenmenü** unter **Trigger** die Option **\$1 Hinzufügen** und dann Automatisierung **aufrufen** aus.

1. Wählen Sie den neuen Auslöser für den Automatisierungsaufruf aus, um ihn zu konfigurieren.

1. Wählen Sie unter **Automatisierung aufrufen** die Automatisierung aus, die Ihre Lambda-Funktion aufruft, und konfigurieren Sie alle Parameter, die Sie an die Automatisierung senden möchten.

Jetzt veranlasst jeder Benutzer, der diese Schaltfläche in Ihrer App auswählt, die konfigurierte Automatisierung auszuführen.

## Nächste Schritte: Zeigen Sie eine Vorschau der Anwendung an und veröffentlichen Sie sie zum Testen
<a name="tutorial-lambda-preview-publish-test"></a>

Ihre Anwendung ist jetzt bereit zum Testen. Bei der Vorschau Ihrer App in der Entwicklungsumgebung sind Konnektoren nicht aktiv, sodass Sie die Automatisierung nicht während der Vorschau testen können, da sie einen Connector verwendet, um eine Verbindung herzustellen. AWS Lambda Um die Funktionalität Ihrer App zu testen, die von Konnektoren abhängt, müssen Sie die App in der Testumgebung veröffentlichen. Weitere Informationen zur Vorschau und Veröffentlichung von Anwendungen finden Sie unter[Anwendungen in der Vorschau anzeigen, veröffentlichen und teilen](applications-preview-publish-share.md).

# Erstellen Sie Ihre App Studio-App mit generativer KI
<a name="generative-ai"></a>

AWS App Studio bietet integrierte generative KI-Funktionen, um die Entwicklung zu beschleunigen und allgemeine Aufgaben zu rationalisieren. Sie können generative KI nutzen, um Apps, Datenmodelle und Beispieldaten zu generieren und zu bearbeiten und sogar kontextuelle Hilfe bei der Erstellung von Apps zu erhalten.

## Generieren Sie Ihre App
<a name="generative-ai-generate-app"></a>

Für einen schnelleren Start können Sie ganze Anwendungen mithilfe von KI-gestützten Eingabeaufforderungen in natürlicher Sprache generieren. Mit dieser Funktion können Sie Ihre gewünschte App-Funktionalität beschreiben, und KI erstellt automatisch die Datenmodelle, Benutzeroberflächen, Workflows und Konnektoren. Weitere Informationen zur Generierung einer App mit KI finden Sie unter[Erstellen einer Anwendung](applications-create.md).

## Ihre App erstellen oder bearbeiten
<a name="generative-ai-build-app"></a>

Während der Bearbeitung Ihrer Anwendung können Sie den Chat verwenden, um die Änderungen zu beschreiben, die Sie vornehmen möchten, und Ihre App wird automatisch aktualisiert. Sie können aus den vorhandenen Beispielaufforderungen wählen oder Ihre eigene Eingabeaufforderung eingeben. Der Chat kann verwendet werden, um unterstützte Komponenten hinzuzufügen, zu bearbeiten und zu entfernen sowie Automatisierungen und Aktionen zu erstellen und zu konfigurieren. Gehen Sie wie folgt vor, um Ihre Anwendung mithilfe von KI zu bearbeiten oder zu erstellen.

**Um Ihre App mit KI zu bearbeiten**

1. Bearbeiten Sie bei Bedarf Ihre App, um zum Anwendungsstudio zu navigieren.

1. (Optional) Wählen Sie die Seite oder Komponente aus, die Sie mit KI bearbeiten möchten.

1. Wählen Sie in der unteren linken Ecke die Option **Mit KI erstellen** aus, um den Chat zu öffnen.

1. Geben Sie die Änderungen ein, die Sie vornehmen möchten, oder wählen Sie aus den Beispielaufforderungen aus.

1. Überprüfen Sie die vorzunehmenden Änderungen. Wenn Sie möchten, dass die Änderungen vorgenommen werden, wählen Sie **Bestätigen**. Geben Sie andernfalls eine weitere Aufforderung ein.

1. Überprüfen Sie die Zusammenfassung der Änderungen.

## Generieren Sie Ihre Datenmodelle
<a name="generative-ai-data-model"></a>

Sie können automatisch eine Entität mit Feldern, Datentypen und Datenaktionen auf der Grundlage des angegebenen Entitätsnamens generieren. Weitere Informationen zum Erstellen von Entitäten, einschließlich zum Erstellen von Entitäten mithilfe von GenAi, finden Sie unter[Eine Entität in einer App Studio-App erstellen](data-entities-create.md).

Sie können eine bestehende Entität auch auf folgende Weise aktualisieren:
+ Fügen Sie einer Entität weitere Felder hinzu. Weitere Informationen finden Sie unter [Entitätsfelder hinzufügen, bearbeiten oder löschen](data-entities-edit-fields.md).
+ Fügen Sie Datenaktionen zu einer Entität hinzu. Weitere Informationen finden Sie unter [Datenaktionen erstellen](data-entities-edit-data-actions.md#data-entities-data-action-add).

## Generieren von Beispieldaten
<a name="generative-ai-generate-sample-data"></a>

Sie können Beispieldaten für Ihre Entitäten auf der Grundlage der Felder der Entität generieren. Dies ist nützlich, um Ihre Anwendung zu testen, bevor Sie externe Datenquellen verbinden, oder um Ihre Anwendung in der Entwicklungsumgebung zu testen, die nicht mit externen Datenquellen kommuniziert. Weitere Informationen finden Sie unter [Beispieldaten hinzufügen oder löschen](data-entities-edit-sample-data.md).

Sobald Sie Ihre App in Testing oder Production veröffentlicht haben, werden Ihre Live-Datenquellen und Konnektoren in diesen Umgebungen verwendet.

## Aktionen für AWS Dienste konfigurieren
<a name="generative-ai-aws-actions-configuration"></a>

Bei der Integration mit AWS Diensten wie Amazon Simple Email Service können Sie KI verwenden, um eine Beispielkonfiguration mit vorausgefüllten Feldern basierend auf dem ausgewählten Service zu generieren. Um es auszuprobieren, erweitern Sie im **Eigenschaftenmenü** einer Automatisierungsaktion „**AWS aufrufen**“ das Feld **Konfiguration**, indem Sie den doppelseitigen Pfeil auswählen. Wählen Sie dann **Beispielkonfiguration generieren** aus.

## Spöttische Antworten
<a name="generative-ai-mock-responses"></a>

Sie können gefälschte Antworten für AWS Serviceaktionen generieren. Dies ist hilfreich, wenn Sie Ihre Anwendung in der Entwicklungsumgebung testen möchten, die nicht mit externen Datenquellen kommuniziert.

## KI beim Bauen um Hilfe bitten
<a name="generative-ai-ask-ai"></a>

Im Anwendungsstudio findest du unter den unterstützten Ressourcen oder Eigenschaften **die Schaltfläche „KI um Hilfe bitten**“. Verwenden Sie diese Option, um kontextbezogene Vorschläge, Dokumentation und Anleitungen zur aktuellen Ansicht oder ausgewählten Komponente zu erhalten. Stellen Sie allgemeine Fragen zu App Studio, zu bewährten Methoden für die App-Entwicklung oder zu Ihrem speziellen Anwendungsfall, um maßgeschneiderte Informationen und Empfehlungen zu erhalten.

# Anwendungen erstellen, bearbeiten und löschen
<a name="applications-create-edit-delete"></a>

**Contents**
+ [Erstellen einer Anwendung](applications-create.md)
+ [Anwendungen importieren](applications-import.md)
  + [Von App Studio bereitgestellte importierbare Apps](applications-import.md#app-catalog)
+ [Anwendungen duplizieren](applications-duplicate.md)
+ [Eine Anwendung bearbeiten oder erstellen](applications-edit.md)
+ [Eine zuvor veröffentlichte App-Version bearbeiten](applications-edit-previously-published-version.md)
+ [Eine Anwendung umbenennen](applications-rename.md)
+ [Löschen einer Anwendung](applications-delete.md)

# Erstellen einer Anwendung
<a name="applications-create"></a>

Gehen Sie wie folgt vor, um eine Anwendung in App Studio zu erstellen.

**So erstellen Sie eine Anwendung**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus, um zu einer Liste Ihrer Anwendungen zu navigieren.

1. Wählen Sie **\$1 App erstellen**.

1. Geben Sie Ihrer Anwendung im Dialogfeld „**App erstellen**“ einen Namen und wählen Sie eine der folgenden Methoden zur App-Erstellung aus:
   + **App mit KI generieren**: Wählen Sie diese Option, um Ihre App in natürlicher Sprache zu beschreiben, und lassen Sie KI die App und ihre Ressourcen für Sie generieren.
   + **Von vorne beginnen**: Wählen Sie diese Option, um mit der Entwicklung von einer leeren App aus zu beginnen.

1. Wählen Sie **Weiter** aus.

1. Wenn du „**App mit KI generieren**“ ausgewählt hast:

   1. Fügen **Sie im Dialogfeld Mit vorhandenen Daten verbinden** alle vorhandenen Datenquellen zu Ihrer App hinzu, indem Sie den **Connector** auswählen, der App Studio Zugriff auf die Datenquellen bietet, wählen Sie dann die **Tabellen** und dann **Weiter** aus. Wenn Sie hier Datenquellen hinzufügen, kann KI eine optimierte App für Sie erstellen. Sie können diesen Schritt überspringen und später Datenquellen hinzufügen, indem Sie **Überspringen** wählen.

   1. Nach einer kurzen Verzögerung (einige Minuten) werden Sie zur Seite **Generieren Sie Ihre App mithilfe von KI** weitergeleitet, auf der Sie die App beschreiben können, die Sie erstellen möchten.

   1. Sie können im Chat mit der Beschreibung Ihrer App beginnen oder eine bereitgestellte Beispielaufforderung auswählen und anpassen.

   1. Nachdem deine Aufforderung analysiert wurde, überprüfe die Anforderungen und den Überblick über die App. Verwenden Sie den Chat, um Änderungen anzufordern, oder wählen Sie Neu **beginnen, um mit** einer leeren Eingabeaufforderung zu beginnen.

   1. Wenn Sie bereit sind, wählen Sie **App generieren**.

   1. Sobald die App generiert ist, können Sie eine Vorschau auf einem anderen Tab anzeigen, indem Sie „**App vorschauen**“ wählen. Wenn Sie bereit sind, mit der Bearbeitung zu beginnen, können Sie **App bearbeiten** auswählen. Stöbern Sie durch die Seiten, Automatisierungen und Daten Ihrer Anwendung, um sich damit vertraut zu machen. Überprüfen Sie alle Fehler oder Warnungen im unteren Debug-Bereich. Weitere Informationen zum Generieren einer App mithilfe von KI finden Sie unter[Tutorial: Generieren Sie eine App mit KI](getting-started-tutorial-ai.md). Allgemeine Informationen zur Funktionsweise der Erstellung in App Studio finden Sie unter[So funktioniert AWS App Studio](how-it-works.md).

1. Wenn Sie „**Von vorne beginnen**“ ausgewählt haben:

   1. Fügen **Sie im Dialogfeld Mit vorhandenen Daten verbinden** alle vorhandenen Datenquellen zu Ihrer App hinzu, indem Sie den **Connector** auswählen, der App Studio Zugriff auf die Datenquellen bietet, wählen Sie dann die **Tabellen** und dann **Weiter** aus. Sie können diesen Schritt überspringen und später Datenquellen hinzufügen, indem Sie **Überspringen** wählen.

   1. Sobald Ihre App erstellt ist, wählen Sie **App bearbeiten**, um mit der Bearbeitung Ihrer App zu beginnen. Weitere Informationen zum Erstellen aus einer leeren App finden Sie unter[Tutorial: Beginne mit dem Erstellen von einer leeren App](getting-started-tutorial-empty.md). Allgemeine Informationen darüber, wie das Erstellen in App Studio funktioniert, finden Sie unter[So funktioniert AWS App Studio](how-it-works.md).

# Anwendungen importieren
<a name="applications-import"></a>

Sie können eine Kopie einer exportierten Anwendung in Ihre App Studio-Instanz importieren. Sie können Apps importieren, die aus anderen App Studio-Instanzen exportiert wurden, oder Apps aus einem von App Studio bereitgestellten Katalog. Das Importieren einer App aus dem App Studio-App-Katalog kann Ihnen den Einstieg in eine App mit ähnlichen Funktionen erleichtern oder Ihnen helfen, mehr über die Erstellung von Apps in App Studio zu erfahren, indem Sie die importierte App erkunden.

Wenn Sie eine App in Ihre Instanz importieren, wird eine Kopie der ursprünglichen App in Ihrer Instanz erstellt. Nachdem die neue App erstellt wurde, werden Sie zur Entwicklungsumgebung der App weitergeleitet, wo Sie eine Vorschau der App anzeigen und die Funktionen der App durchsuchen können.

**Warnung**  
Wenn Sie eine App importieren, importieren Sie die gesamte Logik aus der Anwendung, was zu unerwünschtem oder unerwartetem Verhalten führen kann. Beispielsweise könnte es destruktive Abfragen geben, die Daten aus Datenbanken löschen, die Sie mit der Anwendung verbinden. Wir empfehlen, die Anwendung und ihre Konfiguration gründlich zu überprüfen und sie auf Geräten zu testen, die nicht für die Produktion bestimmt sind, bevor Sie Produktionsdaten mit der Anwendung verbinden.

**Um eine Anwendung zu importieren**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus, um zu einer Liste Ihrer Anwendungen zu gelangen.

1. Wählen Sie den Dropdown-Pfeil neben **\$1 App erstellen** aus.

1. Wählen Sie **App importieren**.

1. Geben **Sie im Dialogfeld App importieren** unter **Importcode** den Importcode der Anwendung ein, die Sie importieren möchten. Eine Liste der von App Studio bereitgestellten Apps, die importiert werden können, einschließlich App-Beschreibungen und Importcodes, finden Sie unter[Von App Studio bereitgestellte importierbare Apps](#app-catalog).

1. Wählen Sie **Import**, um die App zu importieren, und wechseln Sie zur Entwicklungsumgebung der importierten App, um sie anzusehen oder zu bearbeiten. Informationen zum Erstellen von Apps in App Studio finden Sie unter [So funktioniert AWS App Studio](how-it-works.md)

## Von App Studio bereitgestellte importierbare Apps
<a name="app-catalog"></a>

App Studio bietet Apps, die in Ihre Instanz importiert werden können, damit Sie mehr über die Erstellung von Apps erfahren. Um zu sehen, wie bestimmte App-Funktionen in App Studio implementiert sind, können Sie eine Vorschau der Anwendungen anzeigen und dann ihre Konfiguration in der Entwicklungsumgebung durchsuchen.

Die folgende Tabelle enthält die Liste der Anwendungen, ihre Importcodes und eine kurze Beschreibung der Apps. Jede App enthält eine `README` Seite mit Informationen über die App, die Sie nach dem Import anzeigen können.


| Name der App | Description | Code importieren | 
| --- | --- | --- | 
|  **Swag-Umfrage anfordern**  |  Eine interne Swag-Request-Anwendung, mit der Mitarbeiter Markenartikel von Unternehmen bestellen können. Mitarbeiter können Artikel auswählen und Größen angeben und ihre Anfrage über ein einfaches Formular einreichen. Diese Anwendung verarbeitet alle Daten über den integrierten Speicher, sodass keine externen Verbindungen erforderlich sind.  |  Umfrage zu Werbeaktionen anfordern/EC4F5FAF-E2F8-42EE-AB8D-6723D8CA21B2  | 
|  **Sprintverfolgung**  |  Eine Sprint-Management-Anwendung, mit der Teams die Softwareentwicklung organisieren und verfolgen können. Benutzer können Sprints erstellen, Aufgaben hinzufügen, Aufgaben zuweisen und den Fortschritt mithilfe spezieller Sprint-, Track- und Aufgabenansichten überwachen. Diese Anwendung verarbeitet alle Daten über den integrierten Speicher, sodass keine externen Verbindungen erforderlich sind.  |  Sprinttracking/8f31e160-771f-48d7-87b0-374e285e2fbc  | 
|  **Amazon Review Sentiment Tracker**  |  Diese Anwendung ist ein Tool zur Analyse von Kundenfeedback, das Stimmungswerte aus Produktbewertungen generiert, um Unternehmen dabei zu helfen, die Kundenzufriedenheit zu verstehen. Die Anwendung enthält Hilfsprogramme zur Generierung von Beispieldaten für schnelle Tests und benötigt einen Amazon Bedrock-Konnektor für KI-gestützte Erkenntnisse, während alle anderen Daten im integrierten Speichersystem beibehalten werden.  |  Amazon Bewertung Sentiment Tracker/60F0DAE4-F8E2-4C20-9583-FA456F5EBFAB  | 
|  **Rechnungs- und Quittungsverarbeitung**  |  Diese Anwendung zur Belegverarbeitung spart Zeit und reduziert Fehler, indem sie die manuelle Dateneingabe automatisiert und die Workflows zur Genehmigung von Dokumenten rationalisiert. Die Lösung erfordert Amazon Textract-, Amazon S3- und Amazon SES SES-Konnektoren. Es verwendet Amazon Textract, um Daten aus in Amazon S3 gespeicherten Belegen zu analysieren und zu extrahieren. Anschließend werden die extrahierten Informationen mithilfe von Amazon SES verarbeitet und per E-Mail an Genehmiger gesendet.  |  Rechnungs- und Belegbearbeitung/98BDE3AE-E454-4B18-A1E6-6F23E8B2A4F1  | 
|  **Inspektion und Inventarprüfung**  |  Eine Anwendung zur Verwaltung von Lagerinspektionen und zur Geräteverfolgung. Benutzer können pass/fail Gerätebewertungen nach Raumstandort durchführen, den Lagerbestand überwachen und den Inspektionsverlauf einsehen. Die Anwendung bietet ein zentrales System zur Verfolgung sowohl der Anlageninspektionen als auch des Gerätestatus. Diese Anwendung verarbeitet alle Daten über den integrierten Speicher, sodass keine externen Verbindungen erforderlich sind.  |  Inspektion und Inventarprüfung/CF570A06-1C5E-4DD7-9EA8-5C04723D687F  | 
|  **Tracker zur Produktakzeptanz**  |  Eine umfassende Anwendung zur Verwaltung der Produktentwicklung, die Kundenfeedback, Funktionsanfragen und Notizen zu Kundengesprächen zentralisiert. Teams können Kundeninteraktionen verfolgen, Anforderungen organisieren und KI-gestützte Berichte für die vierteljährliche Roadmap-Planung erstellen. Die Anwendung umfasst Hilfsprogramme für Beispieldaten und nutzt Amazon Bedrock für KI-Einblicke und Amazon Aurora PostgreSQL für das Datenmanagement.  |  Product Adoption Tracker/9B3A4437-BB50-467F-AE9E-D108776B7CA1  | 
|  **Schnelles Einbetten**  |  Eine Demo-Anwendung, mit der Benutzer Analysen anzeigen können, während sie mit den zugrunde liegenden Daten arbeiten. Die App enthält zwei Methoden zum Einbetten von Amazon Quick-Dashboards in App Studio: einen API-basierten Ansatz für registrierte und anonyme Benutzer (Quick Connector erforderlich) und eine iFrame-Integration für öffentliche Dashboards.  |  Quicksight Embedding/0CDC15FC-CA8B-41B7-869E-ED13C9072BC8  | 
|  **Spüle in der Küche**  |  Eine Referenzanwendung mit Tipps und bewährten Methoden für die Entwicklung von App Studio für Fortgeschrittene. Enthält praktische Beispiele für Statusverwaltung, Umgang mit CSV-Daten, Browser-API-Integration und Benutzeroberflächenmuster, die Entwickler untersuchen und in ihren eigenen Anwendungen implementieren können. Keines der Beispiele erfordert externe Verbindungen.  |  App Studio Spülbecken/1CFE6B2F-544C-4611-B82C-80EADC76A0C8  | 

# Anwendungen duplizieren
<a name="applications-duplicate"></a>

Anwendungsinhaber und Miteigentümer können ihre Apps duplizieren, um eine exakte Kopie der App zu erstellen. Das Duplizieren von Apps ist hilfreich, wenn Sie den aktuellen Status zu Testzwecken beibehalten oder die duplizierte App als Ausgangspunkt für die Erstellung einer neuen App verwenden möchten.

**Um eine Anwendung zu duplizieren**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus. Sie werden zu einer Seite weitergeleitet, auf der eine Liste der Anwendungen angezeigt wird, auf die Sie Zugriff haben.

1. Wählen Sie das Drop-down-Menü in der Spalte **Aktionen** der Anwendung aus, die Sie duplizieren möchten.

1. Wählen Sie **Duplicate (Duplikat)** aus. Wenn die Option **Duplizieren** nicht verfügbar ist, sind Sie wahrscheinlich kein Eigentümer oder Miteigentümer der Anwendung.

1. Geben Sie optional einen Namen der duplizierten App an. Der Standardname lautet *Current\$1App\$1Name COPY*.

1. Wählen Sie **Duplicate (Duplikat)** aus.

# Eine Anwendung bearbeiten oder erstellen
<a name="applications-edit"></a>

Gehen Sie wie folgt vor, um eine Anwendung in App Studio zu bearbeiten.

**Um eine Anwendung zu bearbeiten (zu erstellen)**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus. Sie werden zu einer Seite weitergeleitet, auf der eine Liste der Anwendungen angezeigt wird, auf die Sie Zugriff haben.

1. Wählen Sie in der Spalte **Aktionen** der Anwendung, die Sie bearbeiten möchten, die Option **Bearbeiten** aus. Dadurch gelangen Sie zur Entwicklungsumgebung, in der Sie Komponenten, Automatisierungen und Daten verwenden können, um das Aussehen und die Funktion Ihrer Anwendung zu konfigurieren. Informationen zum Erstellen von Anwendungen finden Sie unter[Erste Schritte mit AWS App Studio](getting-started.md).

# Eine zuvor veröffentlichte App-Version bearbeiten
<a name="applications-edit-previously-published-version"></a>

Gehen Sie wie folgt vor, um eine zuvor veröffentlichte Version Ihrer App Studio-Anwendung zu bearbeiten. Nachdem Sie sich entschieden haben, die zuvor veröffentlichte Version zu bearbeiten, können Sie die App in der Entwicklungsumgebung bearbeiten oder sie in Testing und dann in Production veröffentlichen.

**Warnung**  
Die zuvor veröffentlichte Version ersetzt die in Bearbeitung befindliche Version der App in der Entwicklungsumgebung. Alle unveröffentlichten Änderungen an Ihrer App gehen verloren.

Das Bearbeiten einer zuvor veröffentlichten Version ist nützlich, falls Sie versehentlich unerwünschte Änderungen oder Änderungen veröffentlichen, die die Anwendung für Ihre Benutzer beeinträchtigen, und Sie die vorherige App-Version weiter erstellen oder bearbeiten möchten.

**Anmerkung**  
Wenn Sie Probleme mit einer veröffentlichten App feststellen und sofort eine zuvor funktionierende Version veröffentlichen müssen, oder wenn Sie eine frühere Version veröffentlichen möchten, aber die neuesten Updates der App in der Entwicklungsumgebung beibehalten möchten, sollten Sie stattdessen ein Rollback der App durchführen. Weitere Informationen finden Sie unter [Rollback zu einer zuvor veröffentlichten Version](application-rollback-version.md).

**Um eine zuvor veröffentlichte App-Version zu bearbeiten**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie den Dropdown-Pfeil neben der Schaltfläche „**Veröffentlichen**“ und dann „**Veröffentlichungszentrum**“.

1. Wählen Sie **Versionsverlauf**, um eine Liste der zuvor veröffentlichten Versionen der Anwendung anzuzeigen.

1. Suchen Sie die Version, die Sie bearbeiten möchten, und wählen Sie **Bearbeiten**.

1. Überprüfen Sie die Informationen und wählen Sie „**Wiederherstellen**“.

1. Die Version, die Sie zur Bearbeitung ausgewählt haben, ist jetzt die aktuelle Version in der Entwicklungsumgebung. Sie können Änderungen daran vornehmen oder sie unverändert in der Testumgebung veröffentlichen, indem Sie **Veröffentlichen** wählen. Nach der Veröffentlichung in Testing können Sie bei Bedarf erneut in der Produktionsumgebung veröffentlichen.

# Eine Anwendung umbenennen
<a name="applications-rename"></a>

Gehen Sie wie folgt vor, um eine Anwendung in App Studio umzubenennen. Sie können eine Anwendung in der Liste der Anwendungen oder in der Entwicklungsumgebung beim Erstellen der App umbenennen.

**Um eine Anwendung umzubenennen**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus. Sie werden zu einer Seite weitergeleitet, auf der eine Liste der Anwendungen angezeigt wird, auf die Sie Zugriff haben.

1. Sie können eine Anwendung aus dieser Liste oder während der Bearbeitung in der Entwicklungsumgebung umbenennen.
   + Um aus dieser Liste umzubenennen:

     1. Wählen Sie das Drop-down-Menü in der Spalte **Aktionen** der Anwendung, die Sie umbenennen möchten, und wählen Sie dann **Umbenennen** aus.

     1. Geben Sie Ihrer Anwendung einen neuen Namen und wählen Sie „**Umbenennen**“.
   + Um in der Entwicklungsumgebung umzubenennen:

     1. Wählen Sie in der Spalte **Aktionen** der Anwendung, die Sie bearbeiten möchten, die Option **Bearbeiten** aus.

     1. Wählen Sie in der Entwicklungsumgebung den Namen der Anwendung aus und aktualisieren Sie ihn. Drücken Sie dann die Eingabetaste oder gehen Sie vom Textfeld weg, um Ihre Änderungen zu speichern.

# Löschen einer Anwendung
<a name="applications-delete"></a>

Gehen Sie wie folgt vor, um eine Anwendung in App Studio zu löschen.

**So löschen Sie eine -Anwendung**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus. Sie werden zu einer Seite weitergeleitet, auf der eine Liste der Anwendungen angezeigt wird, auf die Sie Zugriff haben.

1. Wählen Sie das Drop-down-Menü in der Spalte **Aktionen** der Anwendung aus, die Sie löschen möchten.

1. Wählen Sie **Löschen** aus.

1. Lesen **Sie sich im Dialogfeld „Anwendung löschen**“ die Informationen zum Löschen von Anwendungen sorgfältig durch. Wenn Sie die Anwendung löschen möchten, wählen Sie **Löschen**.

# Anwendungen in der Vorschau anzeigen, veröffentlichen und teilen
<a name="applications-preview-publish-share"></a>

**Topics**
+ [Eine Vorschau von Anwendungen anzeigen](applications-preview.md)
+ [Anwendungen veröffentlichen](applications-publish.md)
+ [Gemeinsame Nutzung veröffentlichter Anwendungen](application-share.md)
+ [Rollback zu einer zuvor veröffentlichten Version](application-rollback-version.md)
+ [Anwendungen exportieren](applications-export.md)

# Eine Vorschau von Anwendungen anzeigen
<a name="applications-preview"></a>

Sie können eine Vorschau von Anwendungen in App Studio anzeigen, um zu sehen, wie sie Benutzern angezeigt werden. Außerdem können Sie ihre Funktionalität testen, indem Sie sie verwenden und die Protokolle in einem Debug-Bereich überprüfen.

Die Anwendungsvorschauumgebung unterstützt nicht die Anzeige von Live-Daten oder die Verbindung mit externen Ressourcen über Konnektoren, wie z. B. Datenquellen. Um die Funktionalität in der Vorschauumgebung zu testen, können Sie simulierte Ausgaben in Automatisierungen und Beispieldaten in Entitäten verwenden. Um Ihre Anwendung mit Echtzeitdaten anzeigen zu können, müssen Sie Ihre App veröffentlichen. Weitere Informationen finden Sie unter [Anwendungen veröffentlichen](applications-publish.md).

In der Vorschau- oder Entwicklungsumgebung wird die in den anderen Umgebungen veröffentlichte Anwendung nicht aktualisiert. Wenn eine Anwendung nicht veröffentlicht wurde, können Benutzer erst darauf zugreifen, wenn sie veröffentlicht und gemeinsam genutzt wurde. Wenn eine Anwendung bereits veröffentlicht und gemeinsam genutzt wurde, greifen Benutzer weiterhin auf die veröffentlichte Version zu und nicht auf die Version, die in einer Vorschauumgebung verwendet wurde.

**Um eine Vorschau Ihrer Anwendung anzuzeigen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio der Anwendung, für die Sie eine Vorschau anzeigen möchten:

   1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus.

   1. Wählen Sie **Bearbeiten** für die Anwendung aus.

1. Wählen Sie **Vorschau**, um die Vorschauumgebung für die Anwendung zu öffnen.

1. (Optional) Erweitern Sie das Debug-Bedienfeld, indem Sie die entsprechende Kopfzeile am unteren Bildschirmrand auswählen. Sie können das Fenster nach Nachrichtentyp filtern, indem Sie den Nachrichtentyp im Abschnitt **Protokolle filtern** auswählen. Sie können die Protokolle des Panels löschen, indem Sie **Konsole löschen** wählen.

1. In der Vorschauumgebung können Sie Ihre Anwendung testen, indem Sie auf ihren Seiten navigieren, ihre Komponenten verwenden und ihre Schaltflächen auswählen, um Automatisierungen zu starten, die Daten übertragen. Da die Vorschauumgebung keine Live-Daten oder Verbindungen zu externen Quellen unterstützt, können Sie sich Beispiele für die übertragenen Daten im Debug-Bereich ansehen.

# Anwendungen veröffentlichen
<a name="applications-publish"></a>

Wenn Sie mit der Erstellung und Konfiguration Ihrer Anwendung fertig sind, besteht der nächste Schritt darin, sie zu veröffentlichen, um Datenübertragungen zu testen oder sie für Endbenutzer freizugeben. Um das Veröffentlichen von Anwendungen in App Studio zu verstehen, ist es wichtig, die verfügbaren Umgebungen zu verstehen. App Studio bietet drei separate Umgebungen, die in der folgenden Liste beschrieben werden:

1. **Entwicklung**: Hier erstellen Sie Ihre Anwendung und zeigen eine Vorschau an. Sie müssen nicht in der Entwicklungsumgebung veröffentlichen, da die neueste Version Ihrer Anwendung dort automatisch gehostet wird. In dieser Umgebung sind keine Live-Daten oder Dienste oder Ressourcen von Drittanbietern verfügbar.

1. **Testen**: Hier können Sie umfassende Tests Ihrer Anwendung durchführen. In der Testumgebung können Sie eine Verbindung zu anderen Diensten herstellen, Daten an diese senden und Daten von anderen Diensten empfangen.

1. **Produktion**: Die Live-Betriebsumgebung für die Nutzung durch Endbenutzer.

Ihre gesamte App-Erstellung findet in der **Entwicklungsumgebung** statt. Veröffentlichen Sie anschließend in der **Testumgebung**, um die Datenübertragung zwischen anderen Diensten zu testen, sowie Benutzerakzeptanztests (UAT), indem Sie Endbenutzern eine Zugriffs-URL zur Verfügung stellen. Veröffentlichen Sie Ihre App anschließend in der **Produktionsumgebung**, um abschließende Tests durchzuführen, bevor Sie sie mit Benutzern teilen. Weitere Informationen zu den Anwendungsumgebungen finden Sie unter[Anwendungsumgebungen](#application-environments).

Wenn Sie eine Anwendung veröffentlichen, ist sie für Benutzer erst verfügbar, wenn sie gemeinsam genutzt wird. Auf diese Weise haben Sie die Möglichkeit, die Anwendung in der Test- und Produktionsumgebung zu verwenden und zu testen, bevor Benutzer darauf zugreifen können. Wenn Sie eine Anwendung in der Produktionsumgebung veröffentlichen, die zuvor veröffentlicht und gemeinsam genutzt wurde, wird die Version aktualisiert, die Benutzern zur Verfügung steht.

## Anwendungen veröffentlichen
<a name="application-publish-procedure"></a>

Gehen Sie wie folgt vor, um eine App Studio-Anwendung in der Test- oder Produktionsumgebung zu veröffentlichen.

**Um eine Anwendung in der Test- oder Produktionsumgebung zu veröffentlichen**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus. Sie werden zu einer Seite weitergeleitet, auf der eine Liste der Anwendungen angezeigt wird, auf die Sie Zugriff haben.

1. Wählen Sie **Bearbeiten** für die Anwendung, die Sie veröffentlichen möchten.

1. Wählen Sie in der oberen rechten Ecke **Veröffentlichen** aus.

1. Gehen Sie im Dialogfeld „**Updates veröffentlichen**“ wie folgt vor:

   1. Lesen Sie die Informationen zur Veröffentlichung einer Anwendung.

   1. (Optional) Fügen Sie unter **Versionsbeschreibung** eine Beschreibung dieser Version der Anwendung hinzu.

   1. Wählen Sie das Feld aus, um die Informationen über die Umgebung zu bestätigen.

   1. Wählen Sie **Starten**. Es kann bis zu 15 Minuten dauern, bis die Anwendung in der Live-Umgebung aktualisiert ist.

1. Informationen zum Anzeigen von Anwendungen in der Test- oder Produktionsumgebung finden Sie unter[Veröffentlichte Anwendungen anzeigen](#application-viewing-published).
**Anmerkung**  
Die Verwendung der Anwendung in der Test- oder Produktionsumgebung führt zu Live-Datenübertragungen, z. B. zur Erstellung von Datensätzen in Tabellen mit Datenquellen, die über Konnektoren verbunden wurden.

Veröffentlichte Anwendungen, die noch nie gemeinsam genutzt wurden, stehen Benutzern oder anderen Entwicklern nicht zur Verfügung. Um eine Anwendung Benutzern zur Verfügung zu stellen, müssen Sie sie nach der Veröffentlichung teilen. Weitere Informationen finden Sie unter [Gemeinsame Nutzung veröffentlichter Anwendungen](application-share.md).

## Veröffentlichte Anwendungen anzeigen
<a name="application-viewing-published"></a>

Sie können sich die in den Test- und Produktionsumgebungen veröffentlichten Anwendungen ansehen, um die Anwendung zu testen, bevor Sie sie für Endbenutzer oder andere Entwickler freigeben.

**Um veröffentlichte Anwendungen in der Test- oder Produktionsumgebung anzuzeigen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio der Anwendung, für die Sie eine Vorschau anzeigen möchten:

   1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus.

   1. Wählen Sie **Bearbeiten** für die Anwendung aus.

1. Wählen Sie den Dropdown-Pfeil neben **Veröffentlichen** in der oberen rechten Ecke und wählen Sie **Publish** Center aus.

1. Im Publishing Center können Sie die Umgebungen anzeigen, in denen Ihre Anwendung veröffentlicht wurde. Wenn Ihre Anwendung in der Test- oder Produktionsumgebung veröffentlicht wurde, können Sie die App über den **URL-Link** für jede Umgebung anzeigen.
**Anmerkung**  
Wenn Sie die Anwendung in der Test- oder Produktionsumgebung verwenden, erfolgt eine Live-Datenübertragung, z. B. das Erstellen von Datensätzen in Tabellen mit Datenquellen, die mit Konnektoren verbunden wurden.

## Anwendungsumgebungen
<a name="application-environments"></a>

AWS App Studio bietet Funktionen für das Application Lifecycle Management (ALM) in drei separaten Umgebungen: Entwicklung, Testen und Produktion. Auf diese Weise können Sie Best Practices wie die Verwaltung separater Umgebungen, Versionskontrolle, gemeinsame Nutzung und Überwachung über den gesamten App-Lebenszyklus hinweg einfacher anwenden.

### Entwicklungsumgebung
<a name="applications-development-environment"></a>

Die **Entwicklungsumgebung** ist eine isolierte Sandbox, in der Sie mithilfe des Anwendungsstudios und Beispieldaten Apps erstellen können, ohne eine Verbindung zu Live-Datenquellen oder -diensten herstellen zu müssen. In der Entwicklungsumgebung können Sie eine Vorschau Ihrer App anzeigen, um sie anzusehen und zu testen, ohne die Produktionsdaten zu gefährden.

Ihre App stellt zwar keine Verbindung zu anderen Diensten in der Entwicklungsumgebung her, Sie können jedoch verschiedene Ressourcen in Ihrer App konfigurieren, um Live-Datenkonnektoren und Automatisierungen nachzuahmen.

Am unteren Rand des Anwendungsstudios in der Entwicklungsumgebung befindet sich ein zusammenklappbares Debug-Bedienfeld, das Fehler und Warnungen enthält, damit Sie die App während der Erstellung überprüfen und debuggen können. Weitere Informationen zur Problembehandlung und zum Debuggen von Apps finden Sie unter. [Problembehandlung und Debuggen von App Studio](troubleshooting-and-debugging.md)

### Testumgebung
<a name="applications-testing-environment"></a>

Sobald Ihre erste App-Entwicklung abgeschlossen ist, besteht der nächste Schritt darin, sie in der **Testumgebung** zu veröffentlichen. In der Testumgebung kann Ihre App eine Verbindung zu anderen Diensten herstellen, Daten an diese senden und Daten von anderen Diensten empfangen. Daher können Sie diese Umgebung verwenden, um umfassende Tests durchzuführen, einschließlich Benutzerakzeptanztests (UAT), indem Sie Endbenutzern eine Zugriffs-URL zur Verfügung stellen.

**Anmerkung**  
Ihre erste Veröffentlichung in der Testumgebung kann bis zu 15 Minuten dauern.

Die in der Testumgebung veröffentlichte Version Ihrer App wird nach 3 Stunden Inaktivität des Endbenutzers entfernt. Alle Versionen bleiben jedoch bestehen und können über den Tab **Versionsverlauf** wiederhergestellt werden.

Die wichtigsten Funktionen der Testumgebung sind wie folgt:
+ Integrationstests mit Live-Datenquellen und APIs
+ Benutzerakzeptanztests (UAT) werden durch kontrollierten Zugriff erleichtert
+ Umgebung zum Sammeln von Feedback und zur Behebung von Problemen
+ Fähigkeit, sowohl clientseitige als auch serverseitige Aktivitäten mithilfe von Browserkonsolen und Entwicklertools zu überprüfen und zu debuggen.

Weitere Informationen zur Problembehandlung und zum Debuggen von Apps finden Sie unter. [Problembehandlung und Debuggen von App Studio](troubleshooting-and-debugging.md)

### Produktionsumgebung
<a name="applications-production-environment"></a>

Nachdem Sie alle Probleme getestet und behoben haben, können Sie die Version Ihrer Anwendung von der Testumgebung in die Produktionsumgebung hochstufen, sodass Sie sie live nutzen können. Die Produktionsumgebung ist zwar die Live-Betriebsumgebung für die Nutzung durch Endbenutzer, Sie können die veröffentlichte Version jedoch testen, bevor Sie sie mit Benutzern teilen.

Ihre veröffentlichte Version in der Produktionsumgebung wird nach 14 Tagen Inaktivität durch den Endbenutzer entfernt. Alle Versionen bleiben jedoch bestehen und können über die Registerkarte **Versionsverlauf** wiederhergestellt werden.

Die Hauptmerkmale der Produktionsumgebung sind wie folgt:
+ Live-Betriebsumgebung für die Nutzung durch den Endbenutzer
+ Granulare, rollenbasierte Zugriffskontrolle
+ Funktionen für Versionskontrolle und Rollback
+ Möglichkeit, nur clientseitige Aktivitäten zu überprüfen und zu debuggen
+ Verwendet Live-Konnektoren, Daten, Automatisierungen und APIs

## Versionierung und Release-Management
<a name="applications-versioning-release-management"></a>

App Studio bietet Funktionen für Versionskontrolle und Release-Management über sein Versionssystem im **Publish** Center.

Die wichtigsten Funktionen zur Versionierung:
+ Beim Veröffentlichen in der Testumgebung werden neue Versionsnummern generiert (1.0, 2.0, 3.0...).
+ Die Versionsnummer ändert sich nicht, wenn Sie von der Test- zur Produktionsumgebung heraufstufen.
+ Sie können aus dem **Versionsverlauf zu jeder vorherigen Version** zurückkehren.
+ In der Testumgebung veröffentlichte Anwendungen werden nach 3 Stunden Inaktivität angehalten. **Versionen werden dauerhaft gespeichert und können aus dem Versionsverlauf wiederhergestellt werden.**
+ In der Produktionsumgebung veröffentlichte Anwendungen werden nach 14 Tagen Inaktivität entfernt. Versionen werden dauerhaft gespeichert und können aus dem **Versionsverlauf** wiederhergestellt werden.

Dieses Versionsmodell ermöglicht eine schnelle Iteration bei gleichzeitiger Wahrung der Rückverfolgbarkeit, der Rollback-Funktionen und der optimalen Leistung während des gesamten Entwicklungs- und Testzyklus der App.

## Wartung und Betrieb
<a name="applications-versioning-maintenance-operations"></a>

App Studio muss Ihre Anwendung möglicherweise automatisch erneut veröffentlichen, um bestimmte Wartungsaufgaben und betriebliche Aktivitäten zu erledigen und neue Softwarebibliotheken zu integrieren. Sie, der Builder, müssen nichts unternehmen, aber Endbenutzer müssen sich möglicherweise wieder bei der Anwendung anmelden. In bestimmten Situationen müssen Sie Ihre Anwendung möglicherweise erneut veröffentlichen, um neue Funktionen und Bibliotheken zu integrieren, die wir nicht automatisch hinzufügen können. Vor der erneuten Veröffentlichung müssen Sie alle Fehler beheben und die Warnungen überprüfen. 

# Gemeinsame Nutzung veröffentlichter Anwendungen
<a name="application-share"></a>

Wenn Sie eine Anwendung veröffentlichen, die noch nicht veröffentlicht wurde, ist sie für Benutzer erst verfügbar, wenn sie gemeinsam genutzt wird. Sobald eine veröffentlichte Anwendung gemeinsam genutzt wurde, steht sie den Benutzern zur Verfügung und muss nicht erneut freigegeben werden, wenn eine andere Version veröffentlicht wird.

**Anmerkung**  
In diesem Abschnitt geht es darum, veröffentlichte Anwendungen mit Endbenutzern oder Testern zu teilen. Informationen dazu, wie Sie andere Benutzer einladen, eine App zu erstellen, finden Sie unter[Eine App mit mehreren Benutzern erstellen](builder-collaboration.md).

**So teilen Sie eine veröffentlichte Anwendung**

1. Rufen **Sie das Dialogfeld „Teilen**“ entweder über die Anwendungsliste oder das Anwendungsstudio Ihrer App auf, indem Sie die folgenden Anweisungen befolgen:
   + So greifen Sie über die Anwendungsliste auf das Dialogfeld „**Teilen**“ zu: Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus. Wählen Sie das Dropdownmenü in der Spalte **Aktionen** der Anwendung aus, die Sie teilen möchten, und wählen Sie **Teilen** aus.
   + So greifen Sie vom Anwendungsstudio aus auf das Dialogfeld „**Teilen**“ zu: Wählen Sie im Anwendungsstudio Ihrer App in der oberen Kopfzeile die Option **Teilen** aus.

1. Wählen **Sie im Dialogfeld „Teilen**“ die Registerkarte für die Umgebung aus, die Sie teilen möchten. Wenn die Tabs „**Testen**“ oder „**Produktion**“ nicht angezeigt werden, wurde Ihre App möglicherweise nicht in der entsprechenden Umgebung veröffentlicht. Weitere Informationen zum Veröffentlichen finden Sie unter [Anwendungen veröffentlichen](applications-publish.md).

1. Wählen Sie auf der entsprechenden Registerkarte Gruppen aus dem Drop-down-Menü aus, um die Umgebung mit ihnen zu teilen.

1. (Optional) Weisen Sie der Gruppe eine Rolle auf App-Ebene zu, um die bedingte Seitensichtbarkeit zu testen oder zu konfigurieren. Weitere Informationen finden Sie unter [Konfiguration der rollenbasierten Sichtbarkeit von Seiten](app-level-roles.md).

1. Wählen Sie **Freigeben**.

1. (Optional) Kopieren Sie den Link und teilen Sie ihn mit Benutzern. Nur Benutzer, mit denen die Anwendung und die Umgebung gemeinsam genutzt wurden, können auf die Anwendung in der entsprechenden Umgebung zugreifen.

# Rollback zu einer zuvor veröffentlichten Version
<a name="application-rollback-version"></a>

Gehen Sie wie folgt vor, um die Produktionsumgebung Ihrer App Studio-App auf eine zuvor veröffentlichte Version zurückzusetzen. Die Endbenutzer Ihrer Anwendung werden davon betroffen sein und die Rollback-Version Ihrer App sehen, nachdem sie bereitgestellt wurde. Wenn Sie eine Anwendung rückgängig machen, wird auch der Komponentencode auf die Version von der vorherigen Veröffentlichung zurückgesetzt. Dies wirkt sich auf den gesamten Stapel der Anwendungsbereitstellung aus (Benutzercode, Status der Komponentenkonfiguration). Das bedeutet, dass alle Aktualisierungen, die App Studio am Komponentencode vorgenommen hat, wie z. B. Feld- oder andere Konfigurationsänderungen, zurückgesetzt werden, um sicherzustellen, dass die zurückgesetzte Anwendungsversion genauso funktioniert wie bei der ursprünglichen Veröffentlichung.

Die in Bearbeitung befindliche Version Ihrer Anwendung in der Entwicklungsumgebung ist nicht betroffen, wenn Sie die veröffentlichte Version zurücksetzen.

Ein Rollback der veröffentlichten Version einer Anwendung ist hilfreich, wenn Sie Probleme mit einer veröffentlichten App feststellen und sofort eine zuvor funktionierende Version veröffentlichen müssen, oder wenn Sie eine frühere Version veröffentlichen und die neuesten Updates der App in der Entwicklungsumgebung beibehalten möchten.

**Anmerkung**  
Wenn Sie die Entwicklungsumgebung einer App auf eine zuvor veröffentlichte Version zurücksetzen möchten, sollten Sie die Anwendung zurücksetzen. Weitere Informationen finden Sie unter [Eine zuvor veröffentlichte App-Version bearbeiten](applications-edit-previously-published-version.md).

**Um die Version der Produktionsumgebung auf eine zuvor veröffentlichte App-Version zurückzusetzen**

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten. Weitere Informationen finden Sie unter [Eine Anwendung bearbeiten oder erstellen](applications-edit.md).

1. Wählen Sie den Dropdown-Pfeil für die Version oben auf der Kachel der **Produktionsumgebung**, um die verfügbaren Versionen für ein Rollback anzuzeigen. Die Dropdownliste enthält Versionen, die in den letzten 30 Tagen veröffentlicht wurden. Wenn dieses Dropdown deaktiviert ist, kann das daran liegen, dass eine App-Veröffentlichung bereits im Gange ist und nur eine Veröffentlichung gleichzeitig erfolgen kann.

1. Wählen Sie die Version aus, zu der Sie zurückkehren möchten.

1. Geben Sie einen Grund für das Rollback ein und wählen Sie **Rollback**. Die Rollback-Veröffentlichung wird gestartet. Sobald der Vorgang abgeschlossen ist, wird die Produktionsumgebung Ihrer Anwendung auf die gewählte Version aktualisiert.
**Anmerkung**  
Sie können nach dem Rollback auch ein Rollforward zu einer zuvor veröffentlichten App-Version durchführen.

# Anwendungen exportieren
<a name="applications-export"></a>

Sie können einen Snapshot Ihrer Anwendung exportieren, um ihn mit anderen App Studio-Instanzen zu teilen. Wenn Sie eine App exportieren, wird ein Snapshot aus der Entwicklungsumgebung der App erstellt und ein Importcode generiert. Der Importcode kann dann verwendet werden, um die Anwendung in andere App Studio-Instanzen zu importieren, wo sie angezeigt und erstellt werden kann.

Exportierte Apps können in alle von App Studio AWS-Region unterstützten Instanzen importiert werden.

**Um eine Anwendung zu exportieren**

1. Wählen Sie im Navigationsbereich im Abschnitt **Build** die Option **Meine Anwendungen** aus, um zu einer Liste Ihrer Anwendungen zu gelangen.

1. Wählen Sie das Drop-down-Menü in der Spalte **Aktionen** der Anwendung aus, die Sie exportieren möchten.

1. Wählen Sie **Export** aus.

1. Das Verfahren zum Generieren und Teilen eines Importcodes hängt davon ab, ob bereits ein Importcode für die App erstellt wurde oder nicht.
   + Wenn kein Importcode erstellt wurde:

     1. Geben Sie **unter Importberechtigungen für Anwendungen** an, welche Instanzen die exportierte App importieren können. Sie können allen Instanzen Importberechtigungen erteilen oder bestimmte App Studio-Instanzen hinzufügen, indem Sie deren Instanz eingeben IDs. Trennen Sie mehrere Instanzen IDs durch ein Komma.

        Um Ihre Instanz-ID zu finden, navigieren Sie zu den Kontoeinstellungen Ihrer Instanz, indem Sie in der App Studio-Konsole **Kontoeinstellungen** auswählen.

     1. Wählen Sie **Importcode generieren aus**.

     1. Kopieren Sie den generierten Importcode und teilen Sie ihn.
   + Wenn bereits ein Importcode erstellt wurde:

     1. Um die aktuell exportierte App zu teilen, kopieren Sie den vorhandenen Importcode und teilen Sie ihn mit anderen. Um eine neue exportierte App mit den neuesten Änderungen an Ihrer App zu erstellen, wählen Sie **Neuen Code generieren**. Sie können die Importberechtigungen bei Bedarf auch aktualisieren.

# Seiten und Komponenten: Erstellen Sie die Benutzeroberfläche Ihrer App
<a name="pages-components-ux"></a>

**Topics**
+ [Seiten verwalten](pages.md)
+ [Verwaltung von Komponenten](adding-editing-deleting-components.md)
+ [Konfiguration der rollenbasierten Sichtbarkeit von Seiten](app-level-roles.md)
+ [Seiten in der App-Navigation ordnen und organisieren](pages-order.md)
+ [Ändern Sie die Farben in Ihrer App mit App-Themen](app-theme.md)
+ [Referenz zu den Komponenten](components-reference.md)

# Seiten verwalten
<a name="pages"></a>

Gehen Sie wie folgt vor, um Seiten aus Ihrer AWS App Studio-Anwendung zu erstellen, zu bearbeiten oder zu löschen.

**Seiten** sind Container für [Komponenten](concepts.md#concepts-component), die die Benutzeroberfläche einer Anwendung in App Studio bilden. Jede Seite stellt einen Bildschirm der Benutzeroberfläche (UI) Ihrer Anwendung dar, mit dem Ihre Benutzer interagieren werden. Seiten werden auf der Registerkarte **Seiten** des Anwendungsstudios erstellt und bearbeitet.

# Eine Seite erstellen
<a name="pages-create"></a>

Gehen Sie wie folgt vor, um eine Seite in einer Anwendung in App Studio zu erstellen. Informationen zum Duplizieren einer vorhandenen Seite finden Sie unter[Eine Seite duplizieren](pages-duplicate.md).

**Um eine Seite zu erstellen**

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. Wähle im **Seitenmenü** auf der linken Seite die Option **\$1 Hinzufügen**.

# Eine Seite duplizieren
<a name="pages-duplicate"></a>

Gehen Sie wie folgt vor, um eine Seite in einer Anwendung in App Studio zu duplizieren.

**Um eine Seite zu duplizieren**

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. **Wählen Sie im **Seitenmenü** auf der linken Seite das Ellipsenmenü neben dem Namen der Seite, die Sie duplizieren möchten, und wählen Sie Duplizieren aus.** Die duplizierte Seite wird direkt nach der Originalseite hinzugefügt.

# Seiteneigenschaften anzeigen und bearbeiten
<a name="pages-edit"></a>

Gehen Sie wie folgt vor, um eine Seite in einer Anwendung in App Studio zu bearbeiten. Sie können Eigenschaften wie den Namen der Seite, ihre Parameter und ihr Layout bearbeiten.

**Um Seiteneigenschaften anzuzeigen oder zu bearbeiten**

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. Wählen Sie im **Seitenmenü** auf der linken Seite das Ellipsenmenü neben dem Namen der Seite, die Sie bearbeiten möchten, und wählen Sie **Seiteneigenschaften** aus. **Dadurch wird das Eigenschaftenmenü auf der rechten Seite geöffnet.**

1. Um den Seitennamen zu bearbeiten:
**Anmerkung**  
****Gültige Zeichen für Seitennamen: **A-Z**, **a-z**, **0-9, \$1**, \$1****

   1. **Wählen Sie das Stiftsymbol neben dem Namen oben im Eigenschaften-Menü.**

   1. Geben Sie den neuen Namen für Ihre Seite ein und drücken Sie die Eingabetaste.

1. Um Seitenparameter zu erstellen, zu bearbeiten oder zu löschen:

   1. Um einen Seitenparameter zu erstellen, wählen **Sie \$1 Neu hinzufügen** im Abschnitt **Seitenparameter**.

   1. Um den **Schlüssel** - oder **Beschreibungswert** eines Seitenparameters zu bearbeiten, wählen Sie das Eingabefeld der Eigenschaft, die Sie ändern möchten, und geben Sie einen neuen Wert ein. Ihre Änderungen werden gespeichert, während Sie sie bearbeiten.

   1. Um einen Seitenparameter zu löschen, wählen Sie das Papierkorbsymbol des Seitenparameters, den Sie löschen möchten.

1. Um das Logo oder das Banner einer Seite hinzuzufügen, zu bearbeiten oder zu entfernen:

   1. Um ein Seitenlogo oder ein Banner hinzuzufügen, aktivieren Sie die entsprechende Option im Bereich **Stil**. Konfigurieren Sie die Bildquelle und geben Sie optional Alternativtext an.

   1. Um ein Seitenlogo oder ein Banner zu bearbeiten, aktualisieren Sie die Felder im Bereich **Stil**.

   1. Um ein Seitenlogo oder ein Banner zu entfernen, deaktivieren Sie die entsprechende Option im Bereich **Stil**.

1. Um das Layout einer Seite zu bearbeiten:

   1. Aktualisieren Sie die Felder im Abschnitt **Layout**.

# Eine Seite löschen
<a name="pages-delete"></a>

Gehen Sie wie folgt vor, um eine Seite aus einer Anwendung in App Studio zu löschen.

**Um eine Seite zu löschen**

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. **Wählen Sie im **Seitenmenü** auf der linken Seite das Ellipsenmenü neben dem Namen der Seite, die Sie löschen möchten, und wählen Sie Löschen aus.**

# Verwaltung von Komponenten
<a name="adding-editing-deleting-components"></a>

Gehen Sie wie folgt vor, um Komponenten auf oder von Seiten im App Studio Application Studio hinzuzufügen, zu bearbeiten und zu löschen, um die gewünschte Benutzeroberfläche für Ihre Anwendung zu erstellen.

# Komponenten zu einer Seite hinzufügen
<a name="adding-components"></a>

Gehen Sie wie folgt vor, um einer Seite in App Studio eine Komponente hinzuzufügen. Informationen zum Duplizieren einer vorhandenen Komponente finden Sie unter[Komponenten duplizieren](duplicating-components.md).

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. Das Komponentenfenster befindet sich im Menü auf der rechten Seite, das die verfügbaren Komponenten enthält.

1. Ziehen Sie die gewünschte Komponente per Drag & Drop aus dem Bedienfeld auf die Leinwand. Alternativ können Sie im Bedienfeld auf die Komponente doppelklicken, um sie automatisch in die Mitte der aktuellen Seite einzufügen.

1. Nachdem Sie eine Komponente hinzugefügt haben, können Sie im **Eigenschaftenfenster** auf der rechten Seite ihre Einstellungen anpassen, z. B. die Datenquelle, das Layout und das Verhalten. Ausführliche Informationen zur Konfiguration der einzelnen Komponententypen finden Sie unter[Referenz zu den Komponenten](components-reference.md).

# Komponenten duplizieren
<a name="duplicating-components"></a>

Gehen Sie wie folgt vor, um eine Komponente in einer App Studio-App zu duplizieren. Duplizierte Komponenten enthalten alle verknüpften Automatisierungen oder Entitäten aus der Originalkomponente.

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. Es gibt zwei Möglichkeiten, eine Komponente zu duplizieren:
   + Erweitern Sie im **Seitenmenü** auf der linken Seite die Seite, die die Komponente enthält, die Sie duplizieren möchten. **Wählen Sie das Ellipsenmenü neben dem Namen der Komponente, die Sie duplizieren möchten, und wählen Sie Duplizieren aus.**
   + Wählen Sie die Komponente aus, die Sie duplizieren möchten, und klicken Sie auf das Symbol „Duplizieren“.

   Die duplizierte Komponente wird direkt nach der Originalkomponente hinzugefügt.
**Tipp**  
Sie können eine Komponentenduplizierung zusammen mit vielen anderen Aktionen in der Entwicklungsumgebung rückgängig machen, indem Sie die Tastenkombinationen STRG\$1Z oder CMD\$1Z verwenden.

# Komponenteneigenschaften anzeigen und bearbeiten
<a name="editing-component-properties"></a>

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. Erweitern Sie im **Seitenmenü** auf der linken Seite die Seite, die die Komponente enthält, und wählen Sie die Komponente aus, die angezeigt oder bearbeitet werden soll. Alternativ können Sie die Seite und dann die Komponente auf der Arbeitsfläche auswählen.

1. Im **Eigenschaftenbereich** auf der rechten Seite werden die konfigurierbaren Einstellungen für die ausgewählte Komponente angezeigt.

1. Erkunden Sie die verschiedenen verfügbaren Eigenschaften und Optionen und aktualisieren Sie sie bei Bedarf, um das Aussehen und Verhalten der Komponente zu konfigurieren. Möglicherweise möchten Sie beispielsweise die Datenquelle ändern, das Layout konfigurieren oder zusätzliche Funktionen aktivieren.

   Ausführliche Informationen zur Konfiguration der einzelnen Komponententypen finden Sie unter[Referenz zu den Komponenten](components-reference.md).

# Komponenten löschen
<a name="deleting-components"></a>

1. Navigieren Sie bei Bedarf zur Entwicklungsumgebung Ihrer Anwendung, indem Sie sie bearbeiten.

1. Navigieren Sie zur Registerkarte **Seiten**.

1. Wählen Sie im **Seitenmenü** auf der linken Seite die Komponente aus, die gelöscht werden soll, um sie auszuwählen.

1. Wählen Sie im **Eigenschaftenmenü** auf der rechten Seite das Papierkorbsymbol aus.

1. Wählen Sie im Bestätigungs-Dialogfeld die Option **Delete** (Löschen).

# Konfiguration der rollenbasierten Sichtbarkeit von Seiten
<a name="app-level-roles"></a>

Sie können Rollen in einer App Studio-App erstellen und die Sichtbarkeit von Seiten auf der Grundlage dieser Rollen konfigurieren. Sie können beispielsweise Rollen auf der Grundlage von Benutzeranforderungen oder Zugriffsebenen wie Administrator, Manager oder Benutzer für Apps erstellen, die Funktionen wie Projektgenehmigungen oder die Bearbeitung von Ansprüchen bereitstellen, und bestimmte Seiten für bestimmte Rollen sichtbar machen. In diesem Beispiel haben Administratoren möglicherweise Vollzugriff, Manager haben möglicherweise Zugriff auf Berichts-Dashboards und Benutzer haben möglicherweise Zugriff auf Aufgabenseiten mit Eingabeformularen.

Gehen Sie wie folgt vor, um die rollenbasierte Sichtbarkeit von Seiten in Ihrer App Studio-App zu konfigurieren.

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung. Wählen Sie im Navigationsmenü auf der linken Seite **Meine Anwendungen** aus, suchen Sie nach Ihrer Bewerbung und wählen Sie **Bearbeiten**.

1. Erstellen Sie Rollen auf App-Ebene im Application Studio.

   1. Wählen Sie oben im Anwendungsstudio die Registerkarte **App-Einstellungen** aus.

   1. Wählen Sie **\$1 Rolle hinzufügen**

   1. Geben Sie im **Feld Rollenname** einen Namen zur Identifizierung Ihrer Rolle ein. Wir empfehlen, einen Namen zu verwenden, der die Zugriffsebene oder die Aufgaben der Gruppe beschreibt, da Sie den Namen verwenden, um die Sichtbarkeit der Seite einzurichten.

   1. Fügen Sie optional unter **Beschreibung** eine Beschreibung für die Rolle hinzu.

   1. Wiederholen Sie diese Schritte, um so viele Rollen wie nötig zu erstellen.

1. Konfigurieren Sie die Sichtbarkeit Ihrer Seiten

   1. Wählen Sie oben im Anwendungsstudio die Registerkarte **Seiten**.

   1. Wählen Sie im **Seitenmenü** auf der linken Seite die Seite aus, für die Sie die rollenbasierte Sichtbarkeit konfigurieren möchten.

   1. **Wählen Sie im Menü auf der rechten Seite die Registerkarte Eigenschaften aus.**

   1. Deaktivieren Sie **unter Sichtbarkeit** die Option Für **alle Endbenutzer öffnen**.

   1. Lassen Sie die Option **Rolle** ausgewählt, um aus einer Liste der Rollen auszuwählen, die Sie im vorherigen Schritt erstellt haben. Wählen Sie **Benutzerdefiniert**, um einen JavaScript Ausdruck für komplexere Sichtbarkeitskonfigurationen zu schreiben.

      1. Wenn **Rolle** ausgewählt ist, markieren Sie die Kästchen der App-Rollen, für die die Seite sichtbar sein soll.

      1. Wenn **Benutzerdefiniert** ausgewählt ist, geben Sie einen JavaScript Ausdruck ein, der als wahr oder falsch aufgelöst wird. Überprüfen Sie anhand des folgenden Beispiels, ob der aktuelle Benutzer die Rolle eines *Managers* innehat:`{{currentUser.roles.includes('manager')}}`.

1. Nachdem Ihre Sichtbarkeit konfiguriert ist, können Sie die Sichtbarkeit der Seite testen, indem Sie sich eine Vorschau Ihrer App ansehen.

   1. Wählen Sie **Vorschau**, um eine Vorschau Ihrer App zu öffnen.

   1. Wählen Sie oben rechts in der Vorschau das Menü **Vorschau als** und markieren Sie die Kästchen der Rollen, die Sie testen möchten. Die sichtbaren Seiten sollten die ausgewählten Rollen widerspiegeln.

1. Weisen Sie nun Gruppen App-Rollen für eine veröffentlichte App zu. Gruppen- und Rollenzuweisungen müssen für jede Umgebung separat konfiguriert werden. Weitere Informationen zu App-Umgebungen finden Sie unter[Anwendungsumgebungen](applications-publish.md#application-environments).
**Anmerkung**  
Ihre App muss entweder in der Test- oder Produktionsumgebung veröffentlicht werden, um App Studio-Gruppen den Rollen zuzuweisen, die Sie erstellt und konfiguriert haben. Veröffentlichen Sie bei Bedarf Ihre App, um den Rollen Gruppen zuzuweisen. Weitere Informationen zum Veröffentlichen finden Sie unter [Anwendungen veröffentlichen](applications-publish.md).

   1. Wählen Sie oben rechts im Anwendungsstudio die Option **Teilen** aus.

   1. Wählen Sie die Registerkarte für die Umgebung aus, für die Sie die Sichtbarkeit der Seite konfigurieren möchten.

   1. Wählen Sie das Eingabefeld **Suchgruppen** aus und wählen Sie die Gruppe aus, mit der Sie die App-Version teilen möchten. Sie können Text eingeben, um nach Gruppen zu suchen.

   1. Wählen Sie im Dropdownmenü die Rollen aus, die Sie der Gruppe zuweisen möchten. Sie können „**Keine Rolle**“ wählen, um die App-Version zu teilen und der Gruppe keine Rolle zuzuweisen. Nur Seiten, die für alle Benutzer sichtbar sind, sind für Gruppen ohne Rolle sichtbar.

   1. Wählen Sie **Freigeben**. Wiederholen Sie diese Schritte, um so viele Gruppen wie nötig hinzuzufügen.

# Seiten in der App-Navigation ordnen und organisieren
<a name="pages-order"></a>

Dieses Thema enthält Informationen zum Neuanordnen und Organisieren von Seiten in App Studio-Anwendungen. **Es gibt zwei Bereiche des Produkts, in denen App-Seiten angezeigt werden: im Seitenmenü auf der linken Seite, wenn Sie die App im Anwendungsstudio bearbeiten, und in der linken Navigationsleiste einer Vorschau der veröffentlichten App.**

## Seiten beim Bearbeiten einer App im **Seitenmenü auf** der linken Seite anordnen
<a name="pages-order-editing-app"></a>

**Bei der Bearbeitung einer App im Anwendungsstudio werden die Seiten im Seitenmenü auf der linken Seite nach Erstellungszeit sortiert.** Sie können die Seiten in diesem Menü nicht neu anordnen.

## Seiten in der Navigation einer Vorschau-App oder einer veröffentlichten App anordnen, ein- oder ausblenden
<a name="pages-order-editing-app"></a>

Sie können die folgenden Einstellungen der linken Navigation einer Vorschau-App oder einer veröffentlichten App bearbeiten:
+ Die Sichtbarkeit der gesamten Navigation
+ Die Sichtbarkeit bestimmter Seiten in der Navigation
+ Die Reihenfolge der Seiten in der Navigation

**Um die linke Navigation einer Vorschau-App oder einer veröffentlichten App zu bearbeiten**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung, um sie zu bearbeiten.

1. Wählen Sie im **Seitenmenü** auf der linken Seite die Option **Kopfzeile und Navigation** aus.

1. Sehen Sie sich im Menü **Kopfzeile und Navigation** auf der rechten Seite Folgendes an oder bearbeiten Sie es:

   1. Verwenden Sie den Schalter für die App-Navigation, um die Navigation in der **App** ein- oder auszublenden.

   1. Um Seiten aus der Navigation der App auszublenden, ziehen Sie die Seiten in den Bereich **Unverknüpfte Seiten**. ****

   1. Um Seiten in der Navigation der App neu anzuordnen, ziehen Sie sie im Bereich **Verlinkte Seiten** in die gewünschte Reihenfolge.

# Ändern Sie die Farben in Ihrer App mit App-Themen
<a name="app-theme"></a>

Gehen Sie wie folgt vor, um die Farben in Ihrer Anwendung zu aktualisieren, indem Sie ein App-Thema konfigurieren.

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer App, um sie zu bearbeiten.

1. Navigieren Sie im Anwendungsstudio zur Registerkarte **Seiten**.

1. Wählen Sie in der linken Navigationsleiste **App-Design aus, um die Einstellungen für das App-Thema** auf der rechten Seite zu öffnen.

1. Wählen Sie im **Basisdesign** den **hellen Modus oder den **dunklen** Modus**.

1. Um Ihrer Anwendung benutzerdefinierte Farben hinzuzufügen, aktivieren **Sie den Schalter Anpassen** und aktualisieren Sie die folgenden Einstellungen:

   1. Wählen Sie **unter Primärfarbe** die Farbe aus, die auf bestimmte Komponenten und die Navigation Ihrer App angewendet wird. Sie können eine Farbe mit dem Farbwähler, RGB-, HSL- oder HEX-Code auswählen.
**Anmerkung**  
App Studio stellt automatisch sicher, dass auf Ihre Farben zugegriffen werden kann. Wenn Sie beispielsweise im Lichtmodus eine Lichtfarbe auswählen, wird sie aktualisiert, sodass sie leichter zugänglich ist.

   1. Wählen Sie unter **Kopfzeilenfarbe** die Farbe aus, die auf den Header Ihrer App angewendet wird. Sie können eine Farbe mit dem Farbwähler, RGB-, HSL- oder HEX-Code auswählen.

   1. Wählen Sie **Standarddesigns** zur Anzeige und Auswahl aus vordefinierten Designs oder wählen Sie „**Zufällig**“, um eine zufällige Primär- und Kopfzeilenfarbe zu generieren.

1. Wählen Sie „**Änderungen speichern**“, um Ihr App-Design zu aktualisieren.

# Referenz zu den Komponenten
<a name="components-reference"></a>

Dieses Thema beschreibt die einzelnen Komponenten von App Studio, ihre Eigenschaften und enthält Konfigurationsbeispiele.

## Allgemeine Eigenschaften von Komponenten
<a name="common-properties"></a>

In diesem Abschnitt werden die allgemeinen Eigenschaften und Funktionen beschrieben, die von mehreren Komponenten im Application Studio gemeinsam genutzt werden. Die spezifischen Implementierungsdetails und Anwendungsfälle für jeden Eigenschaftstyp können je nach Komponente variieren, aber das allgemeine Konzept dieser Eigenschaften bleibt in App Studio einheitlich.

### Name
<a name="common-properties-component-name"></a>

Für jede Komponente wird ein Standardname generiert. Sie können ihn jedoch bearbeiten, um für jede Komponente einen eindeutigen Namen zu wählen. Sie verwenden diesen Namen, um auf die Komponente und ihre Daten aus anderen Komponenten oder Ausdrücken auf derselben Seite zu verweisen. Einschränkung: Der Komponentenname darf keine Leerzeichen enthalten. Er darf nur Buchstaben, Zahlen, Unterstriche und Dollarzeichen enthalten. Beispiele: `userNameInput`, `ordersTable`, `metricCard1`.

### Primärwert, Sekundärwert und Wert
<a name="common-properties-component-values"></a>

Viele Komponenten im Application Studio bieten Felder zur Angabe von Werten oder Ausdrücken, die den Inhalt oder die Daten bestimmen, die in der Komponente angezeigt werden. Diese Felder werden je nach Komponententyp und Verwendungszweck häufig als `Primary value` oder einfach `Value` bezeichnet. `Secondary value`

Das `Primary value` Feld wird in der Regel verwendet, um den Hauptwert, den Datenpunkt oder den Inhalt zu definieren, der in der Komponente gut sichtbar angezeigt werden soll.

Das `Secondary value` Feld wird, sofern verfügbar, verwendet, um neben dem Primärwert einen zusätzlichen oder unterstützenden Wert oder eine Information anzuzeigen.

In dem `Value` Feld können Sie den Wert oder Ausdruck angeben, der in der Komponente angezeigt werden soll.

Diese Felder unterstützen sowohl statische Texteingaben als auch dynamische Ausdrücke. Mithilfe von Ausdrücken können Sie auf Daten aus anderen Komponenten, Datenquellen oder Variablen in Ihrer Anwendung verweisen und so eine dynamische und datengesteuerte Inhaltsanzeige ermöglichen.

#### Syntax für Ausdrücke
<a name="common-properties-component-values-expression-syntax"></a>

Die Syntax für die Eingabe von Ausdrücken in diese Felder folgt einem konsistenten Muster:

```
{{expression}}
```

Wo *expression* ist ein gültiger Ausdruck, der den gewünschten Wert oder die gewünschten Daten ergibt, die Sie anzeigen möchten?

##### Beispiel: Statischer Text
<a name="common-properties-component-values-static-text-examples"></a>
+ Primärwert: Sie können eine statische Zahl oder einen statischen Wert direkt eingeben, z. B. `"123"` oder`"$1,999.99"`.
+ Sekundärer Wert: Sie können eine statische Textbeschriftung eingeben, z. B. `"Goal"` oder`"Projected Revenue"`.
+ Wert: Sie können eine statische Zeichenfolge eingeben, z. B. `"since last month"` oder`"Total Quantity"`.

##### Beispiele: Ausdrücke
<a name="common-properties-component-values-expression-examples"></a>
+ `Hello, {{currentUser.firstName}}`: Zeigt eine Begrüßung mit dem Vornamen des aktuell angemeldeten Benutzers an.
+ `{{currentUser.role === 'Admin' ? 'Admin Dashboard' : 'User Dashboard'}}`: Zeigt abhängig von der Rolle des Benutzers bedingt einen anderen Dashboard-Titel an.
+ `{{ui.componentName.data?.[0]?.fieldName}}`: Ruft den Wert des `fieldName` Felds aus dem ersten Element in den Daten der Komponente mit der ID ab. `componentName`
+ `{{ui.componentName.value * 100}}`: Führt eine Berechnung für den Wert der Komponente mit der ID `componentName` durch.
+ `{{ui.componentName.value + ' items'}}`: Verkettet den Wert der Komponente mit der ID `componentName` und der Zeichenfolge. `' items'`
+ `{{ui.ordersTable.data?.[0]?.orderNumber}}`: Ruft die Bestellnummer aus der ersten Datenzeile in der Komponente ab. `ordersTable`
+ `{{ui.salesMetrics.data?.[0]?.totalRevenue * 1.15}}`: Berechnet den prognostizierten Umsatz, indem der Gesamtumsatz aus der ersten Datenzeile in der `salesMetrics` Komponente um 15% erhöht wird.
+ `{{ui.customerProfile.data?.[0]?.firstName + ' ' + ui.customerProfile.data?.lastName}}`: Verkettet den Vor- und Nachnamen aus den Daten in der Komponente. `customerProfile`
+ `{{new Date(ui.orderDetails.data?.orderDate).toLocaleDateString()}}`: Formatiert das Bestelldatum der `orderDetails` Komponente in eine besser lesbare Datumszeichenfolge.
+ `{{ui.productList.data?.length}}`: Zeigt die Gesamtzahl der Produkte in den mit der `productList` Komponente verbundenen Daten an.
+ `{{ui.discountPercentage.value * ui.orderTotal.value}}`: Berechnet den Rabattbetrag auf der Grundlage des Rabattprozentsatzes und der Gesamtsumme der Bestellung.
+ `{{ui.cartItemCount.value + ' items in cart'}}`: Zeigt die Anzahl der Artikel im Warenkorb zusammen mit dem Etikett `items in cart` an.

Mithilfe dieser Ausdrucksfelder können Sie dynamische und datengesteuerte Inhalte in Ihrer Anwendung erstellen, sodass Sie Informationen anzeigen können, die auf den Benutzerkontext oder den Status Ihrer Anwendung zugeschnitten sind. Dies ermöglicht personalisiertere und interaktivere Benutzererlebnisse.

### Label (Bezeichnung)
<a name="common-properties-label"></a>

Mit der **Label-Eigenschaft** können Sie eine Überschrift oder einen Titel für die Komponente angeben. Diese Bezeichnung wird normalerweise neben oder über der Komponente angezeigt, sodass Benutzer ihren Zweck besser verstehen können.

Sie können sowohl statischen Text als auch Ausdrücke verwenden, um die Bezeichnung zu definieren.

#### Beispiel: Statischer Text
<a name="label-static-example"></a>

Wenn Sie den Text „Vorname“ in das Feld Bezeichnung eingeben, zeigt die Komponente „Vorname“ als Bezeichnung an.

#### Beispiel: Ausdrücke
<a name="label-expression-examples"></a>

##### Beispiel: Einzelhandelsgeschäft
<a name="label-expression-examples-retail-store-label"></a>

Im folgenden Beispiel wird das Etikett für jeden Benutzer personalisiert, sodass sich die Benutzeroberfläche besser auf die Person zugeschnitten anfühlt:

```
{{currentUser.firstName}} {{currentUser.lastName}}'s Account
```

##### Beispiel: SaaS-Projektmanagement
<a name="label-expression-examples-project-management-label"></a>

Im folgenden Beispiel werden Daten aus dem ausgewählten Projekt abgerufen, um kontextspezifische Bezeichnungen bereitzustellen, sodass Benutzer sich in der Anwendung orientieren können:

```
Project {{ui.projectsTable.selectedRow.id}} - {{ui.projectsTable.selectedRow.name}}
```

##### Beispiel: Gesundheitsklinik
<a name="label-expression-examples-healthcare-clinic-label"></a>

Das folgende Beispiel bezieht sich auf das aktuelle Benutzerprofil und die Informationen des Arztes, um den Patienten ein persönlicheres Erlebnis zu bieten. 

```
Dr. {{ui.doctorProfileTable.data.firstName}}
       {{ui.doctorProfileTable.data.lastName}}
```

### Placeholder
<a name="common-properties-placeholder"></a>

Mit der Placeholder-Eigenschaft können Sie einen Hinweis- oder Hinweistext angeben, der in der Komponente angezeigt wird, wenn diese leer ist. Dies kann Benutzern helfen, das erwartete Eingabeformat zu verstehen, oder zusätzlichen Kontext bereitstellen.

Sie können sowohl statischen Text als auch Ausdrücke verwenden, um den Platzhalter zu definieren.

#### Beispiel: Statischer Text
<a name="placeholder-static-example"></a>

Wenn Sie den Text `Enter your name` in das **Platzhalterfeld** eingeben, wird die Komponente `Enter your name` als Platzhaltertext angezeigt.

#### Beispiel: Ausdrücke
<a name="placeholder-expression-examples"></a>

##### Beispiel: Finanzdienstleistungen
<a name="placeholder-expression-examples-financial-services-placeholder"></a>

 `Enter the amount you'd like to deposit into your {{ui.accountsTable.selectedRow.balance}} account`In diesen Beispielen werden Daten aus dem ausgewählten Konto abgerufen, um entsprechende Eingabeaufforderungen anzuzeigen, sodass die Benutzeroberfläche für Bankkunden intuitiv ist. 

##### Beispiel: E-Commerce
<a name="placeholder-expression-examples-ecommerce-placeholder"></a>

 `Enter the coupon code for {{ui.cartTable.data.currency}} total`Der Platzhalter wird hier dynamisch auf der Grundlage des Warenkorbinhalts des Benutzers aktualisiert und sorgt so für ein reibungsloses Checkout-Erlebnis. 

##### Beispiel: Gesundheitsklinik
<a name="placeholder-expression-examples-healthcare-clinic-placeholder"></a>

 `Enter your {{ui.patientProfile.data.age}}-year-old patient's symptoms`Durch die Verwendung eines Ausdrucks, der auf das Alter des Patienten verweist, kann die Anwendung einen personalisierteren und hilfreicheren Platzhalter erstellen. 

### Quelle
<a name="common-properties-source"></a>

Mit der Eigenschaft **Source** können Sie die Datenquelle für eine Komponente auswählen. Bei der Auswahl können Sie aus den folgenden Datenquellentypen wählen: `entity``expression`, oder`automation`.

#### Entität
<a name="common-properties-source-entity"></a>

Wenn Sie **Entität** als Datenquelle auswählen, können Sie die Komponente mit einer vorhandenen Datenentität oder einem Modell in Ihrer Anwendung verbinden. Dies ist nützlich, wenn Sie über eine klar definierte Datenstruktur oder ein klar definiertes Schema verfügen, das Sie in Ihrer gesamten Anwendung nutzen möchten.

Wann sollte die Entitätsdatenquelle verwendet werden:
+ Wenn Sie über ein Datenmodell oder eine Entität verfügen, die die Informationen enthält, die Sie in der Komponente anzeigen möchten (z. B. eine Entität „Produkte“ mit Feldern wie „Name“, „Beschreibung“, „Preis“).
+ Wenn Sie Daten dynamisch aus einer Datenbank, API oder einer anderen externen Datenquelle abrufen und in der Komponente präsentieren müssen.
+ Wenn Sie die im Datenmodell Ihrer Anwendung definierten Beziehungen und Verknüpfungen nutzen möchten.

##### Eine Abfrage für eine Entität auswählen
<a name="common-properties-source-selecting-entity-query"></a>

Manchmal möchten Sie vielleicht eine Komponente mit einer bestimmten Abfrage verbinden, die Daten von einer Entität und nicht von der gesamten Entität abruft. In der Entitätsdatenquelle haben Sie die Möglichkeit, aus vorhandenen Abfragen auszuwählen oder eine neue zu erstellen.

Wenn Sie eine Abfrage auswählen, können Sie:
+ Filtern Sie die in der Komponente angezeigten Daten nach bestimmten Kriterien.
+ Übergeben Sie Parameter an die Abfrage, um die Daten dynamisch zu filtern oder zu sortieren.
+ Nutzen Sie komplexe Verknüpfungen, Aggregationen oder andere in der Abfrage definierte Datenmanipulationstechniken.

Zum Beispiel, wenn Sie in Ihrer Anwendung eine `Customers` Entität mit Feldern wie `Name``Email`, und `PhoneNumber` haben. Sie können eine Tabellenkomponente mit dieser Entität verbinden und eine vordefinierte `ActiveCustomers` Datenaktion auswählen, die die Kunden anhand ihres Status filtert. Auf diese Weise können Sie nur die aktiven Kunden in der Tabelle anzeigen und nicht die gesamte Kundendatenbank.

##### Hinzufügen von Parametern zu einer Entitätsdatenquelle
<a name="common-properties-source-adding-entity-parameters"></a>

Wenn Sie eine Entität als Datenquelle verwenden, können Sie der Komponente auch Parameter hinzufügen. Diese Parameter können verwendet werden, um die in der Komponente angezeigten Daten zu filtern, zu sortieren oder zu transformieren.

Wenn Sie beispielsweise eine `Products` Entität mit Feldern wie`Name`, `Description``Price`, und haben`Category`. Sie können einer Tabellenkomponente`category`, die die Produktliste anzeigt, einen Parameter mit dem Namen hinzufügen. Wenn Benutzer eine Kategorie aus einer Dropdownliste auswählen, wird die Tabelle automatisch aktualisiert, sodass nur die Produkte angezeigt werden, die zu der ausgewählten Kategorie gehören. Dabei wird der `{{params.category}}` Ausdruck in der Datenaktion verwendet.

#### Expression
<a name="common-properties-source-expression"></a>

Wählen Sie **Ausdruck** als Datenquelle aus, um benutzerdefinierte Ausdrücke oder Berechnungen einzugeben, um die Daten für die Komponente dynamisch zu generieren. Dies ist nützlich, wenn Sie Transformationen durchführen, Daten aus mehreren Quellen kombinieren oder Daten auf der Grundlage einer bestimmten Geschäftslogik generieren müssen.

Wann sollte die **Expression-Datenquelle** verwendet werden:
+ Wenn Sie Daten berechnen oder ableiten müssen, die nicht direkt in Ihrem Datenmodell verfügbar sind (z. B. Berechnung des Gesamtbestellwerts auf der Grundlage von Menge und Preis).
+ Wenn Sie Daten aus mehreren Entitäten oder Datenquellen kombinieren möchten, um eine zusammengesetzte Ansicht zu erstellen (z. B. die Bestellhistorie eines Kunden zusammen mit seinen Kontaktinformationen anzuzeigen).
+ Wenn Sie Daten auf der Grundlage bestimmter Regeln oder Bedingungen generieren müssen (z. B. Anzeige einer Liste mit „empfohlenen Produkten“, die auf dem Browserverlauf des Benutzers basiert).

Wenn Sie beispielsweise über eine *Metrics* Komponente verfügen, die den Gesamtumsatz für den aktuellen Monat anzeigen muss, können Sie einen Ausdruck wie den folgenden verwenden, um den monatlichen Umsatz zu berechnen und anzuzeigen:

```
{{ui.table1.orders.concat(ui.table1.orderDetails).filter(o => o.orderDate.getMonth() === new Date().getMonth()).reduce((a, b) => a + (b.quantity * b.unitPrice), 0)}}
```

##### Automatisierung
<a name="common-properties-source-automation"></a>

Wählen Sie **Automatisierung** als Datenquelle aus, um die Komponente mit einer vorhandenen Automatisierung oder einem Workflow in Ihrer Anwendung zu verbinden. Dies ist nützlich, wenn die Daten oder Funktionen für die Komponente als Teil eines bestimmten Prozesses oder Workflows generiert oder aktualisiert werden.

Wann sollte die **Automatisierungs-Datenquelle** verwendet werden:
+ Wenn die in der Komponente angezeigten Daten das Ergebnis einer bestimmten Automatisierung oder eines bestimmten Workflows sind (z. B. eine Tabelle „Ausstehende Genehmigungen“, die im Rahmen eines Genehmigungsprozesses aktualisiert wird).
+ Wenn Sie aufgrund von Ereignissen oder Bedingungen innerhalb einer Automatisierung Aktionen oder Aktualisierungen an der Komponente auslösen möchten (z. B. Aktualisierung einer Metrik mit den neuesten Verkaufszahlen für eine SKU).
+ Wenn Sie die Komponente mithilfe einer Automatisierung in andere Dienste oder Systeme in Ihrer Anwendung integrieren müssen (z. B. Daten von einer Drittanbieter-API abrufen und in einer Tabelle anzeigen).

Zum Beispiel, wenn Sie über eine Stepflow-Komponente verfügen, die Benutzer durch einen Bewerbungsprozess führt. Die Stepflow-Komponente kann mit einer Automatisierung verbunden werden, die die Einreichung von Bewerbungen, die Hintergrundprüfungen und die Angebotserstellung übernimmt. Während die Automatisierung diese Schritte durchläuft, kann die Stepflow-Komponente dynamisch aktualisiert werden, um den aktuellen Status der Bewerbung widerzuspiegeln.

Durch die sorgfältige Auswahl der geeigneten Datenquelle für jede Komponente können Sie sicherstellen, dass die Benutzeroberfläche Ihrer Anwendung auf den richtigen Daten und der richtigen Logik basiert und Ihren Benutzern ein nahtloses und ansprechendes Erlebnis bietet.

### Sichtbar wenn
<a name="visible-if"></a>

Verwenden Sie die Eigenschaft **Sichtbar, wenn** Sie Komponenten oder Elemente auf der Grundlage bestimmter Bedingungen oder Datenwerte ein- oder ausblenden möchten. Dies ist nützlich, wenn Sie die Sichtbarkeit bestimmter Teile der Benutzeroberfläche Ihrer Anwendung dynamisch steuern möchten.

Die Eigenschaft **Visible if** verwendet die folgende Syntax:

```
{{expression ? true : false}}
```

oder

```
{{expression}}
```

Wo *expression* ist ein boolescher Ausdruck, der entweder oder ergibt? `true` `false`

Wenn der Ausdruck zu ausgewertet wird`true`, ist die Komponente sichtbar. Wenn der Ausdruck als Ergebnis ausgewertet wird`false`, wird die Komponente ausgeblendet. Der Ausdruck kann auf Werte aus anderen Komponenten, Datenquellen oder Variablen in Ihrer Anwendung verweisen.

#### Sichtbar bei Ausdrucksbeispielen
<a name="visible-if-examples"></a>

##### Beispiel: Ein- oder Ausblenden eines Passwort-Eingabefeldes basierend auf einer E-Mail-Eingabe
<a name="visible-if-example-password-email"></a>

Stellen Sie sich vor, Sie haben ein Anmeldeformular mit einem E-Mail-Eingabefeld und einem Passwort-Eingabefeld. Sie möchten das Passwort-Eingabefeld nur anzeigen, wenn der Benutzer eine E-Mail-Adresse eingegeben hat. Sie können den folgenden Ausdruck Visible if verwenden:

```
{{ui.emailInput.value !== ""}}
```

Dieser Ausdruck prüft, ob der Wert der `emailInput` Komponente keine leere Zeichenfolge ist. Wenn der Benutzer eine E-Mail-Adresse eingegeben hat, wird der Ausdruck zu ausgewertet`true`, und das Passworteingabefeld ist sichtbar. Wenn das E-Mail-Feld leer ist, wird der Ausdruck zu ausgewertet`false`, und das Passworteingabefeld wird ausgeblendet.

##### Beispiel: Anzeige zusätzlicher Formularfelder auf der Grundlage einer Dropdownauswahl
<a name="visible-if-example-form-fields-dropdown"></a>

Nehmen wir an, Sie haben ein Formular, in dem Benutzer eine Kategorie aus einer Dropdownliste auswählen können. Abhängig von der ausgewählten Kategorie möchten Sie zusätzliche Formularfelder ein- oder ausblenden, um spezifischere Informationen zu sammeln.

Wenn der Benutzer beispielsweise die *Products* Kategorie auswählt, können Sie den folgenden Ausdruck verwenden, um ein zusätzliches *Product Details* Feld anzuzeigen:

```
{{ui.categoryDropdown.value === "Products"}}
```

Wenn der Benutzer die *Consulting* Kategorien *Services* oder auswählt, können Sie diesen Ausdruck verwenden, um einen anderen Satz zusätzlicher Felder anzuzeigen:

```
{{ui.categoryDropdown.value === "Services" || ui.categoryDropdown.value === "Consulting"}}
```

##### Beispiele: Andere
<a name="visible-if-example-other"></a>

Um die Komponente sichtbar zu machen, wenn der Wert der `textInput1` Komponente keine leere Zeichenfolge ist:

```
{{ui.textInput1.value === "" ? false : true}}
```

Um die Komponente immer sichtbar zu machen:

```
{{true}}
```

Um die Komponente sichtbar zu machen, wenn der Wert der `emailInput` Komponente keine leere Zeichenfolge ist:

```
{{ui.emailInput.value !== ""}}
```

### Deaktiviert wenn
<a name="disabled-if"></a>

Mit der Funktion **Deaktiviert wenn** können Sie eine Komponente auf der Grundlage bestimmter Bedingungen oder Datenwerte bedingt aktivieren oder deaktivieren. Dies wird durch die Verwendung der Eigenschaft **Disabled if** erreicht, die einen booleschen Ausdruck akzeptiert, der bestimmt, ob die Komponente aktiviert oder deaktiviert werden soll.

Die Eigenschaft **Disabled if** verwendet die folgende Syntax:

```
{{expression ? true : false}}
```

oder

```
{{expression}}
```

#### Deaktiviert, wenn Ausdrucksbeispiele
<a name="disabled-if-examples"></a>

##### Beispiel: Deaktivierung einer Schaltfläche zum Absenden auf der Grundlage einer Formularüberprüfung
<a name="disabled-if-example-disable-submit-button"></a>

Wenn Sie ein Formular mit mehreren Eingabefeldern haben und die Schaltfläche „Senden“ deaktivieren möchten, bis alle erforderlichen Felder korrekt ausgefüllt sind, können Sie den folgenden **Disabled If-Ausdruck** verwenden:

```
{{ui.nameInput.value === "" || ui.emailInput.value === "" || ui.passwordInput.value === ""}}
```

Dieser Ausdruck überprüft, ob eines der erforderlichen Eingabefelder (`nameInput`,`emailInput`,`passwordInput`) leer ist. Wenn eines der Felder leer ist, wird der Ausdruck zu ausgewertet`true`, und die Schaltfläche „Senden“ wird deaktiviert. Sobald alle erforderlichen Felder ausgefüllt sind, wird der Ausdruck zu `false` ausgewertet und die Schaltfläche „Senden“ wird aktiviert.

Durch die Verwendung dieser Typen von bedingten Ausdrücken in den Eigenschaften **Visible if** und **Disabled ff** können Sie dynamische und responsive Benutzeroberflächen erstellen, die sich an Benutzereingaben anpassen und den Benutzern Ihrer Anwendung ein optimiertes und relevanteres Erlebnis bieten.

Wo *expression* ist ein boolescher Ausdruck, der entweder als wahr oder falsch ausgewertet wird?

Beispiel:

```
{{ui.textInput1.value === "" ? true : false}}: The component will be Disabled if the textInput1 component's value is an empty string.
{{!ui.nameInput.isValid || !ui.emailInput.isValid || !ui.passwordInput.isValid}}: The component will be Disabled if any of the named input fields are invalid.
```

#### Layouts von Containern
<a name="container-layouts"></a>

Die Layouteigenschaften bestimmen, wie der Inhalt oder die Elemente innerhalb einer Komponente angeordnet und positioniert werden. Es sind mehrere Layoutoptionen verfügbar, die jeweils durch ein Symbol dargestellt werden:
+ **Spaltenlayout**: Dieses Layout ordnet den Inhalt oder die Elemente vertikal in einer einzigen Spalte an.
+ **Zweispaltiges Layout**: Dieses Layout unterteilt die Komponente in zwei Spalten gleicher Breite, sodass Sie Inhalte oder Elemente nebeneinander positionieren können.
+ **Zeilenlayout**: Dieses Layout ordnet den Inhalt oder die Elemente horizontal in einer einzigen Zeile an.

##### Ausrichtung
<a name="container-layouts-orientation"></a>
+ **Horizontal**: Dieses Layout ordnet den Inhalt oder die Elemente horizontal in einer einzigen Zeile an.
+ **Vertikal**: Dieses Layout ordnet den Inhalt oder die Elemente vertikal in einer einzigen Spalte an.
+ **Zeilenumbruch**: Dieses Layout ordnet den Inhalt oder die Elemente horizontal an, wird jedoch zur nächsten Zeile umgebrochen, wenn die Elemente die verfügbare Breite überschreiten.

##### Ausrichtung
<a name="container-layouts-alignment"></a>
+ **Links**: Richtet den Inhalt oder die Elemente an der linken Seite der Komponente aus.
+ **Mittig**: Zentriert den Inhalt oder die Elemente horizontal innerhalb der Komponente.
+ **Rechts**: Richtet den Inhalt oder die Elemente an der rechten Seite der Komponente aus.

##### Width
<a name="container-layouts-width"></a>

Die Eigenschaft **Width** gibt die horizontale Größe der Komponente an. Sie können einen Prozentwert zwischen 0 und 100% eingeben, der die Breite der Komponente im Verhältnis zum übergeordneten Container oder zum verfügbaren Speicherplatz darstellt.

##### Höhe
<a name="container-layouts-height"></a>

Die Eigenschaft **Height** gibt die vertikale Größe der Komponente an. Der Wert „auto“ passt die Höhe der Komponente automatisch an ihren Inhalt oder den verfügbaren Platz an.

##### Abstand zwischen
<a name="container-layouts-space-between"></a>

Die Eigenschaft „**Abstand zwischen**“ bestimmt den Abstand oder die Lücke zwischen dem Inhalt oder den Elementen innerhalb der Komponente. Sie können einen Wert zwischen 0 px (kein Abstand) und 64 px mit Schritten von 4 px (z. B. 4 px, 8 px, 12 px usw.) auswählen.

##### Padding
<a name="container-layouts-padding"></a>

Die Eigenschaft **Padding** steuert den Abstand zwischen dem Inhalt oder den Elementen und den Kanten der Komponente. Sie können einen Wert zwischen 0px (ohne Polsterung) und 64px mit Schritten von 4px (z. B. 4px, 8px, 12px usw.) wählen.

##### Hintergrund
<a name="container-layouts-background"></a>

Der **Hintergrund** aktiviert oder deaktiviert eine Hintergrundfarbe oder einen Stil für die Komponente.

Diese Layouteigenschaften bieten Flexibilität bei der Anordnung und Positionierung des Inhalts innerhalb einer Komponente sowie bei der Steuerung der Größe, des Abstands und der visuellen Darstellung der Komponente selbst.

## Datenkomponenten
<a name="data-components"></a>

In diesem Abschnitt werden die verschiedenen Datenkomponenten behandelt, die im Application Studio verfügbar sind, darunter die Komponenten **Table**, **Detail**, **Metric**, **Form** und **Repeater**. Diese Komponenten werden verwendet, um Daten in Ihrer Anwendung anzuzeigen, zu sammeln und zu bearbeiten.

### Tabelle
<a name="table-component"></a>

Die **Tabellenkomponente** zeigt Daten in einem tabellarischen Format mit Zeilen und Spalten an. Sie wird verwendet, um strukturierte Daten, wie z. B. Listen mit Elementen oder Datensätzen aus einer Datenbank, strukturiert und easy-to-read strukturiert darzustellen.

#### Tabelleneigenschaften
<a name="table-component-properties"></a>

Die **Tabellenkomponente** hat mehrere gemeinsame Eigenschaften mit anderen Komponenten wie `Name``Source`, und`Actions`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Zusätzlich zu den allgemeinen Eigenschaften verfügt die **Tabellenkomponente** über spezifische Eigenschaften und Konfigurationsoptionen, darunter `Columns``Search and export`, und`Expressions`.

##### Spalten
<a name="table-component-properties-columns"></a>

In diesem Abschnitt können Sie die Spalten definieren, die in der Tabelle angezeigt werden sollen. Jede Spalte kann mit den folgenden Eigenschaften konfiguriert werden:
+ **Format**: Der Datentyp des Felds, zum Beispiel: Text, Zahl, Datum.
+ **Spaltenbezeichnung**: Der Kopfzeilentext für die Spalte.
+ **Wert**: Das Feld aus der Datenquelle, das in dieser Spalte angezeigt werden soll.

  In diesem Feld können Sie den Wert oder Ausdruck angeben, der in den Spaltenzellen angezeigt werden soll. Sie können Ausdrücke verwenden, um auf Daten aus der verbundenen Quelle oder anderen Komponenten zu verweisen.

  Beispiel: `{{currentRow.title}}` - Dieser Ausdruck zeigt den Wert des *title* Feldes aus der aktuellen Zeile in den Spaltenzellen an.
+ **Sortierung aktivieren**: Mit diesem Schalter können Sie die Sortierfunktion für die jeweilige Spalte aktivieren oder deaktivieren. Wenn diese Option aktiviert ist, können Benutzer die Tabellendaten anhand der Werte in dieser Spalte sortieren.

##### Suchen und exportieren
<a name="table-component-properties-search-and-export"></a>

Die **Tabellenkomponente** bietet die folgenden Schalter zum Aktivieren oder Deaktivieren der Such- und Exportfunktionen:
+ **Suche anzeigen** Wenn diese Option aktiviert ist, fügt sie der Tabelle ein Sucheingabefeld hinzu, sodass Benutzer die angezeigten Daten suchen und filtern können.
+ **Export anzeigen** Wenn diese Option aktiviert ist, fügt sie der Tabelle eine Exportoption hinzu, sodass Benutzer die Tabellendaten in verschiedenen Formaten herunterladen können, zum Beispiel: CSV.

**Anmerkung**  
Standardmäßig ist die Suchfunktion auf die Daten beschränkt, die in die Tabelle geladen wurden. Um die Suche vollständig nutzen zu können, müssen Sie alle Datenseiten laden.

##### Zeilen pro Seite
<a name="table-component-properties-rows-per-page"></a>

Sie können die Anzahl der Zeilen angeben, die pro Seite in der Tabelle angezeigt werden sollen. Benutzer können dann zwischen den Seiten navigieren, um den gesamten Datensatz anzuzeigen.

##### Limit vor dem Abrufen
<a name="table-component-properties-pre-fetch-limit"></a>

Geben Sie die maximale Anzahl von Datensätzen an, die in jeder Abfrageanforderung vorab abgerufen werden sollen. Das Maximum ist 3000.

##### Aktionen
<a name="table-component-properties-actions"></a>

Konfigurieren Sie im Abschnitt **Aktionen** die folgenden Eigenschaften:
+ **Ort der Aktion**: Wenn „**Nach rechts anheften**“ aktiviert ist, werden alle hinzugefügten Aktionen immer auf der rechten Seite der Tabelle angezeigt, unabhängig davon, ob der Benutzer scrollt.
+ **Aktionen**: Fügen Sie der Tabelle Aktionsschaltflächen hinzu. Sie können diese Schaltflächen so konfigurieren, dass sie bestimmte Aktionen ausführen, wenn sie von einem Benutzer angeklickt werden, z. B.:
  + Führen Sie eine Komponentenaktion aus
  + Navigieren Sie zu einer anderen Seite
  + Rufen Sie eine Datenaktion auf
  + Benutzerdefiniert ausführen JavaScript
  + Rufen Sie eine Automatisierung auf

##### Ausdrücke
<a name="table-component-properties-expressions"></a>

Die **Tabellenkomponente** bietet mehrere Bereiche zur Verwendung von Ausdrücken und Aktionsfunktionen auf Zeilenebene, mit denen Sie die Funktionalität und Interaktivität der Tabelle anpassen und verbessern können. Sie ermöglichen es Ihnen, dynamisch auf Daten in der Tabelle zu verweisen und sie anzuzeigen. Mithilfe dieser Ausdrucksfelder können Sie dynamische Spalten erstellen, Daten an Aktionen auf Zeilenebene übergeben und Tabellendaten aus anderen Komponenten oder Ausdrücken in Ihrer Anwendung referenzieren.

##### Beispiele: Referenzieren von Zeilenwerten
<a name="table-component-properties-examples-referencing-row-values"></a>

`{{currentRow.columnName}}`oder Mit `{{currentRow["Column Name"]}}` diesen Ausdrücken können Sie auf den Wert einer bestimmten Spalte für die aktuelle Zeile verweisen, die gerade gerendert wird. Ersetzen Sie *columnName* oder *Column Name* durch den tatsächlichen Namen der Spalte, auf die Sie verweisen möchten.

Beispiele:
+ `{{currentRow.productName}}`Zeigt den Produktnamen für die aktuelle Zeile an.
+ `{{currentRow["Supplier Name"]}}`Zeigt den Lieferantennamen für die aktuelle Zeile an, in der sich die Spaltenüberschrift befindet*Supplier Name*.
+ `{{currentRow.orderDate}}`Zeigt das Bestelldatum für die aktuelle Zeile an.

##### Beispiele: Verweisen auf die ausgewählte Zeile
<a name="table-component-properties-examples-referencing-selected-row"></a>

`{{ui.table1.selectedRow["columnName"]}}`Mit diesem Ausdruck können Sie auf den Wert einer bestimmten Spalte für die aktuell ausgewählte Zeile in der Tabelle mit der ID *table1* verweisen. *table1*Ersetzen Sie ihn durch die tatsächliche ID Ihrer Tabellenkomponente und *columnName* durch den Namen der Spalte, auf die Sie verweisen möchten.

Beispiele:
+ `{{ui.ordersTable.selectedRow["totalAmount"]}}`Zeigt den Gesamtbetrag für die aktuell ausgewählte Zeile in der Tabelle mit der ID an*ordersTable*.
+ `{{ui.customersTable.selectedRow["email"]}}`Zeigt die E-Mail-Adresse für die aktuell ausgewählte Zeile in der Tabelle mit der ID an*customersTable*.
+ `{{ui.employeesTable.selectedRow["department"]}}`Zeigt die Abteilung für die aktuell ausgewählte Zeile in der Tabelle mit der ID an*employeesTable*.

##### Beispiele: Benutzerdefinierte Spalten erstellen
<a name="table-component-properties-examples-creating-custom-columns"></a>

Sie können einer Tabelle benutzerdefinierte Spalten hinzufügen, die auf Daten basieren, die von der zugrunde liegenden Datenaktion, Automatisierung oder dem Ausdruck zurückgegeben wurden. Sie können vorhandene Spaltenwerte und JavaScript Ausdrücke verwenden, um neue Spalten zu erstellen.

Beispiele:
+ `{{currentRow.quantity * currentRow.unitPrice}}`Erstellt eine neue Spalte, in der der Gesamtpreis angezeigt wird, indem die Spalten Menge und Einzelpreis multipliziert werden.
+ `{{new Date(currentRow.orderDate).toLocaleDateString()}}`Erstellt eine neue Spalte, in der das Bestelldatum in einem besser lesbaren Format angezeigt wird.
+ `{{currentRow.firstName + ' ' + currentRow.lastName + ' (' + currentRow.email + ')' }}`Erstellt eine neue Spalte, in der der vollständige Name und die E-Mail-Adresse für jede Zeile angezeigt werden.

##### Beispiele: Anpassen der Werte für die Spaltenanzeige:
<a name="table-component-properties-examples-customizing-column-display-values"></a>

Sie können den Anzeigewert eines Felds innerhalb einer Tabellenspalte anpassen, indem Sie das `Value` Feld der Spaltenzuordnung festlegen. Auf diese Weise können Sie benutzerdefinierte Formatierungen oder Transformationen auf die angezeigten Daten anwenden.

Beispiele:
+ `{{ currentRow.rating >= 4 ? '⭐️'.repeat(currentRow.rating) : currentRow.rating }}`Zeigt Stern-Emojis basierend auf dem Bewertungswert für jede Zeile an.
+ `{{ currentRow.category.toLowerCase().replace(/\b\w/g, c => c.toUpperCase()) }}`Zeigt den Kategoriewert an, wobei jedes Wort für jede Zeile groß geschrieben wird.
+ `{{ currentRow.status === 'Active' ? '🟢 Active' : '🔴 Inactive' }}`: Zeigt einen farbigen Kreis, Emoji und Text an, der auf dem Statuswert für jede Zeile basiert.

##### Tastenaktionen auf Zeilenebene
<a name="table-component-properties-examples-row-level-button-actions"></a>

`{{currentRow.columnName}}`Oder `{{currentRow["Column Name"]}}` Sie können diese Ausdrücke verwenden, um den Kontext der referenzierten Zeile innerhalb einer Aktion auf Zeilenebene zu übergeben, z. B. das Navigieren zu einer anderen Seite mit den Daten der ausgewählten Zeile oder das Auslösen einer Automatisierung mit den Daten der Zeile.

Beispiele:
+ Wenn Sie in der Spalte für die Zeilenaktion eine Bearbeitungsschaltfläche haben, können Sie diese `{{currentRow.orderId}}` als Parameter übergeben, um zu einer Seite zur Bearbeitung von Bestellungen mit der ID der ausgewählten Bestellung zu navigieren.
+ Wenn Sie in der Spalte für die Zeilenaktion eine Schaltfläche zum Löschen haben, können Sie `{{currentRow.customerName}}` zu einer Automatisierung wechseln, die dem Kunden eine Bestätigungs-E-Mail sendet, bevor er seine Bestellung löscht.
+ Wenn Sie in der Spalte für die Zeilenaktion eine Schaltfläche „Details anzeigen“ haben, können Sie `{{currentRow.employeeId}}` zu einer Automatisierung übergehen, die den Mitarbeiter protokolliert, der die Bestelldetails angesehen hat.

Durch die Nutzung dieser Ausdrucksfelder und Aktionsfunktionen auf Zeilenebene können Sie hochgradig angepasste und interaktive Tabellen erstellen, in denen Daten gemäß Ihren spezifischen Anforderungen angezeigt und bearbeitet werden. Darüber hinaus können Sie Aktionen auf Zeilenebene mit anderen Komponenten oder Automatisierungen innerhalb Ihrer Anwendung verbinden und so einen nahtlosen Datenfluss und eine nahtlose Funktionalität ermöglichen.

### Detail
<a name="detail-component"></a>

Die **Detailkomponente** dient dazu, detaillierte Informationen zu einem bestimmten Datensatz oder Element anzuzeigen. Sie bietet einen speziellen Bereich für die Präsentation umfassender Daten, die sich auf eine einzelne Entität oder Zeile beziehen, und eignet sich somit ideal für die Präsentation detaillierter Details oder zur Erleichterung von Dateneingabe- und Bearbeitungsaufgaben.

#### Eigenschaften im Detail
<a name="detail-component-properties"></a>

Die **Detailkomponente** weist mehrere gemeinsame Eigenschaften mit anderen Komponenten auf, z. B. `Name``Source`, und`Actions`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Die **Detailkomponente** verfügt auch über spezifische Eigenschaften und Konfigurationsoptionen`Fields`, darunter`Layout`, und`Expressions`.

#### Layout
<a name="detail-component-properties-layout"></a>

Im Abschnitt **Layout** können Sie die Anordnung und Darstellung der Felder innerhalb der **Detailkomponente** anpassen. Sie können Optionen konfigurieren wie:
+ **Anzahl der Spalten**: Geben Sie die Anzahl der Spalten an, in denen die Felder angezeigt werden sollen.
+ **Reihenfolge der Felder**: Ziehen Sie Felder per Drag-and-Drop, um ihr Aussehen neu zu ordnen.
+ **Abstand und Ausrichtung**: Passen Sie den Abstand und die Ausrichtung der Felder innerhalb der Komponente an.

#### Ausdrücke und Beispiele
<a name="detail-component-properties-expressions"></a>

Die **Detailkomponente** bietet verschiedene Ausdrucksfelder, mit denen Sie Daten innerhalb der Komponente dynamisch referenzieren und anzeigen können. Mit diesen Ausdrücken können Sie benutzerdefinierte und interaktive **Detailkomponenten** erstellen, die sich nahtlos mit den Daten und der Logik Ihrer Anwendung verbinden.

##### Beispiel: Referenzieren von Daten
<a name="detail-component-properties-examples-referencing-data"></a>

`{{ui.details.data[0]?.["colName"]}}`: Mit diesem Ausdruck können Sie auf den Wert der Spalte mit dem Namen „colName“ für das erste Element (Index 0) im Datenarray verweisen, das mit der **Detail-Komponente** mit der ID „details“ verbunden ist. Ersetzen Sie „colName“ durch den tatsächlichen Namen der Spalte, auf die Sie verweisen möchten. Der folgende Ausdruck zeigt beispielsweise den Wert der Spalte „customerName“ für das erste Element im Datenarray an, das mit der Komponente „Details“ verbunden ist:

```
{{ui.details.data[0]?.["customerName"]}}
```

**Anmerkung**  
Dieser Ausdruck ist nützlich, wenn sich die **Detailkomponente** auf derselben Seite befindet wie die Tabelle, auf die verwiesen wird, und Sie Daten aus der ersten Zeile der Tabelle in der **Detailkomponente** anzeigen möchten.

##### Beispiel: Bedingtes Rendern
<a name="detail-component-properties-examples-conditional-rendering"></a>

`{{ui.table1.selectedRow["colName"]}}`: Dieser Ausdruck gibt „true“ zurück, wenn die ausgewählte Zeile in der Tabelle mit der ID *table1* Daten für die angegebene Spalte enthält*colName*. Er kann verwendet werden, um die **Detailkomponente** bedingt ein- oder auszublenden, je nachdem, ob die ausgewählte Zeile der Tabelle leer ist oder nicht.

Beispiel:

Sie können diesen Ausdruck in der `Visible if` Eigenschaft der **Detailkomponente** verwenden, um sie abhängig von der ausgewählten Zeile in der Tabelle bedingt ein- oder auszublenden.

```
{{ui.table1.selectedRow["customerName"]}}
```

Wenn dieser Ausdruck als wahr ausgewertet wird (die ausgewählte Zeile in der *table1* Komponente hat einen Wert für die *customerName* Spalte), ist die **Detailkomponente** sichtbar. Wenn der Ausdruck als falsch ausgewertet wird (d. h. die ausgewählte Zeile ist leer oder hat keinen Wert für „customerName“), wird die **Detailkomponente** ausgeblendet.

##### Beispiel: Bedingte Anzeige
<a name="detail-component-properties-examples-conditional-display"></a>

`{{(ui.Component.value === "green" ? "🟢" : ui.Component.value === "yellow" ? "🟡" : ui.detail1.data?.[0]?.CustomerStatus)}}`: Dieser Ausdruck zeigt bedingt ein Emoji an, das auf dem Wert einer Komponente oder eines Datenfeldes basiert.

Aufschlüsselung:
+ `ui.Component.value`: Verweist auf den Wert einer Komponente mit der ID*Component*.
+ `=== "green"`: Prüft, ob der Wert der Komponente der Zeichenfolge „green“ entspricht.
+ `? "🟢"`: Wenn die Bedingung wahr ist, wird der grüne Kreis als Emoji angezeigt.
+ `: ui.Component.value === "yellow" ? "🟡"`: Wenn die erste Bedingung falsch ist, wird geprüft, ob der Wert der Komponente der Zeichenfolge „gelb“ entspricht.
+ `? "🟡"`: Wenn die zweite Bedingung wahr ist, wird das gelbe quadratische Emoji angezeigt.
+ `: ui.detail1.data?.[0]?.CustomerStatus`: Wenn beide Bedingungen falsch sind, verweist sie auf den "CustomerStatus" -Wert des ersten Elements im Datenarray, das mit der Detail-Komponente mit der ID „detail1" verbunden ist.

Dieser Ausdruck kann verwendet werden, um ein Emoji oder einen bestimmten Wert anzuzeigen, der auf dem Wert einer Komponente oder eines Datenfeldes innerhalb der **Detailkomponente** basiert.

### Kennzahlen
<a name="metrics-component"></a>

Die **Metrikkomponente** ist ein visuelles Element, das wichtige Kennzahlen oder Datenpunkte in einem kartenähnlichen Format anzeigt. Es wurde entwickelt, um wichtige Informationen oder Leistungsindikatoren präzise und visuell ansprechend darzustellen.

#### Eigenschaften von Metriken
<a name="metrics-properties"></a>

Die **Metrik-Komponente** hat mehrere gemeinsame Eigenschaften mit anderen Komponenten gemeinsam`Name`, z. B.`Source`, und`Actions`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

#### Trend
<a name="metrics-properties-trend"></a>

Mit der Trendfunktion der Metriken können Sie einen visuellen Indikator für die Leistung oder Veränderung der angezeigten Metrik im Laufe der Zeit anzeigen.

##### Trendwert
<a name="metrics-properties-trend-value"></a>

In diesem Feld können Sie den Wert oder Ausdruck angeben, der zur Bestimmung der Trendrichtung und -stärke verwendet werden soll. In der Regel wäre dies ein Wert, der die Veränderung oder Leistung über einen bestimmten Zeitraum darstellt.

Beispiel:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}
```

Dieser Ausdruck ruft den month-over-month Umsatzwert aus dem ersten Element in den Daten ab, die mit den „SalesMetrics“ -Metriken verknüpft sind.

##### Positiver Trend
<a name="metrics-properties-positive-trend"></a>

In diesem Feld können Sie einen Ausdruck eingeben, der die Bedingung für einen positiven Trend definiert. Der Ausdruck sollte als wahr oder falsch ausgewertet werden.

Beispiel:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}
```

Dieser Ausdruck prüft, ob der month-over-month Umsatzwert größer als 0 ist, was auf einen positiven Trend hinweist.

##### Negativer Trend
<a name="metrics-properties-negative-trend"></a>

In diesem Feld können Sie einen Ausdruck eingeben, der die Bedingung für einen negativen Trend definiert. Der Ausdruck sollte als wahr oder falsch ausgewertet werden.

Beispiel:

```
{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}
```

Dieser Ausdruck prüft, ob der month-over-month Umsatzwert kleiner als 0 ist, was auf einen negativen Trend hinweist.

##### Farbleiste
<a name="metrics-properties-color-bar"></a>

Mit diesem Schalter können Sie die Anzeige eines farbigen Balkens aktivieren oder deaktivieren, um den Trendstatus visuell anzuzeigen.

##### Beispiele für Farbleisten:
<a name="metrics-properties-color-bar-examples"></a>

##### Beispiel: Trend der Verkaufskennzahlen
<a name="metrics-properties-color-bar-examples-sales-metrics-trend"></a>
+ **Trendwert**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue}}`
+ **Positiver Trend**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue > 0}}`
+ **Negativer Trend**: `{{ui.salesMetrics.data?.[0]?.monthOverMonthRevenue < 0}}`
+ **Farbleiste**: Aktiviert

##### Beispiel: Trend der Inventarkennzahlen
<a name="metrics-properties-color-bar-examples-inventory-metrics-trend"></a>
+ **Trendwert**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory - ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Positiver Trend**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory > ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Negativer Trend**: `{{ui.inventoryMetrics.data?.[0]?.currentInventory < ui.inventoryMetrics.data?.[1]?.currentInventory}}`
+ **Color Bbar: Aktiviert**

##### Beispiel: Trend zur Kundenzufriedenheit
<a name="metrics-properties-color-bar-examples-customer-satisfaction-trend"></a>
+ **Trendwert**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore}}`
+ **Positiver Trend**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore >= 8}}`
+ **Negativer Trend**: `{{ui.customerSatisfactionMetrics.data?.[0]?.npsScore < 7}}`
+ **Farbleiste**: Aktiviert

Durch die Konfiguration dieser trendbezogenen Eigenschaften können Sie **Metrikkomponenten** erstellen, die eine visuelle Darstellung der Leistung oder der Veränderung der angezeigten Metrik im Laufe der Zeit bieten.

Mithilfe dieser Ausdrücke können Sie hochgradig angepasste und interaktive Metrikkomponenten erstellen, die Daten dynamisch referenzieren und anzeigen, sodass Sie wichtige Kennzahlen, Leistungsindikatoren und datengesteuerte Visualisierungen in Ihrer Anwendung präsentieren können.

#### Beispiele für Ausdrücke von Kennzahlen
<a name="metrics-expression-examples"></a>

Im Eigenschaftenfenster können Sie Ausdrücke eingeben, um den Titel, den Primärwert, den Sekundärwert und die Wertbezeichnung anzuzeigen, um einen Wert dynamisch anzuzeigen.

##### Beispiel: Primärwert referenzieren
<a name="metrics-expression-examples-referencing-primary-value"></a>

`{{ui.metric1.primaryValue}}`: Mit diesem Ausdruck können Sie auf den Primärwert der **Metrikkomponente** mit der ID *metric1* anderer Komponenten oder Ausdrücke auf derselben Seite verweisen.

Beispiel: Zeigt `{{ui.salesMetrics.primaryValue}}` den Primärwert der *salesMetrics* **Metrics-Komponente** an.

##### Beispiel: Referenzierung eines sekundären Werts
<a name="metrics-expression-examples-referencing-secondary-value"></a>

`{{ui.metric1.secondaryValue}}`: Mit diesem Ausdruck können Sie auf den Sekundärwert der **Metrikkomponente** mit der ID *metric1* anderer Komponenten oder Ausdrücke auf derselben Seite verweisen.

Beispiel: Zeigt `{{ui.revenueMetrics.secondaryValue}}` den Sekundärwert der *revenueMetrics* **Metrics-Komponente** an.

##### Beispiel: Daten referenzieren
<a name="metrics-expression-examples-referencing-data"></a>

`{{ui.metric1.data}}`: Dieser Ausdruck ermöglicht es Ihnen, die Daten der **Metrik-Komponente** mit der ID *metric1* anderer Komponenten oder Ausdrücke auf derselben Seite zu referenzieren.

Beispiel: verweist auf `{{ui.kpiMetrics.data}}` die Daten, die mit der *kpiMetrics* **Metrics-Komponente** verbunden sind.

##### Beispiel: Anzeige bestimmter Datenwerte:
<a name="metrics-expression-examples-displaying-specific-data-values"></a>

`{{ui.metric1.data?.[0]?.id}}`: Dieser Ausdruck ist ein Beispiel dafür, wie eine bestimmte Information aus den Daten angezeigt wird, die mit der **Metrik-Komponente** mit der ID verknüpft sind*metric1*. Dies ist nützlich, wenn Sie eine bestimmte Eigenschaft des ersten Elements in den Daten anzeigen möchten.

Aufschlüsselung:
+ `ui.metric1`: Verweist auf die **Metrik-Komponente** mit der ID*metric1*.
+ `data`: Bezieht sich auf die Informationen oder den Datensatz, der mit dieser Komponente verbunden ist.
+ `?.[0]`: Bedeutet das erste Element oder den ersten Eintrag in diesem Datensatz.
+ `?.id`: Zeigt den *id* Wert oder die Kennung des ersten Elements oder Eintrags an.

Beispiel: Zeigt `{{ui.orderMetrics.data?.[0]?.orderId}}` den *orderId* Wert des ersten Elements in den Daten an, die mit der *orderMetrics* **Metrik-Komponente** verbunden sind.

##### Beispiel: Datenlänge anzeigen
<a name="metrics-expression-examples-displaying-data-length"></a>

`{{ui.metric1.data?.length}}`: Dieser Ausdruck zeigt, wie die Länge (Anzahl der Elemente) in den Daten angezeigt wird, die mit der **Metrics-Komponente** mit der ID verbunden sind*metric1*. Dies ist nützlich, wenn Sie die Anzahl der Elemente in den Daten anzeigen möchten.

Aufschlüsselung:
+ `ui.metric1.data`: Verweist auf den Datensatz, der mit der Komponente verbunden ist.
+ `?.length`: Greift auf die Gesamtzahl oder Anzahl der Elemente oder Einträge in diesem Datensatz zu.

Beispiel: Zeigt `{{ui.productMetrics.data?.length}}` die Anzahl der Elemente in den Daten an, die mit der *productMetrics* **Metrik-Komponente** verbunden sind.

### Repeater
<a name="repeater-component"></a>

Die **Repeater-Komponente** ist eine dynamische Komponente, mit der Sie eine Sammlung von Elementen auf der Grundlage einer bereitgestellten Datenquelle generieren und anzeigen können. Sie wurde entwickelt, um die Erstellung von Listen, Rastern oder sich wiederholenden Mustern innerhalb der Benutzeroberfläche Ihrer Anwendung zu erleichtern. Zu den Anwendungsbeispielen gehören:
+ Anzeige einer Karte für jeden Benutzer in einem Konto
+ Es wird eine Liste von Produkten angezeigt, die Bilder und eine Schaltfläche zum Hinzufügen zum Warenkorb enthalten
+ Es wird eine Liste der Dateien angezeigt, auf die der Benutzer zugreifen kann

Die **Repeater-Komponente** unterscheidet sich von der **Table-Komponente** mit umfangreichem Inhalt. Eine **Tabellenkomponente** hat ein striktes Zeilen- und Spaltenformat. Der **Repeater** kann Ihre Daten flexibler anzeigen.

#### Eigenschaften des Repeaters
<a name="repeater-component-properties"></a>

Die **Repeater-Komponente** hat mehrere gemeinsame Eigenschaften mit anderen Komponenten wie `Name``Source`, und. `Actions` Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Zusätzlich zu den allgemeinen Eigenschaften verfügt die **Repeater-Komponente** über die folgenden zusätzlichen Eigenschaften und Konfigurationsoptionen.

#### Artikelvorlage
<a name="repeater-component-properties-item-template"></a>

Die **Artikelvorlage** ist ein Container, in dem Sie die Struktur und die Komponenten definieren können, die für jedes Element in der Datenquelle wiederholt werden. Sie können andere Komponenten wie **Text**, **Bild**, **Schaltfläche oder jede andere Komponente, die Sie zur Darstellung der einzelnen Elemente benötigen, per** Drag & Drop in diesen Container ziehen.

In der **Artikelvorlage** können Sie mithilfe von Ausdrücken im Format auf Eigenschaften oder Werte des aktuellen Elements verweisen`{{currentItem.propertyName}}`.

Wenn Ihre Datenquelle beispielsweise eine `itemName` Eigenschaft enthält, können Sie `{{currentItem.itemName}}` sie verwenden, um die Elementnamen des aktuellen Elements anzuzeigen.

#### Layout
<a name="repeater-component-properties-layout"></a>

Im Abschnitt **Layout** können Sie die Anordnung der wiederholten Elemente innerhalb der Repeater-Komponente konfigurieren.

##### Ausrichtung
<a name="repeater-component-properties-orientation"></a>
+ **Liste**: Ordnet die wiederholten Elemente vertikal in einer einzigen Spalte an.
+ **Raster**: Ordnet die wiederholten Elemente in einem Rasterlayout mit mehreren Spalten an.

##### Zeilen pro Seite
<a name="repeater-component-properties-rows-per-page"></a>

Geben Sie die Anzahl der Zeilen an, die pro Seite im Listenlayout angezeigt werden sollen. Die Seitennummerierung ist für Elemente vorgesehen, bei denen die angegebene Zeilenanzahl überschritten wird.

##### Spalten und Zeilen pro Seite (Raster)
<a name="columns-and-rows-per-page-grid"></a>
+ **Spalten**: Geben Sie die Anzahl der Spalten im Rasterlayout an.
+ **Zeilen pro Seite**: Geben Sie die Anzahl der Zeilen an, die pro Seite im Rasterlayout angezeigt werden sollen. Die Seitennummerierung ist für Elemente vorgesehen, die die angegebenen Rastermaße überschreiten.

#### Ausdrücke und Beispiele
<a name="repeater-component-properties-expressions"></a>

Die **Repeater-Komponente** bietet verschiedene Ausdrucksfelder, mit denen Sie Daten innerhalb der Komponente dynamisch referenzieren und anzeigen können. Mit diesen Ausdrücken können Sie benutzerdefinierte und interaktive **Repeater-Komponenten** erstellen, die sich nahtlos mit den Daten und der Logik Ihrer Anwendung verbinden.

##### Beispiel: Elemente referenzieren
<a name="repeater-component-properties-expressions-examples-referencing-items"></a>
+ `{{currentItem.propertyName}}`: Referenzeigenschaften oder Werte des aktuellen Elements in der **Artikelvorlage**.
+ `{{ui.repeaterID[index]}}`: Verweisen Sie anhand seines Indexes auf ein bestimmtes Element in der Repeater-Komponente.

##### Beispiel: Rendern einer Produktliste
<a name="repeater-component-properties-expressions-examples-rendering-product-list"></a>
+ **Quelle**: Wählen Sie die *Products* Entität als Datenquelle aus.
+ **Artikelvorlage**: Fügen Sie eine **Container-Komponente** mit einer **Textkomponente** hinzu, um den Produktnamen (`{{currentItem.productName}}`) anzuzeigen, und eine **Bildkomponente**, um das Produktbild anzuzeigen (`{{currentItem.productImageUrl}}`).
+ **Layout**: Stellen Sie den Wert `Orientation` auf ein `List` und passen Sie ihn `Rows per Page` wie gewünscht an.

##### Beispiel: Generieren eines Rasters mit Benutzer-Avataren
<a name="repeater-component-properties-expressions-examples-generating-user-avatar-grid"></a>
+ **Quelle**: Verwenden Sie einen Ausdruck, um ein Array von Benutzerdaten zu generieren (z. B.`[{name: 'John', avatarUrl: '...'}, {...}, {...}]`).
+ **Elementvorlage**: Fügen Sie eine **Image-Komponente** hinzu und legen Sie ihre `Source` Eigenschaft auf fest`{{currentItem.avatarUrl}}`.
+ **Layout**: Stellen Sie den Wert `Orientation` auf ein`Grid`, geben Sie die Anzahl von `Columns` und `Rows per Page` an und passen Sie den Wert `Space Between` und nach `Padding` Bedarf an.

Mithilfe der `Repeater` Komponente können Sie dynamische und datengesteuerte Benutzeroberflächen erstellen, wodurch das Rendern von Elementsammlungen rationalisiert und die Notwendigkeit manueller Wiederholungen oder hartes Codieren reduziert wird.

### Formular
<a name="form-component"></a>

Die Formularkomponente wurde entwickelt, um Benutzereingaben zu erfassen und Dateneingabeaufgaben in Ihrer Anwendung zu erleichtern. Sie bietet ein strukturiertes Layout für die Anzeige von Eingabefeldern, Dropdowns, Kontrollkästchen und anderen Formularsteuerelementen, sodass Benutzer Daten nahtlos eingeben oder ändern können. Sie können andere Komponenten innerhalb einer Formularkomponente, z. B. einer Tabelle, verschachteln.

#### Eigenschaften von Formularen
<a name="form-component-properties"></a>

Die **Formularkomponente** hat mehrere gemeinsame Eigenschaften mit anderen Komponenten gemeinsam, z. B. `Name``Source`, und`Actions`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

#### Formular generieren
<a name="form-component-properties-generate-form"></a>

Die Funktion „**Formular generieren**“ erleichtert das schnelle Erstellen von Formularfeldern, indem sie automatisch auf der Grundlage einer ausgewählten Datenquelle ausgefüllt werden. Dies kann Zeit und Mühe bei der Erstellung von Formularen sparen, die eine große Anzahl von Feldern anzeigen müssen.

**So verwenden Sie die Funktion „**Formular generieren**“:**

1. Suchen Sie in den Eigenschaften der **Formularkomponente** nach dem Abschnitt **Formular generieren**.

1. Wählen Sie die Datenquelle aus, die Sie zum Generieren der Formularfelder verwenden möchten. Dies kann eine Entität, ein Workflow oder eine andere in Ihrer Anwendung verfügbare Datenquelle sein.

1. Die Formularfelder werden automatisch auf der Grundlage der ausgewählten Datenquelle generiert, einschließlich der Feldbezeichnungen, Typen und Datenzuordnungen.

1. Überprüfen Sie die generierten Felder und nehmen Sie alle erforderlichen Anpassungen vor, z. B. das Hinzufügen von Validierungsregeln oder das Ändern der Feldreihenfolge.

1. Wenn Sie mit der Formularkonfiguration zufrieden sind, wählen Sie **Senden** aus, um die generierten Felder auf Ihre **Formularkomponente** anzuwenden.

Die Funktion „**Formular generieren**“ ist besonders nützlich, wenn Sie ein klar definiertes Datenmodell oder eine Reihe von Entitäten in Ihrer Anwendung haben, für die Sie Benutzereingaben erfassen müssen. Durch die automatische Generierung der Formularfelder können Sie Zeit sparen und die Konsistenz aller Formulare Ihrer Anwendung sicherstellen.

Nachdem Sie die Funktion „**Formular generieren**“ verwendet haben, können Sie das Layout, die Aktionen und Ausdrücke für die **Formularkomponente** weiter an Ihre spezifischen Anforderungen anpassen.

#### Ausdrücke und Beispiele
<a name="form-component-properties-expressions"></a>

Wie bei anderen Komponenten können Sie Ausdrücke verwenden, um Daten innerhalb der **Form-Komponente** zu referenzieren und anzuzeigen. Beispiel:
+ `{{ui.userForm.data.email}}`: Verweist auf den Wert des `email` Felds aus der Datenquelle, die mit der **Form-Komponente** mit der ID verbunden ist`userForm`.

**Anmerkung**  
Weitere Ausdrucksbeispiele [Allgemeine Eigenschaften von Komponenten](#common-properties) für die allgemeinen Eigenschaften finden Sie unter.

Durch die Konfiguration dieser Eigenschaften und die Nutzung von Ausdrücken können Sie benutzerdefinierte und interaktive Formularkomponenten erstellen, die sich nahtlos in die Datenquellen und die Logik Ihrer Anwendung integrieren lassen. Diese Komponenten können verwendet werden, um Benutzereingaben zu erfassen, vorab ausgefüllte Daten anzuzeigen und Aktionen auf der Grundlage von Formularübermittlungen oder Benutzerinteraktionen auszulösen.

### Stepflow
<a name="stepflow-component"></a>

Die **Stepflow-Komponente** wurde entwickelt, um Benutzer durch mehrstufige Prozesse oder Workflows innerhalb Ihrer Anwendung zu führen. Sie bietet eine strukturierte und intuitive Oberfläche zur Darstellung einer Abfolge von Schritten mit jeweils eigenen Eingaben, Validierungen und Aktionen.

Die Stepflow-Komponente hat mehrere gemeinsame Eigenschaften mit anderen Komponenten wie`Name`, und`Source`. `Actions` Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Die **Stepflow-Komponente** verfügt über zusätzliche Eigenschaften und Konfigurationsoptionen wie `Step Navigation``Validation`, und`Expressions`.

## KI-Komponenten
<a name="ai-components"></a>

### KI der Generation
<a name="genai-component"></a>

Die **Gen AI-Komponente** ist ein Gruppierungscontainer, der verwendet wird, um Komponenten und ihre zugehörige Logik zu gruppieren, um sie mithilfe des Chats im Anwendungsstudio einfach mit KI zu bearbeiten. Wenn Sie den Chat verwenden, um Komponenten zu erstellen, werden diese in einem **Gen AI-Container** gruppiert. Informationen zur Bearbeitung oder Verwendung dieser Komponente finden Sie unter[Ihre App erstellen oder bearbeiten](generative-ai.md#generative-ai-build-app).

## Text- und Zahlenkomponenten
<a name="text-and-number-components"></a>

### Texteingabe
<a name="text-input-component"></a>

Die **Texteingabekomponente** ermöglicht es Benutzern, Textdaten in Ihrer Anwendung einzugeben und zu senden. Sie bietet eine einfache und intuitive Möglichkeit, Benutzereingaben wie Namen, Adressen oder andere Textinformationen zu erfassen.
+ `{{ui.inputTextID.value}}`: Gibt den angegebenen Wert im Eingabefeld zurück.
+ `{{ui.inputTextID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im Eingabefeld zurück.

### Text
<a name="text-component"></a>

Die **Textkomponente** wird verwendet, um Textinformationen in Ihrer Anwendung anzuzeigen. Sie kann verwendet werden, um statischen Text, dynamische Werte oder aus Ausdrücken generierte Inhalte anzuzeigen.

### Textbereich
<a name="text-area-component"></a>

Die **Textbereichskomponente** wurde entwickelt, um mehrzeilige Texteingaben von Benutzern zu erfassen. Sie bietet Benutzern einen größeren Eingabefeldbereich, in den sie längere Texteinträge wie Beschreibungen, Notizen oder Kommentare eingeben können.
+ `{{ui.textAreaID.value}}`: Gibt den angegebenen Wert im Textbereich zurück.
+ `{{ui.textAreaID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im Textbereich zurück.

### Email
<a name="email-component"></a>

Die **E-Mail-Komponente** ist ein spezielles Eingabefeld zur Erfassung von E-Mail-Adressen von Benutzern. Es kann spezifische Validierungsregeln durchsetzen, um sicherzustellen, dass der eingegebene Wert dem richtigen E-Mail-Format entspricht.
+ `{{ui.emailID.value}}`: Gibt den angegebenen Wert im E-Mail-Eingabefeld zurück.
+ `{{ui.emailID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im E-Mail-Eingabefeld zurück.

### Passwort
<a name="password-component"></a>

Die **Passwort-Komponente** ist ein Eingabefeld, das speziell für Benutzer zur Eingabe vertraulicher Informationen wie Passwörter oder PIN-Codes konzipiert wurde. Es maskiert die eingegebenen Zeichen, um Datenschutz und Sicherheit zu gewährleisten.
+ `{{ui.passwordID.value}}`: Gibt den angegebenen Wert im Passwort-Eingabefeld zurück.
+ `{{ui.passwordID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im Passwort-Eingabefeld zurück.

### Suchen
<a name="search-component"></a>

Die **Suchkomponente** bietet Benutzern ein spezielles Eingabefeld für die Durchführung von Suchanfragen oder die Eingabe von Suchbegriffen innerhalb der ausgefüllten Daten innerhalb der Anwendung.
+ `{{ui.searchID.value}}`: Gibt den angegebenen Wert im Suchfeld zurück.

### Phone
<a name="phone-component"></a>

Die **Telefonkomponente** ist ein Eingabefeld, das auf die Erfassung von Telefonnummern oder anderen Kontaktinformationen von Benutzern zugeschnitten ist. Es kann spezielle Validierungsregeln und Formatierungsoptionen enthalten, um sicherzustellen, dass der eingegebene Wert dem richtigen Telefonnummernformat entspricht.
+ `{{ui.phoneID.value}}`: Gibt den angegebenen Wert im Telefoneingabefeld zurück.
+ `{{ui.phoneID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im Telefoneingabefeld zurück.

### Zahl
<a name="number-component"></a>

Die **Zahlenkomponente** ist ein Eingabefeld, das speziell für Benutzer zur Eingabe numerischer Werte konzipiert wurde. Es kann Validierungsregeln durchsetzen, um sicherzustellen, dass der eingegebene Wert eine gültige Zahl innerhalb eines bestimmten Bereichs oder Formats ist.
+ `{{ui.numberID.value}}`: Gibt den angegebenen Wert im Zahleneingabefeld zurück.
+ `{{ui.numberID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im Zahleneingabefeld zurück.

### Währung
<a name="currency-component"></a>

Die **Währungskomponente** ist ein spezielles Eingabefeld zur Erfassung von Geldwerten oder Beträgen. Es kann Formatierungsoptionen zur Anzeige von Währungssymbolen und Dezimaltrennzeichen sowie zur Durchsetzung spezifischer Validierungsregeln für Währungseingaben enthalten.
+ `{{ui.currencyID.value}}`: Gibt den angegebenen Wert im Währungseingabefeld zurück.
+ `{{ui.currencyID.isValid}}`: Gibt die Gültigkeit des angegebenen Werts im Währungseingabefeld zurück.

### Detailpaar
<a name="detail-pair-component"></a>

Die **Detailpaar-Komponente** wird verwendet, um Schlüssel-Wert-Paare oder Paare verwandter Informationen in einem strukturierten und lesbaren Format anzuzeigen. Sie wird häufig verwendet, um Details oder Metadaten zu präsentieren, die einem bestimmten Element oder einer bestimmten Entität zugeordnet sind.

## Komponenten für die Auswahl
<a name="selection-components"></a>

### Switch
<a name="switch-component"></a>

Bei der **Switch-Komponente** handelt es sich um ein Steuerelement auf der Benutzeroberfläche, mit dem Benutzer zwischen zwei Status oder Optionen wechseln können, z. B. on/off, true/false, or enabled/disabled Sie bietet eine visuelle Darstellung des aktuellen Status und ermöglicht es Benutzern, ihn mit einem einzigen Klick oder Tippen zu ändern.

### Gruppe wechseln
<a name="switch-group-component"></a>

Die **Switch-Gruppenkomponente** ist eine Sammlung einzelner Switch-Steuerelemente, mit denen Benutzer eine oder mehrere Optionen aus einem vordefinierten Satz auswählen können. Sie bietet eine visuelle Darstellung der ausgewählten und nicht ausgewählten Optionen, sodass Benutzer die verfügbaren Optionen leichter verstehen und mit ihnen interagieren können.

#### Zwischen Feldern für Gruppenausdrücke wechseln
<a name="switch-group-expression-fields"></a>
+ `{{ui.switchGroupID.value}}`: Gibt ein Array von Zeichenketten zurück, die den Wert jedes Schalters enthalten, der vom App-Benutzer aktiviert wurde.

### Checkbox-Gruppe
<a name="checkbox-group-component"></a>

Die **Checkbox-Gruppenkomponente** bietet Benutzern eine Gruppe von Kontrollkästchen, sodass sie mehrere Optionen gleichzeitig auswählen können. Dies ist nützlich, wenn Sie Benutzern die Möglichkeit geben möchten, ein oder mehrere Elemente aus einer Liste von Optionen auszuwählen.

#### Ausdrucksfelder für Checkbox-Gruppen
<a name="checkbox-group-expression-fields"></a>
+ `{{ui.checkboxGroupID.value}}`: Gibt ein Array von Zeichenketten zurück, die den Wert aller vom App-Benutzer ausgewählten Kontrollkästchen enthalten.

### Radio-Gruppe
<a name="radio-group-component"></a>

Die **Optionsgruppenkomponente** besteht aus einer Reihe von Optionsfeldern, mit denen Benutzer eine einzelne Option aus mehreren sich gegenseitig ausschließenden Optionen auswählen können. Sie stellt sicher, dass jeweils nur eine Option ausgewählt werden kann, und bietet Benutzern so eine klare und eindeutige Möglichkeit, eine Auswahl zu treffen.

#### Ausdrucksfelder für Funkgruppen
<a name="radio-group-expression-fields"></a>

Die folgenden Felder können in Ausdrücken verwendet werden.
+ `{{ui.radioGroupID.value}}`: Gibt den Wert des Optionsfeldes zurück, das vom App-Benutzer ausgewählt wurde.

### Einzelauswahl
<a name="single-select-component"></a>

Die **Einzelauswahl-Komponente** bietet Benutzern eine Liste von Optionen, aus denen sie ein einzelnes Element auswählen können. Sie wird häufig in Szenarien verwendet, in denen Benutzer eine Auswahl aus einem vordefinierten Satz von Optionen treffen müssen, z. B. die Auswahl einer Kategorie, eines Standorts oder einer Präferenz.

#### Ausdrucksfelder mit einfacher Auswahl
<a name="single-select-expression-fields"></a>
+ `{{ui.singleSelectID.value}}`: Gibt den Wert des Listenelements zurück, das vom App-Benutzer ausgewählt wurde.

### Mehrfachauswahl
<a name="multi-select-component"></a>

Die **Mehrfachauswahl-Komponente** ähnelt der **Einzelauswahl-Komponente**, ermöglicht es Benutzern jedoch, mehrere Optionen gleichzeitig aus einer Auswahlliste auszuwählen. Sie ist nützlich, wenn Benutzer mehrere Auswahlen aus einem vordefinierten Satz von Optionen treffen müssen, z. B. die Auswahl mehrerer Stichwörter, Interessen oder Präferenzen.

#### Ausdrucksfelder mit Mehrfachauswahl
<a name="multi-select-expression-fields"></a>
+ `{{ui.multiSelectID.value}}`: Gibt ein Array von Zeichenketten zurück, die den Wert jedes Listenelements enthalten, das vom App-Benutzer ausgewählt wurde.

## Schaltflächen und Navigationskomponenten
<a name="buttons-and-navigation-components"></a>

Das Anwendungsstudio bietet eine Vielzahl von Schaltflächen und Navigationskomponenten, mit denen Benutzer Aktionen auslösen und innerhalb Ihrer Anwendung navigieren können.

### Komponenten für Schaltflächen
<a name="button-components"></a>

Die verfügbaren Schaltflächenkomponenten sind:
+ Button
+ Umrissene Schaltfläche
+ Icon-Schaltfläche
+ Schaltfläche „Text“

Diese Schaltflächenkomponenten haben die folgenden gemeinsamen Eigenschaften:

#### Inhalt
<a name="button-content"></a>
+ **Tastenbezeichnung**: Der Text, der auf der Schaltfläche angezeigt werden soll.

#### Typ
<a name="button-type"></a>
+ **Taste**: Eine Standardtaste.
+ **Umrissen**: Eine Schaltfläche mit einem konturierten Stil.
+ **Symbol**: Eine Schaltfläche mit einem Symbol.
+ **Text**: Eine Schaltfläche, die nur Text enthält.

#### Größe
<a name="button-size"></a>

Die Größe der Schaltfläche. Mögliche Werte sind `Small`, `Medium` und `Large`.

#### Symbol
<a name="button-icon"></a>

Sie können aus einer Vielzahl von Symbolen wählen, die auf der Schaltfläche angezeigt werden sollen, darunter:
+ Umschlag geschlossen
+ Glocke
+ Person
+ Hamburger-Menü
+ Suchen
+ Informationen eingekreist
+ Ausrüstung
+ Chevron links
+ Chevron Rechts
+ Horizontale Punkte
+ Papierkorb
+ Bearbeiten
+ Check
+ Schließen
+ Startseite
+ Plus

#### Auslöser
<a name="button-triggers"></a>

Wenn auf die Schaltfläche geklickt wird, können Sie eine oder mehrere Aktionen konfigurieren, die ausgelöst werden sollen. Die verfügbaren Aktionstypen sind:
+ **Basic**
  + Komponentenaktion ausführen: Führt eine bestimmte Aktion innerhalb einer Komponente aus.
  + Navigieren: Navigiert zu einer anderen Seite oder Ansicht.
  + Datenaktion aufrufen: Löst eine datenbezogene Aktion aus, z. B. das Erstellen, Aktualisieren oder Löschen eines Datensatzes.
+ **Advanced**
  + JavaScript: Führt benutzerdefinierten JavaScript Code aus.
  + Automatisierung aufrufen: Startet eine bestehende Automatisierung oder einen bestehenden Workflow.

#### JavaScript Eigenschaften der Aktionsschaltfläche
<a name="button-examples-javascript"></a>

Wählen Sie den `JavaScript` Aktionstyp aus, um benutzerdefinierten JavaScript Code auszuführen, wenn auf die Schaltfläche geklickt wird.

##### Quellcode
<a name="button-source-code"></a>

In das `Source code` Feld können Sie Ihren JavaScript Ausdruck oder Ihre Funktion eingeben. Beispiel:

```
return "Hello World";
```

Dadurch wird einfach die Zeichenfolge zurückgegeben`Hello World`, wenn auf die Schaltfläche geklickt wird.

##### Bedingung: Führen Sie aus, wenn
<a name="button-run-if"></a>

Sie können auch einen booleschen Ausdruck angeben, der bestimmt, ob die JavaScript Aktion ausgeführt werden soll oder nicht. Für dieses Tag gilt folgende Syntax:

```
{{ui.textinput1.value !== ""}}
```

In diesem Beispiel wird die JavaScript Aktion nur ausgeführt, wenn der Wert der `textinput1` Komponente keine leere Zeichenfolge ist.

Mithilfe dieser erweiterten Triggeroptionen können Sie hochgradig angepasste Tastenverhaltensweisen erstellen, die sich direkt in die Logik und die Daten Ihrer Anwendung integrieren lassen. Auf diese Weise können Sie die integrierte Funktionalität der Schaltflächen erweitern und die Benutzererfahrung an Ihre spezifischen Anforderungen anpassen.

**Anmerkung**  
Testen Sie Ihre JavaScript Aktionen immer gründlich, um sicherzustellen, dass sie wie erwartet funktionieren.

### Hyperlink
<a name="hyperlink-component"></a>

Die **Hyperlink-Komponente** bietet einen anklickbaren Link für die Navigation zu externen URLs oder internen Anwendungsrouten.

#### Eigenschaften von Hyperlinks
<a name="hyperlink-properties"></a>

##### Inhalt
<a name="hyperlink-properties-content"></a>
+ **Hyperlink-Bezeichnung**: Der Text, der als Hyperlink-Label angezeigt werden soll.

##### URL
<a name="hyperlink-properties-url"></a>

Die Ziel-URL für den Hyperlink, bei der es sich um eine externe Website oder eine interne Anwendungsroute handeln kann.

##### Auslöser
<a name="hyperlink-properties-triggers"></a>

Wenn auf den Hyperlink geklickt wird, können Sie konfigurieren, dass eine oder mehrere Aktionen ausgelöst werden. Die verfügbaren Aktionstypen sind dieselben wie für die Schaltflächenkomponenten.

## Komponenten für Datum und Uhrzeit
<a name="date-and-time-components"></a>

### Date
<a name="date-component"></a>

Die **Datumskomponente** ermöglicht es Benutzern, Daten auszuwählen und einzugeben.

Die **Datumskomponente** hat mehrere gemeinsame Eigenschaften mit anderen Komponenten gemeinsam, z. B. `Name``Source`, und`Validation`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Zusätzlich zu den allgemeinen Eigenschaften hat die **Date-Komponente** die folgenden spezifischen Eigenschaften:

#### Eigenschaften des Datums
<a name="date-component-properties"></a>

##### Format
<a name="date-component-properties-format"></a>
+ **YYYY/MM/DD**, **DD/MM/YYYY**,, **YYYY/MM/DD**YYYY/DD/MM****, **MM/DD****, TT/MM**: Das Format, in dem das Datum angezeigt werden soll.

##### Wert
<a name="date-component-properties-value"></a>
+ **YYYY-MM-DD**: Das Format, in dem der Datumswert intern gespeichert wird.

##### Minimales Datum
<a name="date-component-properties-min-date"></a>
+ **YYYY-MM-DD**: Das Mindestdatum, das ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `YYYY-MM-DD`

##### Maximales Datum
<a name="date-component-properties-max-date"></a>
+ **YYYY-MM-DD**: Das maximale Datum, das ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `YYYY-MM-DD`

##### Typ des Kalenders
<a name="date-component-properties-calendar-type"></a>
+ **1 Monat**, **2 Monate**: Die Art der anzuzeigenden Kalenderbenutzeroberfläche.

##### Deaktivierte Daten
<a name="date-component-properties-disabled-dates"></a>
+ **Quelle**: Die Datenquelle für die Daten, die deaktiviert werden sollten. Zum Beispiel: Keine, Ausdruck.
+ **Deaktivierte Daten**: Ein Ausdruck, der bestimmt, welche Daten deaktiviert werden sollen, z. B.:
  + `{{currentRow.column}}`: Deaktiviert Daten, die dem entsprechen, was dieser Ausdruck ergibt.
  + `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`: Deaktiviert Daten vor dem 1. Januar 2023
  + `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`: Deaktiviert Wochenenden.

##### Behavior
<a name="date-component-properties-behavior"></a>
+ **Sichtbar wenn**: Ein Ausdruck, der die Sichtbarkeit der **Date-Komponente** bestimmt.
+ **Deaktivieren wenn**: Ein Ausdruck, der bestimmt, ob die **Datumskomponente** deaktiviert werden soll.

#### Validierung
<a name="date-component-properties-validation"></a>

Im Abschnitt **Validierung** können Sie zusätzliche Regeln und Einschränkungen für die Datumseingabe definieren. Durch die Konfiguration dieser Validierungsregeln können Sie sicherstellen, dass die von Benutzern eingegebenen Datumswerte den spezifischen Anforderungen Ihrer Anwendung entsprechen. Sie können die folgenden Arten von Validierungen hinzufügen:
+ **Erforderlich**: Dieser Schalter stellt sicher, dass der Benutzer vor dem Absenden des Formulars einen Datumswert eingeben muss.
+ **Benutzerdefiniert**: Sie können mithilfe von JavaScript Ausdrücken benutzerdefinierte Validierungsregeln erstellen. Beispiel:

  ```
  {{new Date(ui.dateInput.value) < new Date("2023-01-01")}}
  ```

  Dieser Ausdruck überprüft, ob das eingegebene Datum vor dem 1. Januar 2023 liegt. Wenn die Bedingung erfüllt ist, schlägt die Überprüfung fehl.

  Sie können auch eine benutzerdefinierte Bestätigungsnachricht angeben, die angezeigt wird, wenn die Überprüfung nicht erfüllt ist:

  ```
  "Validation not met. The date must be on or after January 1, 2023."
  ```

Durch die Konfiguration dieser Validierungsregeln können Sie sicherstellen, dass die von Benutzern eingegebenen Datumswerte den spezifischen Anforderungen Ihrer Anwendung entsprechen.

#### Ausdrücke und Beispiele
<a name="date-component-expressions"></a>

Die **Date-Komponente** stellt das folgende Ausdrucksfeld bereit:
+ `{{ui.dateID.value}}`: Gibt den vom Benutzer eingegebenen Datumswert im Format zurück`YYYY-MM-DD`.

### Zeit
<a name="time-component"></a>

Die **Zeitkomponente** ermöglicht es Benutzern, Zeitwerte auszuwählen und einzugeben. Durch die Konfiguration der verschiedenen Eigenschaften der **Zeitkomponente** können Sie Zeiteingabefelder erstellen, die den spezifischen Anforderungen Ihrer Anwendung entsprechen, z. B. die Einschränkung des auswählbaren Zeitbereichs, die Deaktivierung bestimmter Zeiten und die Steuerung der Sichtbarkeit und Interaktivität der Komponente.

#### Eigenschaften der Uhrzeit
<a name="time-component-properties"></a>

Die **Zeitkomponente** weist mehrere gemeinsame Eigenschaften mit anderen Komponenten auf, z. B. `Name``Source`, und`Validation`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Zusätzlich zu den allgemeinen Eigenschaften hat die **Time-Komponente** die folgenden spezifischen Eigenschaften:

##### Zeitintervalle
<a name="time-component-properties-time-intervals"></a>
+ **5 Minuten**, **10 Minuten**, **15 Minuten, 20 Minuten****, 25 Minuten****, 30 Minuten****, **60 Minuten****: Die Intervalle, die für die Auswahl der Uhrzeit zur Verfügung stehen.

##### Wert
<a name="time-component-properties-value"></a>
+ **HH:MM AA**: Das Format, in dem der Zeitwert intern gespeichert wird.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `HH:MM AA`

##### Placeholder
<a name="time-component-properties-placeholder"></a>
+ **Kalendereinstellungen**: Der Platzhaltertext, der angezeigt wird, wenn das Zeitfeld leer ist.

##### Minimale Uhrzeit
<a name="time-component-properties-min-time"></a>
+ **HH:MM AA**: Die Mindestzeit, die ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `HH:MM AA`

##### Max. Zeit
<a name="time-component-properties-max-time"></a>
+ **HH:MM AA**: Die maximale Zeit, die ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `HH:MM AA`

##### Deaktivierte Zeiten
<a name="time-component-properties-disabled-times"></a>
+ **Quelle**: Die Datenquelle für die Zeiten, die deaktiviert werden sollen (z. B. None, Expression).
+ **Deaktivierte Zeiten**: Ein Ausdruck, der bestimmt, welche Zeiten deaktiviert werden sollen, z. `{{currentRow.column}}` B.

##### Konfiguration für deaktivierte Zeiten
<a name="disabled-times-configuration"></a>

Im Bereich **Deaktivierte Zeiten** können Sie angeben, welche Zeitwerte nicht zur Auswahl stehen sollen.

##### Quelle
<a name="disabled-times-configuration-source"></a>
+ **Keine**: Es sind keine Zeiten deaktiviert.
+ **Ausdruck**: Sie können einen JavaScript Ausdruck verwenden, um zu bestimmen, welche Zeiten deaktiviert werden sollen, z. `{{currentRow.column}}` B.

##### Beispielausdruck:
<a name="disabled-times-configuration-expression-example"></a>

```
{{currentRow.column === "Lunch Break"}}
```

Dieser Ausdruck würde jedes Mal deaktivieren, wenn die Spalte „Lunch Break“ für die aktuelle Zeile den Wert true hat.

Durch die Konfiguration dieser Validierungsregeln und die Deaktivierung von Zeitausdrücken können Sie sicherstellen, dass die von den Benutzern eingegebenen Zeitwerte den spezifischen Anforderungen Ihrer Anwendung entsprechen.

##### Behavior
<a name="time-component-properties-behavior"></a>
+ **Sichtbar wenn**: Ein Ausdruck, der die Sichtbarkeit der Zeitkomponente bestimmt.
+ **Deaktivieren wenn**: Ein Ausdruck, der bestimmt, ob die Zeitkomponente deaktiviert werden soll.

##### Validierung
<a name="time-component-properties-validation"></a>
+ **Erforderlich**: Ein Schalter, der sicherstellt, dass der Benutzer vor dem Absenden des Formulars einen Zeitwert eingeben muss.
+ **Benutzerdefiniert**: Ermöglicht das Erstellen benutzerdefinierter Validierungsregeln mithilfe von JavaScript Ausdrücken.

  **Benutzerdefinierte Bestätigungsnachricht**: Die Meldung, die angezeigt werden soll, wenn die benutzerdefinierte Überprüfung nicht erfüllt ist.

Beispiel:

```
{{ui.timeInput.value === "09:00 AM" || ui.timeInput.value === "09:30 AM"}}
```

Dieser Ausdruck überprüft, ob die eingegebene Uhrzeit 9:00 Uhr oder 9:30 Uhr ist. Wenn die Bedingung erfüllt ist, schlägt die Überprüfung fehl.

Sie können auch eine benutzerdefinierte Bestätigungsnachricht angeben, die angezeigt wird, wenn die Überprüfung nicht erfüllt ist:

```
Validation not met. The time must be 9:00 AM or 9:30 AM.
```

#### Ausdrücke und Beispiele
<a name="time-component-expressions"></a>

Die Time-Komponente stellt das folgende Ausdrucksfeld bereit:
+ `{{ui.timeID.value}}`: Gibt den vom Benutzer eingegebenen Zeitwert im Format HH:MM AA zurück.

##### Beispiel: Zeitwert
<a name="time-component-expressions-examples-time-value"></a>
+ `{{ui.timeID.value}}`: Gibt den vom Benutzer eingegebenen Zeitwert im Format zurück`HH:MM AA`.

##### Beispiel: Zeitvergleich
<a name="time-component-expressions-examples-time-comparison"></a>
+ `{{ui.timeInput.value > "10:00 AM"}}`: Prüft, ob der Zeitwert größer als 10:00 Uhr ist.
+ `{{ui.timeInput.value < "05:00 pM"}}`: Prüft, ob der Zeitwert unter 17:00 Uhr liegt.

### Datumsbereich
<a name="date-range-component"></a>

Mit der Komponente „**Datumsbereich**“ können Benutzer einen Datumsbereich auswählen und eingeben. Durch die Konfiguration der verschiedenen Eigenschaften der Komponente „Datumsbereich“ können Sie Eingabefelder für den Datumsbereich erstellen, die den spezifischen Anforderungen Ihrer Anwendung entsprechen, z. B. die Einschränkung des auswählbaren Datumsbereichs, die Deaktivierung bestimmter Daten und die Steuerung der Sichtbarkeit und Interaktivität der Komponente.

#### Eigenschaften des Datumsbereichs
<a name="date-range-component-properties"></a>

Die Komponente „**Datumsbereich**“ hat mehrere gemeinsame Eigenschaften mit anderen Komponenten gemeinsam`Name`, z. B.`Source`, und`Validation`. Weitere Informationen zu diesen Eigenschaften finden Sie unter[Allgemeine Eigenschaften von Komponenten](#common-properties).

Zusätzlich zu den allgemeinen Eigenschaften hat die Komponente **Date Range** die folgenden spezifischen Eigenschaften:

##### Format
<a name="date-range-component-properties-format"></a>
+ **MM/DD/YYYY**: Das Format, in dem der Datumsbereich angezeigt werden soll.

##### Startdatum
<a name="date-range-component-properties-start-date"></a>
+ **YYYY-MM-DD**: Das Mindestdatum, das als Anfang des Bereichs ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `YYYY-MM-DD`

##### Enddatum
<a name="date-range-component-properties-end-date"></a>
+ **YYYY-MM-DD**: Das maximale Datum, das als Ende des Bereichs ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `YYYY-MM-DD`

##### Placeholder
<a name="date-range-component-properties-placeholder"></a>
+ **Kalendereinstellungen**: Der Platzhaltertext, der angezeigt wird, wenn das Datumsbereichsfeld leer ist.

##### Minimales Datum
<a name="date-range-component-properties-min-date"></a>
+ **YYYY-MM-DD**: Das Mindestdatum, das ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `YYYY-MM-DD`

##### Maximales Datum
<a name="date-range-component-properties-max-date"></a>
+ **YYYY-MM-DD**: Das maximale Datum, das ausgewählt werden kann.
**Anmerkung**  
Dieser Wert muss dem Format von entsprechen. `YYYY-MM-DD`

##### Typ des Kalenders
<a name="date-range-component-properties-calendar-type"></a>
+ **1 Monat**: Die Art der anzuzeigenden Kalenderbenutzeroberfläche. Zum Beispiel ein einzelner Monat.
+ **2 Monate**: Der Typ der anzuzeigenden Kalenderbenutzeroberfläche. Zum Beispiel zwei Monate.

##### Obligatorische Tage ausgewählt
<a name="date-range-component-properties-mandatory-days-selected"></a>
+ **0**: Die Anzahl der obligatorischen Tage, die innerhalb des Datumsbereichs ausgewählt werden müssen.

##### Deaktivierte Daten
<a name="date-range-component-properties-disabled-dates"></a>
+ **Quelle**: Die Datenquelle für die Daten, die deaktiviert werden sollen (z. B. Keine, Ausdruck, Entität oder Automatisierung).
+ **Deaktivierte Daten**: Ein Ausdruck, der bestimmt, welche Daten deaktiviert werden sollen, z. `{{currentRow.column}}` B.

##### Validierung
<a name="date-range-component-properties-validation"></a>

Im Abschnitt **Validierung** können Sie zusätzliche Regeln und Einschränkungen für die Eingabe des Datumsbereichs definieren.

#### Ausdrücke und Beispiele
<a name="date-range-component-expressions"></a>

Die Komponente „**Datumsbereich**“ stellt die folgenden Ausdrucksfelder bereit:
+ `{{ui.dateRangeID.startDate}}`: Gibt das Startdatum des ausgewählten Bereichs im Format zurück`YYYY-MM-DD`.
+ `{{ui.dateRangeID.endDate}}`: Gibt das Enddatum des ausgewählten Bereichs im Format zurück`YYYY-MM-DD`.

##### Beispiel: Berechnung der Datumsdifferenz
<a name="date-range-component-expressions-examples-calculating-date-difference"></a>
+ `{(new Date(ui.dateRangeID.endDate) - new Date(ui.dateRangeID.startDate)) / (1000 * 60 * 60 * 24)}}`Berechnet die Anzahl der Tage zwischen dem Start- und dem Enddatum.

##### Beispiel: Bedingte Sichtbarkeit basierend auf dem Datumsbereich
<a name="date-range-component-expressions-examples-conditional-visibility-based-on-date-range"></a>
+ `{{new Date(ui.dateRangeID.startDate) < new Date("2023-01-01") || new Date(ui.dateRangeID.endDate) > new Date("2023-12-31")}}`Prüft, ob der ausgewählte Datumsbereich außerhalb des Jahres 2023 liegt.

##### Beispiel: Deaktivierte Datumsangaben basierend auf aktuellen Zeilendaten
<a name="date-range-component-expressions-examples-disabled-dates-based-on-current-row-data"></a>
+ `{{currentRow.isHoliday}}`Deaktiviert Daten, bei denen die Spalte „IsHoliday“ in der aktuellen Zeile den Wert true hat.
+ `{{new Date(currentRow.dateColumn) < new Date("2023-01-01")}}`Deaktiviert Daten vor dem 1. Januar 2023 basierend auf der „DateColumn“ in der aktuellen Zeile.
+ `{{new Date(currentRow.dateColumn).getDay() === 0 || new Date(currentRow.dateColumn).getDay() === 6}}`Deaktiviert Wochenenden basierend auf der „DateColumn“ in der aktuellen Zeile.

##### Benutzerdefinierte Validierung
<a name="date-range-component-expressions-examples-custom-validation"></a>
+ `{{new Date(ui.dateRangeID.startDate) > new Date(ui.dateRangeID.endDate)}}`Prüft, ob das Startdatum nach dem Enddatum liegt. Andernfalls würde die benutzerdefinierte Validierung fehlschlagen.

## Medienkomponenten
<a name="media-components"></a>

Das Anwendungsstudio bietet mehrere Komponenten zum Einbetten und Anzeigen verschiedener Medientypen in Ihrer Anwendung.

### iFrame einbetten
<a name="iframe-embed-component"></a>

Mit der **iFrame-Einbettungskomponente** können Sie externe Webinhalte oder Anwendungen mithilfe eines iFrames in Ihre Anwendung einbetten.

#### Eigenschaften zum Einbetten von iFrames
<a name="iframe-embed-properties"></a>

##### URL
<a name="iframe-embed-properties-iframe-url"></a>

**Anmerkung**  
Die Quelle der in dieser Komponente angezeigten Medien muss in den Inhaltssicherheitseinstellungen Ihrer Anwendung zulässig sein. Weitere Informationen finden Sie unter [Inhaltssicherheitseinstellungen Ihrer App anzeigen oder aktualisieren](app-content-security-settings-csp.md).

Die URL des externen Inhalts oder der Anwendung, die Sie einbetten möchten.

##### Layout
<a name="iframe-embed-properties-iframe-layout"></a>
+ **Breite**: Die Breite des iFrames, angegeben als Prozentsatz (%) oder als fester Pixelwert (z. B. 300 px).
+ **Höhe**: Die Höhe des iFrames, angegeben als Prozentsatz (%) oder als fester Pixelwert.

### S3-Upload
<a name="s3-upload-component"></a>

Die **S3-Upload-Komponente** ermöglicht es Benutzern, Dateien in einen Amazon S3 S3-Bucket hochzuladen. Durch die Konfiguration der **S3-Upload-Komponente** können Sie es Benutzern ermöglichen, Dateien einfach in den Amazon S3 S3-Speicher Ihrer Anwendung hochzuladen und dann die hochgeladenen Dateiinformationen innerhalb der Logik und Benutzeroberfläche Ihrer Anwendung zu nutzen.

**Anmerkung**  
Denken Sie daran, sicherzustellen, dass die erforderlichen Berechtigungen und Amazon S3 S3-Bucket-Konfigurationen vorhanden sind, um die Datei-Uploads und Speicheranforderungen Ihrer Anwendung zu unterstützen.

#### Eigenschaften des S3-Uploads
<a name="s3-upload-properties"></a>

##### S3-Konfiguration
<a name="s3-upload-component-properties-configuration"></a>
+ **Connector**: Wählen Sie den vorkonfigurierten Amazon S3 S3-Connector aus, der für die Datei-Uploads verwendet werden soll.
+ **Bucket**: Der Amazon S3 S3-Bucket, in den die Dateien hochgeladen werden.
+ **Ordner**: Der Ordner innerhalb des Amazon S3 S3-Buckets, in dem die Dateien gespeichert werden.
+ **Dateiname**: Die Benennungskonvention für die hochgeladenen Dateien.

##### Konfiguration für das Hochladen von Dateien
<a name="s3-upload-component-properties-file-upload-configuration"></a>
+ **Bezeichnung**: Das Etikett oder die Anweisungen, die über dem Datei-Upload-Bereich angezeigt werden.
+ **Beschreibung**: Zusätzliche Anweisungen oder Informationen zum Datei-Upload.
+ **Dateityp**: Der Dateityp, der hochgeladen werden darf. Zum Beispiel: Bild, Dokument oder Video.
+ **Größe**: Die maximale Größe der einzelnen Dateien, die hochgeladen werden können.
+ **Schaltflächenbezeichnung**: Der Text, der auf der Schaltfläche zur Dateiauswahl angezeigt wird.
+ **Schaltflächenstil**: Der Stil der Dateiauswahlschaltfläche. Zum Beispiel umrandet oder gefüllt.
+ **Größe der Schaltfläche**: Die Größe der Schaltfläche zur Dateiauswahl.

##### Validierung
<a name="s3-upload-component-properties-validation"></a>
+ **Maximale Anzahl von Dateien**: Die maximale Anzahl von Dateien, die gleichzeitig hochgeladen werden können.
+ **Maximale Dateigröße**: Die maximal zulässige Größe für jede einzelne Datei.

##### Auslöser
<a name="s3-upload-component-properties-triggers"></a>
+ **Bei Erfolg**: Aktionen, die ausgelöst werden sollen, wenn ein Datei-Upload erfolgreich war.
+ **Bei einem Fehler**: Aktionen, die ausgelöst werden sollen, wenn ein Datei-Upload fehlschlägt.

#### Felder für S3-Upload-Ausdrücke
<a name="s3-upload-expression-fields"></a>

Die **S3-Upload-Komponente** bietet die folgenden Ausdrucksfelder:
+ `{{ui.s3uploadID.files}}`: Gibt ein Array der hochgeladenen Dateien zurück.
+ `{{ui.s3uploadID.files[0]?.size}}`: Gibt die Größe der Datei am angegebenen Index zurück.
+ `{{ui.s3uploadID.files[0]?.type}}`: Gibt den Typ der Datei am angegebenen Index zurück.
+ `{{ui.s3uploadID.files[0]?.nameOnly}}`: Gibt den Namen der Datei ohne Erweiterungssuffix am angegebenen Index zurück.
+ `{{ui.s3uploadID.files[0]?.nameWithExtension}}`: Gibt den Namen der Datei mit ihrem Erweiterungssuffix am angegebenen Index zurück.

#### Ausdrücke und Beispiele
<a name="s3-upload-component-expression-examples"></a>

##### Beispiel: Zugriff auf hochgeladene Dateien
<a name="s3-upload-component-expression-examples-accessing-uploaded-files"></a>
+ `{{ui.s3uploadID.files.length}}`: Gibt die Anzahl der hochgeladenen Dateien zurück.
+ `{{ui.s3uploadID.files.map(f => f.name).join(', ')}}`: Gibt eine durch Kommas getrennte Liste der Dateinamen zurück, die hochgeladen wurden.
+ `{{ui.s3uploadID.files.filter(f => f.type.startsWith('image/'))}}`: Gibt ein Array zurück, das nur die hochgeladenen Bilddateien enthält.

##### Beispiel: Datei-Uploads validieren
<a name="s3-upload-component-expression-examples-validating-file-uploads"></a>
+ `{{ui.s3uploadID.files.some(f => f.size > 5 * 1024 * 1024)}}`: Prüft, ob eine der hochgeladenen Dateien mehr als 5 MB groß ist.
+ `{{ui.s3uploadID.files.every(f => f.type === 'image/png')}}`: Prüft, ob es sich bei allen hochgeladenen Dateien um PNG-Bilder handelt.
+ `{{ui.s3uploadID.files.length > 3}}`: Prüft, ob mehr als 3 Dateien hochgeladen wurden.

##### Beispiel: Aktionen auslösen
<a name="s3-upload-component-expression-examples-triggering-actions"></a>
+ `{{ui.s3uploadID.files.length > 0 ? 'Upload Successful' : 'No files uploaded'}}`: Zeigt eine Erfolgsmeldung an, wenn mindestens eine Datei hochgeladen wurde.
+ `{{ui.s3uploadID.files.some(f => f.type.startsWith('video/')) ? triggerVideoProcessing() : null}}`: Löst eine Automatisierung der Videoverarbeitung aus, wenn Videodateien hochgeladen wurden.
+ `{{ui.s3uploadID.files.map(f => f.url)}}`: Ruft die URLs hochgeladenen Dateien ab, die zur Anzeige oder Weiterverarbeitung der Dateien verwendet werden können.

Mit diesen Ausdrücken können Sie auf die hochgeladenen Dateien zugreifen, die Datei-Uploads validieren und Aktionen auslösen, die auf den Ergebnissen des Datei-Uploads basieren. Durch die Verwendung dieser Ausdrücke können Sie innerhalb der Datei-Upload-Funktionalität Ihrer Anwendung ein dynamischeres und intelligenteres Verhalten erzeugen.

**Anmerkung**  
*s3uploadID*Ersetzen Sie es durch die ID Ihrer **S3-Upload-Komponente**.

### Komponente „PDF-Viewer“
<a name="pdf-viewer-component"></a>

Mit der **PDF-Viewer-Komponente** können Benutzer PDF-Dokumente in Ihrer Anwendung anzeigen und mit ihnen interagieren. App Studio unterstützt diese verschiedenen Eingabearten für die PDF-Quelle. Die **PDF-Viewer-Komponente** bietet Flexibilität bei der Integration von PDF-Dokumenten in Ihre Anwendung, unabhängig davon, ob es sich um eine statische URL, einen Inline-Daten-URI oder dynamisch generierten Inhalt handelt.

#### Eigenschaften des PDF-Viewers
<a name="pdf-viewer-properties"></a>

##### Quelle
<a name="pdf-viewer-properties-source"></a>

**Anmerkung**  
Die Quelle der in dieser Komponente angezeigten Medien muss in den Inhaltssicherheitseinstellungen Ihrer Anwendung zulässig sein. Weitere Informationen finden Sie unter [Inhaltssicherheitseinstellungen Ihrer App anzeigen oder aktualisieren](app-content-security-settings-csp.md).

Die Quelle des PDF-Dokuments, bei der es sich um einen Ausdruck, eine Entität, eine URL oder eine Automatisierung handeln kann.

##### Expression
<a name="pdf-viewer-properties-source-expression"></a>

Verwenden Sie einen Ausdruck, um die PDF-Quelle dynamisch zu generieren.

##### Entität
<a name="pdf-viewer-properties-source-entity"></a>

Connect die **PDF-Viewer-Komponente** mit einer Datenentität, die das PDF-Dokument enthält.

##### URL
<a name="pdf-viewer-properties-source-url"></a>

Geben Sie die URL des PDF-Dokuments an.

##### URL
<a name="pdf-viewer-properties-source-url-example"></a>

Sie können eine URL eingeben, die auf das PDF-Dokument verweist, das Sie anzeigen möchten. Dies kann eine öffentliche Web-URL oder eine URL in Ihrer eigenen Anwendung sein.

Beispiel: `https://example.com/document.pdf`

##### Daten-URI
<a name="pdf-viewer-properties-source-url-data-uri"></a>

Ein **Daten-URI** ist eine kompakte Methode, um kleine Datendateien (wie Bilder oder PDFs) direkt in Ihre Anwendung einzubinden. Das PDF-Dokument ist als Base64-Zeichenfolge codiert und direkt in der Konfiguration der Komponente enthalten.

##### Blob oder ArrayBuffer
<a name="pdf-viewer-properties-source-url-blob-or-arraybuffer"></a>

Sie können das PDF-Dokument auch als Blob oder ArrayBuffer Objekt bereitstellen, sodass Sie die PDF-Daten dynamisch aus verschiedenen Quellen in Ihrer Anwendung generieren oder abrufen können.

##### Automatisierung
<a name="pdf-viewer-properties-source-automation"></a>

Connect die **PDF-Viewer-Komponente** mit einer Automatisierung, die das PDF-Dokument bereitstellt.

##### Aktionen
<a name="pdf-viewer-properties-actions"></a>
+ **Herunterladen**: Fügt eine Schaltfläche oder einen Link hinzu, über den Benutzer das PDF-Dokument herunterladen können.

##### Layout
<a name="pdf-viewer-properties-layout"></a>
+ **Breite**: Die Breite des PDF-Viewers, angegeben als Prozentsatz (%) oder als fester Pixelwert (z. B. 600 Pixel).
+ **Höhe**: Die Höhe des PDF-Viewers, angegeben als fester Pixelwert.

### Bildbetrachter
<a name="image-viewer-component"></a>

Mit der **Image Viewer-Komponente** können Benutzer Bilddateien in Ihrer Anwendung anzeigen und mit ihnen interagieren.

#### Eigenschaften des Bildbetrachters
<a name="image-viewer-properties"></a>

##### Quelle
<a name="image-viewer-properties-source"></a>

**Anmerkung**  
Die Quelle der in dieser Komponente angezeigten Medien muss in den Inhaltssicherheitseinstellungen Ihrer Anwendung zulässig sein. Weitere Informationen finden Sie unter [Inhaltssicherheitseinstellungen Ihrer App anzeigen oder aktualisieren](app-content-security-settings-csp.md).
+ **Entität**: Connect die **Image Viewer-Komponente** mit einer Datenentität, die die Bilddatei enthält.
+ **URL**: Geben Sie die URL der Bilddatei an.
+ **Ausdruck**: Verwenden Sie einen Ausdruck, um die Bildquelle dynamisch zu generieren.
+ **Automatisierung**: Connect die **Image Viewer-Komponente** mit einer Automatisierung, die die Bilddatei bereitstellt.

##### Alternativer Text
<a name="image-viewer-properties-alt-text"></a>

Die alternative Textbeschreibung des Bildes, die aus Gründen der Barrierefreiheit verwendet wird.

##### Layout
<a name="image-viewer-properties-layout"></a>
+ **Bildanpassung**: Legt fest, wie das Bild in der Größe geändert und innerhalb der Komponente angezeigt werden soll. Beispiel: `Contain`, `Cover` oder `Fill`.
+ **Breite**: Die Breite der **Bildbetrachter-Komponente**, angegeben als Prozentsatz (%) oder als fester Pixelwert (z. B. 300 Pixel).
+ **Höhe**: Die Höhe der **Image Viewer-Komponente**, angegeben als fester Pixelwert.
+ **Hintergrund**: Ermöglicht es Ihnen, eine Hintergrundfarbe oder ein Hintergrundbild für die **Image Viewer-Komponente** festzulegen.

# Automatisierungen und Aktionen: Definieren Sie die Geschäftslogik Ihrer App
<a name="automations"></a>

**Mit Automatisierungen** definieren Sie die Geschäftslogik Ihrer Anwendung. Die Hauptkomponenten einer Automatisierung sind: Auslöser, die die Automatisierung starten, eine Abfolge von einer oder mehreren Aktionen, Eingabeparameter, mit denen Daten an die Automatisierung übergeben werden, und eine Ausgabe.

**Topics**
+ [Automationskonzepte](automations-concepts.md)
+ [Automatisierungen erstellen, bearbeiten und löschen](automations-create-edit-delete.md)
+ [Automatisierungsaktionen hinzufügen, bearbeiten und löschen](automations-actions-add-edit-delete.md)
+ [Referenz zu Automation-Aktionen](automations-actions-reference.md)

# Automationskonzepte
<a name="automations-concepts"></a>

Im Folgenden finden Sie einige Konzepte und Begriffe, die Sie kennen sollten, wenn Sie die Geschäftslogik Ihrer App mithilfe von Automatisierungen in App Studio definieren und konfigurieren.

## Automatisierungen
<a name="automations-concepts-automations"></a>

**Mit Automatisierungen** definieren Sie die Geschäftslogik Ihrer Anwendung. Die Hauptkomponenten einer Automatisierung sind: Auslöser, die die Automatisierung starten, eine Abfolge von einer oder mehreren Aktionen, Eingabeparameter, mit denen Daten an die Automatisierung übergeben werden, und eine Ausgabe.

## Aktionen
<a name="automations-concepts-actions"></a>

Eine Automatisierungsaktion, allgemein als **Aktion** bezeichnet, ist ein einzelner Logikschritt, aus dem eine Automatisierung besteht. Jede Aktion führt eine bestimmte Aufgabe aus, sei es das Senden einer E-Mail, das Erstellen eines Datensatzes, das Aufrufen einer Lambda-Funktion oder das Aufrufen. APIs Aktionen werden zu Automatisierungen aus der Aktionsbibliothek hinzugefügt und können in bedingte Anweisungen oder Schleifen gruppiert werden.

## Eingabeparameter für die Automatisierung
<a name="automations-concepts-parameters"></a>

**Eingabeparameter für die Automatisierung** sind dynamische Eingabewerte, die Sie von Komponenten an Automatisierungen übergeben können, um sie flexibel und wiederverwendbar zu machen. Stellen Sie sich Parameter als Variablen für Ihre Automatisierung vor. Anstatt Werte fest in eine Automatisierung zu codieren, können Sie Parameter definieren und bei Bedarf unterschiedliche Werte angeben. Parameter ermöglichen es Ihnen, dieselbe Automatisierung bei jeder Ausführung mit unterschiedlichen Eingaben zu verwenden. 

## Verspottete Ausgabe
<a name="automations-concepts-mocked-output"></a>

Einige Aktionen interagieren mithilfe von Konnektoren mit externen Ressourcen oder Diensten. Bei Verwendung der Vorschauumgebung interagieren Anwendungen nicht mit externen Diensten. Um Aktionen zu testen, die Konnektoren in der Vorschauumgebung verwenden, können Sie das Verhalten und die **Ausgabe des Konnektors mithilfe von Mocked-Output** simulieren. Die simulierte Ausgabe wird mit konfiguriert JavaScript, und das Ergebnis wird in den Ergebnissen einer Aktion gespeichert, genau wie die Antwort des Connectors in einer veröffentlichten App gespeichert wird.

Mithilfe von Mocking können Sie die Vorschauumgebung verwenden, um verschiedene Szenarien und deren Auswirkungen auf andere automatisierte Aktionen zu testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unglücklicher Pfade, ohne den externen Service über Konnektoren aufrufen zu müssen.

## Ausgabe durch Automatisierung
<a name="automations-concepts-automation-output"></a>

Eine **Automatisierungsausgabe** wird verwendet, um Werte von einer Automatisierung an andere Ressourcen einer App zu übergeben, z. B. an Komponenten oder andere Automatisierungen. Automatisierungsausgaben werden als Ausdrücke konfiguriert, und der Ausdruck kann einen statischen Wert oder einen dynamischen Wert zurückgeben, der aus Automatisierungsparametern und Aktionen berechnet wird. Standardmäßig geben Automatisierungen keine Daten zurück, einschließlich der Ergebnisse von Aktionen innerhalb der Automatisierung.

Ein paar Beispiele dafür, wie Automatisierungsausgaben verwendet werden können:
+ Sie können eine Automatisierungsausgabe so konfigurieren, dass sie ein Array zurückgibt, und dieses Array zum Auffüllen einer Datenkomponente übergeben.
+ Sie können eine Automatisierung verwenden, um einen Wert zu berechnen und diesen Wert an mehrere andere Automatisierungen zu übergeben, um die Geschäftslogik zu zentralisieren und wiederzuverwenden.

## Auslöser
<a name="automations-concepts-triggers"></a>

Ein **Trigger** bestimmt, wann und unter welchen Bedingungen eine Automatisierung ausgeführt wird. Einige Beispiele für Trigger sind `On click` für Schaltflächen und `On select` für Texteingaben. Der Typ der Komponente bestimmt die Liste der verfügbaren Trigger für diese Komponente. Trigger werden den [Komponenten](concepts.md#concepts-component) hinzugefügt und im Application Studio konfiguriert. 

# Automatisierungen erstellen, bearbeiten und löschen
<a name="automations-create-edit-delete"></a>

**Contents**
+ [Eine Automatisierung erstellen](#automations-create)
+ [Automatisierungseigenschaften anzeigen oder bearbeiten](#automations-edit)
+ [Eine Automatisierung löschen](#automations-delete)

## Eine Automatisierung erstellen
<a name="automations-create"></a>

Gehen Sie wie folgt vor, um eine Automatisierung in einer App Studio-Anwendung zu erstellen. Nach der Erstellung muss eine Automatisierung konfiguriert werden, indem ihre Eigenschaften bearbeitet und Aktionen hinzugefügt werden.

**Um eine Automatisierung zu erstellen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie die Registerkarte **Automatisierungen** aus.

1. Wenn Sie keine Automatisierungen haben, wählen Sie **\$1 Automatisierung hinzufügen** auf der Arbeitsfläche. **Andernfalls wählen Sie im **Automationsmenü** auf der linken Seite \$1 Hinzufügen.**

1. Eine neue Automatisierung wird erstellt, und Sie können damit beginnen, ihre Eigenschaften zu bearbeiten oder Aktionen hinzuzufügen und zu konfigurieren, um die Geschäftslogik Ihrer Anwendung zu definieren.

## Automatisierungseigenschaften anzeigen oder bearbeiten
<a name="automations-edit"></a>

Gehen Sie wie folgt vor, um Automatisierungseigenschaften anzuzeigen oder zu bearbeiten.

**Um Automatisierungseigenschaften anzuzeigen oder zu bearbeiten**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie die Registerkarte **Automatisierungen** aus.

1. **Wählen Sie im **Automationsmenü** auf der linken Seite die Automatisierung aus, für die Sie Eigenschaften anzeigen oder bearbeiten möchten, um das Eigenschaftenmenü auf der rechten Seite zu öffnen.**

1. Im **Eigenschaftenmenü** können Sie die folgenden Eigenschaften anzeigen:
   + **Automatisierungs-ID**: Der eindeutige Name der Automatisierung. Um ihn zu bearbeiten, geben Sie einen neuen Bezeichner in das Textfeld ein.
   + **Automatisierungsparameter**: Automatisierungsparameter werden verwendet, um dynamische Werte von der Benutzeroberfläche Ihrer App an Automatisierungs- und Datenaktionen zu übergeben. Um einen Parameter hinzuzufügen, wählen Sie **\$1 Hinzufügen**. Wählen Sie das Stiftsymbol, um den Namen, die Beschreibung oder den Typ des Parameters zu ändern. Um einen Parameter zu entfernen, wählen Sie das Papierkorbsymbol.
**Tipp**  
Sie können Automatisierungsparameter auch direkt von der Arbeitsfläche aus hinzufügen.
   + **Automatisierungsausgabe**: Die Automatisierungsausgabe wird verwendet, um zu konfigurieren, auf welche Daten aus der Automatisierung in anderen Automatisierungen oder Komponenten verwiesen werden kann. Standardmäßig erstellen Automatisierungen keine Ausgabe. Um eine Automatisierungsausgabe hinzuzufügen, wählen Sie **\$1 Hinzufügen**. Um die Ausgabe zu entfernen, wählen Sie das Papierkorbsymbol.

1. Sie definieren, was eine Automatisierung bewirkt, indem Sie Aktionen hinzufügen und konfigurieren. Weitere Informationen zu Aktionen finden Sie unter [Automatisierungsaktionen hinzufügen, bearbeiten und löschen](automations-actions-add-edit-delete.md) und[Referenz zu Automation-Aktionen](automations-actions-reference.md).

## Eine Automatisierung löschen
<a name="automations-delete"></a>

Gehen Sie wie folgt vor, um eine Automatisierung in einer App Studio-Anwendung zu löschen.

**Um eine Automatisierung zu löschen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie die Registerkarte **Automatisierungen** aus.

1. **Wählen Sie im **Automationsmenü** auf der linken Seite das Ellipsenmenü der Automatisierung, die Sie löschen möchten, und wählen Sie Löschen.** Alternativ können Sie das Papierkorbsymbol aus dem **Eigenschaftenmenü** der Automatisierung auf der rechten Seite auswählen.

1. Wählen Sie im Bestätigungs-Dialogfeld die Option **Delete** (Löschen).

# Automatisierungsaktionen hinzufügen, bearbeiten und löschen
<a name="automations-actions-add-edit-delete"></a>

Eine Automatisierungsaktion, allgemein als **Aktion** bezeichnet, ist ein einzelner Logikschritt, aus dem eine Automatisierung besteht. Jede Aktion führt eine bestimmte Aufgabe aus, sei es das Senden einer E-Mail, das Erstellen eines Datensatzes, das Aufrufen einer Lambda-Funktion oder das Aufrufen. APIs Aktionen werden zu Automatisierungen aus der Aktionsbibliothek hinzugefügt und können in bedingte Anweisungen oder Schleifen gruppiert werden.

**Contents**
+ [Eine Automatisierungsaktion hinzufügen](#automations-actions-add)
+ [Eigenschaften von Automatisierungsaktionen anzeigen und bearbeiten](#automations-actions-edit)
+ [Löschen einer Automatisierungsaktion](#automations-actions-delete)

## Eine Automatisierungsaktion hinzufügen
<a name="automations-actions-add"></a>

Gehen Sie wie folgt vor, um einer Automatisierung in einer App Studio-Anwendung eine Aktion hinzuzufügen.

**Um eine Automatisierungsaktion hinzuzufügen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie die Registerkarte **Automatisierungen** aus.

1. Wählen Sie im **Automationsmenü** auf der linken Seite die Automatisierung aus, zu der Sie eine Aktion hinzufügen möchten.

1. Wählen Sie im **Aktionsmenü auf der rechten Seite die Aktion** aus, die Sie hinzufügen möchten, oder ziehen Sie die Aktion per Drag & Drop auf die Leinwand. Nachdem die Aktion erstellt wurde, können Sie die Aktion auswählen, um die Aktionseigenschaften zu konfigurieren und so die Funktionalität der Aktion zu definieren. Weitere Informationen zu Aktionseigenschaften und deren Konfiguration finden Sie unter[Referenz zu Automation-Aktionen](automations-actions-reference.md).

## Eigenschaften von Automatisierungsaktionen anzeigen und bearbeiten
<a name="automations-actions-edit"></a>

Gehen Sie wie folgt vor, um die Eigenschaften einer Automatisierungsaktion in einer App Studio-Anwendung anzuzeigen oder zu bearbeiten.

**Um die Eigenschaften einer Automatisierungsaktion anzuzeigen oder zu bearbeiten**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie die Registerkarte **Automatisierungen** aus.

1. Wählen Sie im **Automationsmenü** auf der linken Seite die Aktion aus, deren Eigenschaften Sie anzeigen oder bearbeiten möchten. Alternativ können Sie die Aktion auf der Arbeitsfläche auswählen, wenn Sie sich die Automatisierung ansehen, die sie enthält.

1. **Sie können die Aktionseigenschaften im Eigenschaftenmenü auf der rechten Seite anzeigen oder bearbeiten.** Die Eigenschaften einer Aktion sind für jeden Aktionstyp unterschiedlich. Weitere Informationen zu Aktionseigenschaften und deren Konfiguration finden Sie unter[Referenz zu Automation-Aktionen](automations-actions-reference.md).

## Löschen einer Automatisierungsaktion
<a name="automations-actions-delete"></a>

Gehen Sie wie folgt vor, um eine Aktion aus einer Automatisierung in einer App Studio-Anwendung zu löschen.

**Um eine Automatisierungsaktion zu löschen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie die Registerkarte **Automatisierungen** aus.

1. Wählen Sie im **Automationsmenü** auf der linken Seite die Automatisierung aus, die die Aktion enthält, die Sie löschen möchten.

1. **Wählen Sie auf der Leinwand das Papierkorbsymbol in der Aktion, die Sie löschen möchten, und wählen Sie Löschen.**

# Referenz zu Automation-Aktionen
<a name="automations-actions-reference"></a>

Im Folgenden finden Sie die Referenzdokumentation für Automatisierungsaktionen, die in App Studio verwendet werden.

Eine Automatisierungsaktion, allgemein als **Aktion** bezeichnet, ist ein einzelner Logikschritt, aus dem eine Automatisierung besteht. Jede Aktion führt eine bestimmte Aufgabe aus, sei es das Senden einer E-Mail, das Erstellen eines Datensatzes, das Aufrufen einer Lambda-Funktion oder das Aufrufen. APIs Aktionen werden zu Automatisierungen aus der Aktionsbibliothek hinzugefügt und können in bedingte Anweisungen oder Schleifen gruppiert werden.

Informationen zum Erstellen und Konfigurieren von Automatisierungen und deren Aktionen finden Sie in den Themen unter. [Automatisierungen und Aktionen: Definieren Sie die Geschäftslogik Ihrer App](automations.md)

## Rufen Sie die API auf
<a name="automations-actions-reference-invoke-API"></a>

Ruft eine HTTP-REST-API-Anfrage auf. Builder können diese Aktion verwenden, um Anfragen von App Studio an andere Systeme oder Dienste mit APIs zu senden. Sie können damit beispielsweise eine Verbindung zu Systemen von Drittanbietern oder selbst entwickelten Anwendungen herstellen, um auf geschäftskritische Daten zuzugreifen, oder API-Endpunkte aufrufen, die nicht durch spezielle App Studio-Aktionen aufgerufen werden können.

Weitere Informationen zu REST APIs finden Sie unter [Was ist](https://aws.amazon.com/what-is/restful-api/) eine API? RESTful .

### Eigenschaften
<a name="automations-actions-reference-invoke-API-properties"></a>

#### Konnektor
<a name="automations-actions-reference-invoke-API-properties-connector"></a>

Der **Connector**, der für die API-Anfragen verwendet werden soll, die durch diese Aktion gestellt werden. Die Connector-Dropdown-Liste enthält nur Konnektoren der folgenden Typen: `API Connector` und`OpenAPI Connector`. Je nachdem, wie der Connector konfiguriert ist, kann er wichtige Informationen wie Anmeldeinformationen und Standardheader oder Abfrageparameter enthalten.

Weitere Informationen zu API-Konnektoren, einschließlich eines Vergleichs zwischen der Verwendung von `API Connector` und`OpenAPI Connector`, finden Sie unter[Connect zu Diensten von Drittanbietern her](add-connector-third-party.md).

#### Eigenschaften der Konfiguration von API-Anfragen
<a name="automations-actions-reference-invoke-API-properties-request-config"></a>

Wählen Sie im Eigenschaftenbereich die Option **API-Anfrage konfigurieren** aus, um das Dialogfeld zur Konfiguration der Anfrage zu öffnen. Wenn ein **API-Konnektor** ausgewählt ist, enthält das Dialogfeld Konnektorinformationen.

**Methode:** Die Methode für den API-Aufruf. Die möglichen Werte lauten wie folgt:
+ `DELETE`: Löscht eine angegebene Ressource.
+ `GET`: Ruft Informationen oder Daten ab.
+ `HEAD`: Ruft nur die Kopfzeilen einer Antwort ohne den Hauptteil ab.
+ `POST`: Sendet Daten zur Verarbeitung.
+ `PUSH`: Sendet Daten zur Verarbeitung ein.
+ `PATCH`: Aktualisiert eine angegebene Ressource teilweise.

**Pfad:** Der relative Pfad zur Ressource.

**Header:** Alle Header in Form von Schlüssel-Wert-Paaren, die mit der API-Anfrage gesendet werden sollen. Wenn ein Connector ausgewählt wird, werden die konfigurierten Header automatisch hinzugefügt und können nicht entfernt werden. Die konfigurierten Header können nicht bearbeitet werden, aber Sie können sie überschreiben, indem Sie einen weiteren Header mit demselben Namen hinzufügen.

**Abfrageparameter:** Alle Abfrageparameter in Form von Schlüssel-Wert-Paaren, die mit der API-Anfrage gesendet werden sollen. Wenn ein Konnektor ausgewählt wird, werden seine konfigurierten Abfrageparameter automatisch hinzugefügt und können nicht bearbeitet oder entfernt werden.

**Hauptteil:** Informationen, die mit der API-Anfrage im JSON-Format gesendet werden sollen. Es gibt keinen Hauptteil für `GET` Anfragen.

#### Verspottete Ausgabe
<a name="automations-actions-reference-invoke-API-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Aufrufen AWS
<a name="automations-actions-reference-invoke-aws"></a>

Ruft einen Vorgang von einem Dienst aus auf AWS . Dies ist eine allgemeine Aktion zum Aufrufen von AWS Diensten oder Vorgängen. Sie sollte verwendet werden, wenn es keine spezielle Aktion für den gewünschten AWS Dienst oder Vorgang gibt.

### Eigenschaften
<a name="automations-actions-reference-invoke-aws-properties"></a>

#### Service
<a name="automations-actions-reference-invoke-aws-properties-service"></a>

Der AWS Dienst, der den auszuführenden Vorgang enthält.

#### Operation
<a name="automations-actions-reference-invoke-aws-properties-operation"></a>

Die Operation, die ausgeführt werden soll.

#### Konnektor
<a name="automations-actions-reference-invoke-aws-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-invoke-aws-properties-configuration"></a>

Die JSON-Eingabe, die bei der Ausführung des angegebenen Vorgangs erfolgen soll. Weitere Informationen zur Konfiguration von Eingaben für AWS Operationen finden Sie unter [AWS SDK für JavaScript](https://docs.aws.amazon.com/sdk-for-javascript).

## Aufrufen von Lambda
<a name="automations-actions-reference-invoke-lambda"></a>

Ruft eine bestehende Lambda-Funktion auf.

### Eigenschaften
<a name="automations-actions-reference-invoke-lambda-properties"></a>

#### Konnektor
<a name="automations-actions-reference-invoke-lambda-properties-connector"></a>

Der Konnektor, der für die Lambda-Funktionen verwendet werden soll, die von dieser Aktion ausgeführt werden. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für den Zugriff auf die Lambda-Funktion und anderen Konfigurationsinformationen, z. B. der AWS Region, die die Lambda-Funktion enthält, eingerichtet werden. Weitere Informationen zur Konfiguration eines Connectors für Lambda finden Sie unter[Schritt 3: Lambda-Konnektor erstellen](connectors-lambda.md#connectors-lambda-create-connector).

#### Funktionsname
<a name="automations-actions-reference-invoke-lambda-properties-function-name"></a>

Der Name der auszuführenden Lambda-Funktion. Beachten Sie, dass dies der Funktionsname und nicht der Funktions-ARN (Amazon Resource Name) ist.

#### Funktionsereignis
<a name="automations-actions-reference-invoke-lambda-properties-function-event"></a>

Schlüssel-Wert-Paare, die als Event-Payload an Ihre Lambda-Funktion weitergegeben werden.

#### Verspottete Ausgabe
<a name="automations-actions-reference-invoke-lambda-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Loop
<a name="automations-actions-reference-loop"></a>

Führt verschachtelte Aktionen wiederholt aus, um eine Liste von Elementen nacheinander durchzugehen. Fügen Sie die [Datensatz erstellen](#automations-actions-reference-create-record) Aktion beispielsweise einer Schleifenaktion hinzu, um mehrere Datensätze zu erstellen.

Die Schleifenaktion kann innerhalb anderer Schleifen oder Bedingungsaktionen verschachtelt sein. Die Loop-Aktionen werden sequentiell und nicht parallel ausgeführt. Auf die Ergebnisse der einzelnen Aktionen innerhalb der Schleife können nur nachfolgende Aktionen innerhalb derselben Schleifeniteration zugreifen. Auf sie kann nicht außerhalb der Schleife oder in verschiedenen Iterationen der Schleife zugegriffen werden.

### Eigenschaften
<a name="automations-actions-reference-loop-properties"></a>

#### Quelle
<a name="automations-actions-reference-loop-properties-source"></a>

Die Liste der Elemente, durch die iteriert werden soll, ein Element nach dem anderen. Die Quelle kann das Ergebnis einer vorherigen Aktion oder eine statische Liste von Zeichenfolgen, Zahlen oder Objekten sein, die Sie mithilfe eines JavaScript Ausdrucks bereitstellen können.

##### Beispiele
<a name="automations-actions-reference-loop-properties-source-examples"></a>

Die folgende Liste enthält Beispiele für Quelleingaben.
+ Ergebnisse einer früheren Aktion: `{{results.actionName.data}}`
+ Eine Liste von Zahlen: `{{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}}`
+ Eine Liste von Zeichenketten: `{{["apple", "banana", "orange", "grape", "kiwi"]}}`
+ Ein berechneter Wert: `{{params.actionName.split("\n")}}`

#### Aktueller Artikelname
<a name="automations-actions-reference-loop-properties-function-name"></a>

Der Name der Variablen, die verwendet werden kann, um auf das aktuelle Element zu verweisen, das gerade iteriert wird. Der aktuelle Elementname ist konfigurierbar, sodass Sie zwei oder mehr Schleifen verschachteln und von jeder Schleife aus auf Variablen zugreifen können. Wenn Sie beispielsweise Länder und Städte mit zwei Schleifen durchqueren, können Sie und konfigurieren `currentCountry` und `currentCity` referenzieren.

## Bedingung
<a name="automations-actions-reference-condition"></a>

Führt Aktionen auf der Grundlage des Ergebnisses einer oder mehrerer bestimmter logischer Bedingungen aus, die bei der Ausführung der Automatisierung ausgewertet werden. Die Bedingungsaktion besteht aus den folgenden Komponenten:
+ Ein *Bedingungsfeld*, das verwendet wird, um einen JavaScript Ausdruck bereitzustellen, der als `true` oder `false` ausgewertet wird.
+ Eine *echte Verzweigung*, die Aktionen enthält, die ausgeführt werden, wenn die Bedingung den Wert 1 erfüllt. `true`
+ Ein *falscher Zweig*, der Aktionen enthält, die ausgeführt werden, wenn die Bedingung als erfüllt gilt. `false`

Fügen Sie den Verzweigungen „wahr“ und „falsch“ Aktionen hinzu, indem Sie sie in die Bedingungsaktion ziehen.

### Eigenschaften
<a name="automations-actions-reference-condition-properties"></a>

#### Bedingung
<a name="automations-actions-reference-condition-properties-condition"></a>

Der JavaScript Ausdruck, der ausgewertet werden soll, wenn die Aktion ausgeführt wird.

## Datensatz erstellen
<a name="automations-actions-reference-create-record"></a>

Erstellt einen Datensatz in einer vorhandenen App Studio-Entität.

### Eigenschaften
<a name="automations-actions-reference-create-record-properties"></a>

#### Entität
<a name="automations-actions-reference-create-record-properties-entity"></a>

Die Entität, in der ein Datensatz erstellt werden soll. Sobald eine Entität ausgewählt wurde, müssen den Feldern der Entität Werte hinzugefügt werden, damit der Datensatz erstellt werden kann. Die Typen der Felder und ob die Felder erforderlich oder optional sind, sind in der Entität definiert.

## Datensatz aktualisieren
<a name="automations-actions-reference-update-record"></a>

Aktualisiert einen vorhandenen Datensatz in einer App Studio-Entität.

### Eigenschaften
<a name="automations-actions-reference-update-record-properties"></a>

#### Entität
<a name="automations-actions-reference-update-record-properties-entity"></a>

Die Entität, die die zu aktualisierenden Datensätze enthält.

#### Bedingungen
<a name="automations-actions-reference-update-record-properties-conditions"></a>

Die Kriterien, die definieren, welche Datensätze durch die Aktion aktualisiert werden. Sie können Bedingungen gruppieren, um eine logische Aussage zu erstellen. Sie können Gruppen oder Bedingungen mit `AND` `OR` Oder-Anweisungen kombinieren.

#### Felder
<a name="automations-actions-reference-update-record-properties-fields"></a>

Die Felder, die in den durch die Bedingungen angegebenen Datensätzen aktualisiert werden sollen.

#### Werte
<a name="automations-actions-reference-update-record-properties-values"></a>

Die Werte, die in den angegebenen Feldern aktualisiert werden sollen.

## Datensatz löschen
<a name="automations-actions-reference-delete-record"></a>

Löscht einen Datensatz aus einer App Studio-Entität.

### Eigenschaften
<a name="automations-actions-reference-delete-record-properties"></a>

#### Entität
<a name="automations-actions-reference-delete-record-properties-entity"></a>

Die Entität, die die zu löschenden Datensätze enthält.

#### Bedingungen
<a name="automations-actions-reference-delete-record-properties-conditions"></a>

Die Kriterien, die definieren, welche Datensätze durch die Aktion gelöscht werden. Sie können Bedingungen gruppieren, um eine logische Anweisung zu erstellen. Sie können Gruppen oder Bedingungen mit `AND` `OR` Oder-Anweisungen kombinieren.

## Datenaktion aufrufen
<a name="automations-actions-reference-invoke-data-action"></a>

Führt eine Datenaktion mit optionalen Parametern aus.

### Eigenschaften
<a name="automations-actions-reference-invoke-data-action-properties"></a>

#### Datenaktion
<a name="automations-actions-reference-invoke-data-action-properties-data-action"></a>

Die Datenaktion, die von der Aktion ausgeführt werden soll.

#### Parameters
<a name="automations-actions-reference-invoke-data-action-properties-parameters"></a>

Datenaktionsparameter, die von der Datenaktion verwendet werden sollen. Datenaktionsparameter werden verwendet, um Werte zu senden, die als Eingaben für Datenaktionen verwendet werden. Datenaktionsparameter können bei der Konfiguration der Automatisierungsaktion hinzugefügt werden, müssen jedoch auf der Registerkarte **Daten** bearbeitet werden.

#### Erweiterte Einstellungen
<a name="automations-actions-reference-invoke-data-action-properties-advanced-settings"></a>

Die `Invoke data action` Aktion enthält die folgenden erweiterten Einstellungen:
+ **Seitengröße:** Die maximale Anzahl von Datensätzen, die in jeder Abfrage abgerufen werden können. Der Standardwert ist 500 und der Höchstwert ist 3000.
+ **Paginierungstoken:** Das Token, das verwendet wird, um zusätzliche Datensätze aus einer Abfrage abzurufen. Wenn das beispielsweise auf 500 gesetzt `Page size` ist, es aber mehr als 500 Datensätze gibt, werden durch die Übergabe des Paginierungstokens an eine nachfolgende Abfrage die nächsten 500 abgerufen. Das Token ist undefiniert, wenn keine Datensätze oder Seiten mehr existieren.

## Amazon S3: Objekt platzieren
<a name="automations-actions-reference-s3-put-object"></a>

Verwendet den `Amazon S3 PutObject` Vorgang, um ein Objekt, das durch einen Schlüssel (Dateipfad) identifiziert wird, zu einem angegebenen Amazon S3 S3-Bucket hinzuzufügen.

### Eigenschaften
<a name="automations-actions-reference-s3-put-object-properties"></a>

#### Konnektor
<a name="automations-actions-reference-s3-put-object-properties-connector"></a>

Der Connector, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den entsprechenden Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-s3-put-object-properties-configuration"></a>

Die erforderlichen Optionen, die im `PutObject` Befehl verwendet werden sollen. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zu diesem `Amazon S3 PutObject` Vorgang finden Sie [PutObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_PutObject.html)in der *Amazon Simple Storage Service API-Referenz*.
+ **Bucket:** Der Name des Amazon S3 S3-Buckets, in den ein Objekt eingefügt werden soll.
+ **Schlüssel:** Der eindeutige Name des Objekts, das in den Amazon S3 S3-Bucket aufgenommen werden soll.
+ **Hauptteil:** Der Inhalt des Objekts, das in den Amazon S3-Bucket aufgenommen werden soll.

#### Verspottete Ausgabe
<a name="automations-actions-reference-s3-put-object-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon S3: Objekt löschen
<a name="automations-actions-reference-s3-delete-object"></a>

Verwendet den `Amazon S3 DeleteObject` Vorgang, um ein durch einen Schlüssel (Dateipfad) identifiziertes Objekt aus einem angegebenen Amazon S3 S3-Bucket zu löschen.

### Eigenschaften
<a name="automations-actions-reference-s3-delete-object-properties"></a>

#### Konnektor
<a name="automations-actions-reference-s3-delete-object-properties-connector"></a>

Der Connector, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-s3-delete-object-properties-configuration"></a>

Die erforderlichen Optionen, die im `DeleteObject` Befehl verwendet werden sollen. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zu diesem `Amazon S3 DeleteObject` Vorgang finden Sie [DeleteObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_DeleteObject.html)in der *Amazon Simple Storage Service API-Referenz*.
+ **Bucket:** Der Name des Amazon S3 S3-Buckets, aus dem ein Objekt gelöscht werden soll.
+ **Schlüssel:** Der eindeutige Name des Objekts, das aus dem Amazon S3 S3-Bucket gelöscht werden soll.

#### Verspottete Ausgabe
<a name="automations-actions-reference-s3-delete-object-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon S3: Objekt abrufen
<a name="automations-actions-reference-s3-get-object"></a>

Verwendet den `Amazon S3 GetObject` Vorgang, um ein durch einen Schlüssel (Dateipfad) identifiziertes Objekt aus einem angegebenen Amazon S3 S3-Bucket abzurufen.

### Eigenschaften
<a name="automations-actions-reference-s3-get-object-properties"></a>

#### Konnektor
<a name="automations-actions-reference-s3-get-object-properties-connector"></a>

Der Connector, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-s3-get-object-properties-configuration"></a>

Die erforderlichen Optionen, die im `GetObject` Befehl verwendet werden sollen. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zu diesem `Amazon S3 GetObject` Vorgang finden Sie [GetObject](https://docs.aws.amazon.com/AmazonS3/latest/API/API_GetObject.html)in der *Amazon Simple Storage Service API-Referenz*.
+ **Bucket:** Der Name des Amazon S3 S3-Buckets, aus dem ein Objekt abgerufen werden soll.
+ **Schlüssel:** Der eindeutige Name des Objekts, das aus dem Amazon S3 S3-Bucket abgerufen werden soll.

#### Verspottete Ausgabe
<a name="automations-actions-reference-s3-get-object-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon S3: Objekte auflisten
<a name="automations-actions-reference-s3-list-objects"></a>

Verwendet den `Amazon S3 ListObjects` Vorgang, um Objekte in einem angegebenen Amazon S3 S3-Bucket aufzulisten.

### Eigenschaften
<a name="automations-actions-reference-s3-list-objects-properties"></a>

#### Konnektor
<a name="automations-actions-reference-s3-list-objects-properties-connector"></a>

Der Connector, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-s3-list-objects-properties-configuration"></a>

Die erforderlichen Optionen, die im `ListObjects` Befehl verwendet werden sollen. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zu diesem `Amazon S3 ListObjects` Vorgang finden Sie [ListObjects](https://docs.aws.amazon.com/AmazonS3/latest/API/API_ListObjects.html)in der *Amazon Simple Storage Service API-Referenz*.
+ **Bucket:** Der Name des Amazon S3 S3-Buckets, aus dem Objekte aufgelistet werden sollen.

#### Verspottete Ausgabe
<a name="automations-actions-reference-s3-list-objects-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon Textract: Dokument analysieren
<a name="automations-actions-reference-textract-analyze-document"></a>

Verwendet den `Amazon Textract AnalyzeDocument` Vorgang, um ein Eingabedokument auf Beziehungen zwischen erkannten Elementen zu analysieren.

### Eigenschaften
<a name="automations-actions-reference-textract-analyze-document-properties"></a>

#### Konnektor
<a name="automations-actions-reference-textract-analyze-document-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-textract-analyze-document-properties-configuration"></a>

Der Inhalt der Anforderung, der im `AnalyzeDocument` Befehl verwendet werden soll. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zur `Amazon Textract AnalyzeDocument` Bedienung finden Sie [AnalyzeDocument](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeDocument.html)im *Amazon Textract Developer Guide*.
+ **Dokument//S3Object//Bucket:** Der Name des Amazon S3 S3-Buckets. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Dokument//S3Object//Name:** Der Dateiname des Eingabedokuments. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Document//S3Object//Version:** Wenn für den Amazon S3 S3-Bucket die Versionierung aktiviert ist, können Sie die Version des Objekts angeben. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **FeatureTypes:** Eine Liste der durchzuführenden Analysetypen. Gültige Werte: `TABLES`, `FORMS`, `QUERIES`, `SIGNATURES` und `LAYOUT`.

#### Verspottete Ausgabe
<a name="automations-actions-reference-textract-analyze-document-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon Textract: Kosten analysieren
<a name="automations-actions-reference-textract-analyze-expense"></a>

Verwendet den `Amazon Textract AnalyzeExpense` Vorgang, um ein Eingabedokument auf finanzielle Beziehungen zwischen Text zu analysieren.

### Eigenschaften
<a name="automations-actions-reference-textract-analyze-expense-properties"></a>

#### Konnektor
<a name="automations-actions-reference-textract-analyze-expense-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-textract-analyze-expense-properties-configuration"></a>

Der Inhalt der Anforderung, der im `AnalyzeExpense` Befehl verwendet werden soll. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zur `Amazon Textract AnalyzeExpense` Bedienung finden Sie [AnalyzeExpense](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeExpense.html)im *Amazon Textract Developer Guide*.
+ **Dokument//S3Object//Bucket:** Der Name des Amazon S3 S3-Buckets. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Dokument//S3Object//Name:** Der Dateiname des Eingabedokuments. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Document//S3Object//Version:** Wenn für den Amazon S3 S3-Bucket die Versionierung aktiviert ist, können Sie die Version des Objekts angeben. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.

#### Verspottete Ausgabe
<a name="automations-actions-reference-textract-analyze-expense-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon Textract: ID analysieren
<a name="automations-actions-reference-textract-analyze-id"></a>

Verwendet den `Amazon Textract AnalyzeID` Vorgang, um ein Ausweisdokument auf relevante Informationen zu analysieren.

### Eigenschaften
<a name="automations-actions-reference-textract-analyze-id-properties"></a>

#### Konnektor
<a name="automations-actions-reference-textract-analyze-id-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-textract-analyze-id-properties-configuration"></a>

Der Inhalt der Anforderung, der im `AnalyzeID` Befehl verwendet werden soll. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zu diesem `Amazon Textract AnalyzeID` Vorgang finden Sie unter [AnalyzeId](https://docs.aws.amazon.com/textract/latest/dg/API_AnalyzeID.html) im *Amazon Textract* Developer Guide.
+ **Dokument//S3Object//Bucket:** Der Name des Amazon S3 S3-Buckets. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Dokument//S3Object//Name:** Der Dateiname des Eingabedokuments. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Document//S3Object//Version:** Wenn für den Amazon S3 S3-Bucket die Versionierung aktiviert ist, können Sie die Version des Objekts angeben. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.

#### Verspottete Ausgabe
<a name="automations-actions-reference-textract-analyze-id-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon Textract: Dokumenttext erkennen
<a name="automations-actions-reference-textract-detect-document-text"></a>

Verwendet den `Amazon Textract DetectDocumentText` Vorgang, um Textzeilen und die Wörter, aus denen eine Textzeile besteht, in einem Eingabedokument zu erkennen.

### Eigenschaften
<a name="automations-actions-reference-textract-detect-document-text-properties"></a>

#### Konnektor
<a name="automations-actions-reference-textract-detect-document-text-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-textract-detect-document-text-properties-configuration"></a>

Der Inhalt der Anforderung, der im `DetectDocumentText` Befehl verwendet werden soll. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zur `Amazon Textract DetectDocumentText` Bedienung finden Sie [DetectDocumentText](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)im *Amazon Textract Developer Guide*.
+ **Dokument//S3Object//Bucket:** Der Name des Amazon S3 S3-Buckets. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Dokument//S3Object//Name:** Der Dateiname des Eingabedokuments. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.
+ **Document//S3Object//Version:** Wenn für den Amazon S3 S3-Bucket die Versionierung aktiviert ist, können Sie die Version des Objekts angeben. Dieser Parameter kann leer gelassen werden, wenn eine Datei an die Aktion mit der **S3-Upload-Komponente** übergeben wird.

#### Verspottete Ausgabe
<a name="automations-actions-reference-textract-detect-document-text-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon Bedrock: GenAI-Aufforderung
<a name="automations-actions-reference-bedrock-prompt"></a>

Verwendet den [Amazon InvokeModel Bedrock-Vorgang](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html), um Inferenzen mithilfe der in den Aktionseigenschaften angegebenen Eingabeaufforderungs- und Inferenzparameter auszuführen. Die Aktion kann Text, Bilder und Einbettungen generieren.

### Eigenschaften
<a name="automations-actions-reference-bedrock-prompt-properties"></a>

#### Konnektor
<a name="automations-actions-reference-bedrock-prompt-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Um diese Aktion erfolgreich zu verwenden, muss der Connector mit **Amazon Bedrock Runtime** als Service konfiguriert werden. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Modell
<a name="automations-actions-reference-bedrock-prompt-properties-model"></a>

Das Basismodell, das von Amazon Bedrock zur Bearbeitung der Anfrage verwendet werden soll. Weitere Informationen zu Modellen in Amazon Bedrock finden Sie unter [Amazon Bedrock Foundation-Modellinformationen](https://docs.aws.amazon.com/bedrock/latest/userguide/foundation-models-reference.html) im *Amazon Bedrock-Benutzerhandbuch*.

#### Eingabetyp
<a name="automations-actions-reference-bedrock-prompt-properties-input-type"></a>

Der Eingangstyp der Eingabe, die an das Amazon Bedrock-Modell gesendet wird. Die möglichen Werte sind **Text**, **Dokument** und **Bild**. Wenn ein Eingabetyp nicht zur Auswahl steht, wird er wahrscheinlich vom konfigurierten Modell nicht unterstützt.

#### Benutzeraufforderung
<a name="automations-actions-reference-bedrock-prompt-properties-user-prompt"></a>

Die Aufforderung, an das Amazon Bedrock-Modell gesendet zu werden, um verarbeitet zu werden, um eine Antwort zu generieren. Sie können statischen Text eingeben oder eine Eingabe aus einem anderen Teil Ihrer Anwendung übergeben, z. B. von einer Komponente, die Parameter verwendet, einer vorherigen Aktion in der Automatisierung oder einer anderen Automatisierung. Die folgenden Beispiele zeigen, wie Sie einen Wert aus einer Komponente oder einer vorherigen Aktion übergeben:
+ Um einen Wert aus einer Komponente mithilfe von Parametern zu übergeben: `{{params.paramName}}`
+ Um einen Wert aus einer vorherigen Aktion zu übergeben: `{{results.actionName}}`

#### Systemaufforderung (Claude-Modelle)
<a name="automations-actions-reference-bedrock-prompt-properties-system-prompt"></a>

Die Systemaufforderung, bei der Bearbeitung der Anfrage vom Amazon Bedrock-Modell verwendet zu werden. Die Systemaufforderung wird verwendet, um Claude-Modellen Kontext, Anweisungen oder Richtlinien bereitzustellen.

#### Einstellungen anfordern
<a name="automations-actions-reference-bedrock-prompt-properties-request-settings"></a>

Konfigurieren Sie verschiedene Anforderungseinstellungen und Modellinferenzparameter. Sie können die folgenden Einstellungen konfigurieren:
+ **Temperatur**: Die Temperatur, die vom Amazon Bedrock-Modell bei der Bearbeitung der Anfrage verwendet werden soll. Die Temperatur bestimmt die Zufälligkeit oder Kreativität der Ausgabe des Bedrock-Modells. Je höher die Temperatur, desto kreativer und weniger analytisch ist die Reaktion. Mögliche Werte sind`[0-10]`.
+ **Max. Tokens**: Begrenzen Sie die Länge der Ausgabe des Amazon Bedrock-Modells.
+ **TopP****: Beim Nucleus-Sampling berechnet das Modell die kumulative Verteilung über alle Optionen für jedes nachfolgende Token in absteigender Wahrscheinlichkeitsreihenfolge und schneidet sie ab, sobald eine bestimmte, durch TopP festgelegte Wahrscheinlichkeit erreicht wird.** Sie sollten entweder die **Temperatur** oder den **TopP** ändern, aber nicht beide
+ **Stopp-Sequenzen**: Sequenzen, die dazu führen, dass das Modell die Verarbeitung der Anforderung und die Generierung der Ausgabe beendet.

Weitere Informationen finden Sie unter [Inferenz-Anforderungsparameter und Antwortfelder für Foundation-Modelle](https://docs.aws.amazon.com/bedrock/latest/userguide/model-parameters.html) im *Amazon Bedrock-Benutzerhandbuch*.

#### Sequenzen beenden
<a name="automations-actions-reference-bedrock-prompt-properties-guardrail"></a>

**Geben Sie eine Amazon Bedrock Guardrail **ID** und Version ein.** Guardrails werden verwendet, um Schutzmaßnahmen zu implementieren, die auf Ihren Anwendungsfällen und verantwortungsvollen KI-Richtlinien basieren. Weitere Informationen finden Sie unter [Abwehr schädlicher Inhalte in Modellen mit Amazon Bedrock Guardrails](https://docs.aws.amazon.com/bedrock/latest/userguide/guardrails.html) im *Amazon Bedrock-Benutzerhandbuch*.

#### Verspottete Ausgabe
<a name="automations-actions-reference-bedrock-prompt-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## Amazon Bedrock: Modell aufrufen
<a name="automations-actions-reference-bedrock-invoke-model"></a>

Verwendet den [Amazon InvokeModel Bedrock-Vorgang](https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_InvokeModel.html), um Inferenzen mithilfe der im Anforderungstext angegebenen Eingabeaufforderungs- und Inferenzparameter auszuführen. Sie verwenden Modellinferenz, um Text, Bilder und Einbettungen zu generieren.

### Eigenschaften
<a name="automations-actions-reference-bedrock-invoke-model-properties"></a>

#### Konnektor
<a name="automations-actions-reference-bedrock-invoke-model-properties-connector"></a>

Der Konnektor, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Um diese Aktion erfolgreich zu verwenden, muss der Connector mit **Amazon Bedrock Runtime** als Service konfiguriert werden. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-bedrock-invoke-model-properties-configuration"></a>

Der Inhalt der Anforderung, der im `InvokeModel` Befehl verwendet werden soll.

**Anmerkung**  
Weitere Informationen zu diesem `Amazon Bedrock InvokeModel` Vorgang, einschließlich Beispielbefehlen, finden Sie [InvokeModel](https://docs.aws.amazon.com/textract/latest/dg/API_DetectDocumentText.html)in der *Amazon Bedrock API-Referenz.*

#### Verspottete Ausgabe
<a name="automations-actions-reference-bedrock-invoke-model-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

## JavaScript
<a name="automations-actions-reference-javascript"></a>

Führt eine benutzerdefinierte JavaScript Funktion aus, um einen bestimmten Wert zurückzugeben.

**Wichtig**  
App Studio unterstützt nicht die Verwendung von Bibliotheken von Drittanbietern oder benutzerdefinierten JavaScript Bibliotheken.

### Eigenschaften
<a name="automations-actions-reference-javascript-properties"></a>

#### Quellcode
<a name="automations-actions-reference-javascript-properties-source-code"></a>

Der JavaScript Codeausschnitt, der von der Aktion ausgeführt werden soll.

**Tipp**  
Sie können KI verwenden, um die Generierung JavaScript für Sie zu unterstützen, indem Sie die folgenden Schritte ausführen:  
Wählen Sie das Erweiterungssymbol, um den erweiterten JavaScript Editor zu öffnen.
(Optional): Aktivieren **Sie den Schalter Code ändern**, um einen vorhandenen JavaScript Code zu ändern. Andernfalls ersetzt KI alle vorhandenen JavaScript.
Beschreiben Sie in **Generate JavaScript**, was Sie damit machen möchten JavaScript, zum Beispiel:**Add two numbers**.
Wählen Sie das Sendesymbol, um Ihre zu generieren JavaScript.

## Automatisierung aufrufen
<a name="automations-actions-reference-invoke-automation"></a>

Führt eine angegebene Automatisierung aus.

### Eigenschaften
<a name="automations-actions-reference-invoke-automation-properties"></a>

#### Rufen Sie die Automatisierung auf
<a name="automations-actions-reference-invoke-automation-properties-invoke-automation"></a>

Die Automatisierung, die von der Aktion ausgeführt werden soll.

## E-Mail senden
<a name="automations-actions-reference-send-email"></a>

Verwendet den `Amazon SES SendEmail` Vorgang, um eine E-Mail zu senden.

### Eigenschaften
<a name="automations-actions-reference-send-email-properties"></a>

#### Konnektor
<a name="automations-actions-reference-send-email-properties-connector"></a>

Der Connector, der für die von dieser Aktion ausgeführten Operationen verwendet werden soll. Der konfigurierte Connector sollte mit den richtigen Anmeldeinformationen für die Ausführung des Vorgangs und anderen Konfigurationsinformationen eingerichtet werden, z. B. mit der AWS Region, in der sich alle Ressourcen befinden, auf die im Vorgang verwiesen wird.

#### Konfiguration
<a name="automations-actions-reference-send-email-properties-configuration"></a>

Der Inhalt der Anforderung, der im `SendEmail` Befehl verwendet werden soll. Es handelt sich um folgende Optionen:

**Anmerkung**  
Weitere Informationen zu diesem `Amazon SES SendEmail` Vorgang finden Sie [SendEmail](https://docs.aws.amazon.com/ses/latest/APIReference-V2/API_SendEmail.html)in der *Amazon Simple Email Service API-Referenz*.

#### Verspottete Ausgabe
<a name="automations-actions-reference-send-email-properties-mocked-output"></a>

Aktionen interagieren nicht mit externen Diensten oder Ressourcen in der Vorschauumgebung. Das **Ausgabefeld Mocked** wird verwendet, um zu Testzwecken einen JSON-Ausdruck bereitzustellen, der das Verhalten eines Konnektors in der Vorschauumgebung simuliert. Dieses Snippet wird in der `results` Map der Aktion gespeichert, genau wie die Antwort des Connectors für eine veröffentlichte App in der Live-Umgebung.

Mit diesem Feld können Sie verschiedene Szenarien und ihre Auswirkungen auf andere Aktionen innerhalb der Automatisierung testen, z. B. die Simulation verschiedener Ergebniswerte, Fehlerszenarien, Grenzfälle oder unpassender Pfade, ohne mit externen Diensten über Konnektoren zu kommunizieren.

# Entitäten und Datenaktionen: Konfigurieren Sie das Datenmodell Ihrer App
<a name="data"></a>

**Entitäten** sind Datentabellen in App Studio. Entitäten interagieren direkt mit Tabellen in Datenquellen. Entitäten umfassen Felder zur Beschreibung der darin enthaltenen Daten, Abfragen zum Suchen und Zurückgeben von Daten sowie Zuordnungen, um die Felder der Entität mit den Spalten einer Datenquelle zu verbinden.

**Topics**
+ [Bewährte Methoden beim Entwerfen von Datenmodellen](data-model-best-practices.md)
+ [Eine Entität in einer App Studio-App erstellen](data-entities-create.md)
+ [Konfiguration oder Bearbeitung einer Entität in einer App Studio-App](data-entities-edit.md)
+ [Eine Entität löschen](data-entities-delete.md)
+ [Verwaltete Datenentitäten in AWS App Studio](managed-data-entities.md)

# Bewährte Methoden beim Entwerfen von Datenmodellen
<a name="data-model-best-practices"></a>

Verwenden Sie die folgenden bewährten Methoden, um ein robustes, skalierbares und sicheres relationales Datenmodell AWS für die Verwendung in Ihrer App Studio-Anwendung zu erstellen, das die Anforderungen Ihrer Anwendung erfüllt und die langfristige Zuverlässigkeit und Leistung Ihrer Dateninfrastruktur gewährleistet.
+ **Wählen Sie den richtigen AWS Datendienst:** Wählen Sie je nach Ihren Anforderungen den entsprechenden AWS Datendienst aus. Für eine OLTP-Anwendung (Online Transaction Processing) könnten Sie beispielsweise eine Datenbank (DB) wie Amazon Aurora in Betracht ziehen, bei der es sich um einen cloudnativen, relationalen und vollständig verwalteten Datenbankservice handelt, der verschiedene Datenbank-Engines wie MySQL und PostgreSQL unterstützt. Eine vollständige Liste der von App Studio unterstützten Aurora-Versionen finden Sie unter[Connect zu Amazon Aurora her](connectors-aurora.md). Andererseits sollten Sie für OLAP-Anwendungsfälle (Online Analytical Processing) die Verwendung von Amazon Redshift in Betracht ziehen, einem Cloud-Data Warehouse, mit dem Sie komplexe Abfragen für sehr große Datensätze ausführen können. Diese Abfragen können oft einige Zeit (viele Sekunden) in Anspruch nehmen, sodass Amazon Redshift für OLTP-Anwendungen, die Datenzugriff mit niedriger Latenz benötigen, weniger geeignet ist.
+ **Skalierbares Design:** Planen Sie Ihr Datenmodell mit Blick auf future Wachstum und Skalierbarkeit. Berücksichtigen Sie Faktoren wie das erwartete Datenvolumen, Zugriffsmuster und Leistungsanforderungen bei der Auswahl eines geeigneten Datendienstes und einer geeigneten Konfiguration der Datenbankinstanz (z. B. bereitgestellte Kapazität).
  + Weitere Informationen zur Skalierung mit Aurora Serverless finden Sie unter [Leistung und Skalierung für Aurora Serverless V2](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/aurora-serverless-v2.setting-capacity.html).
+ **Normalisieren Sie Ihre Daten:** Folgen Sie den Prinzipien der Datenbanknormalisierung, um Datenredundanz zu minimieren und die Datenintegrität zu verbessern. Dazu gehören das Erstellen geeigneter Tabellen, das Definieren von Primär- und Fremdschlüsseln und das Herstellen von Beziehungen zwischen Entitäten. Wenn Sie in App Studio Daten von einer Entität abfragen, können Sie zugehörige Daten von einer anderen Entität abrufen, indem Sie eine `join` Klausel in der Abfrage angeben.
+ **Implementieren Sie eine angemessene Indizierung:** Identifizieren Sie die wichtigsten Abfragen und Zugriffsmuster und erstellen Sie geeignete Indizes, um die Leistung zu optimieren.
+ **Nutzen Sie die Funktionen von AWS Datendiensten:** Nutzen Sie die Funktionen, die der von Ihnen gewählte AWS Datendienst bietet, z. B. automatisierte Backups, Multi-AZ-Bereitstellungen und automatische Softwareupdates.
+ **Schützen Sie Ihre Daten:** Implementieren Sie robuste Sicherheitsmaßnahmen wie IAM (AWS Identity and Access Management) -Richtlinien, erstellen Sie Datenbankbenutzer mit eingeschränkten Rechten für Tabellen und Schemas und setzen Sie Verschlüsselung im Ruhezustand und bei der Übertragung durch.
+ **Überwachen und optimieren Sie die Leistung:** Überwachen Sie kontinuierlich die Leistung Ihrer Datenbank und nehmen Sie bei Bedarf Anpassungen vor, z. B. die Skalierung von Ressourcen, die Optimierung von Abfragen oder die Optimierung von Datenbankkonfigurationen.
+ **Automatisieren Sie das Datenbankmanagement:** Nutzen Sie AWS Dienste wie Aurora Autoscaling, Performance Insights for Aurora und AWS Database Migration Service, um Datenbankverwaltungsaufgaben zu automatisieren und den betrieblichen Aufwand zu reduzieren.
+ **Implementieren Sie Disaster Recovery- und Backup-Strategien:** Stellen Sie sicher, dass Sie über einen klar definierten Sicherungs- und Wiederherstellungsplan verfügen, der Funktionen wie Aurora Automated Backups, point-in-time Recovery und regionsübergreifende Replikatkonfigurationen nutzt.
+ Halten **Sie sich an AWS bewährte Verfahren und die Dokumentation:** Halten up-to-date Sie sich an die neuesten AWS Best Practices, Richtlinien und Dokumentationen für den von Ihnen ausgewählten Datenservice, um sicherzustellen, dass Ihr Datenmodell und Ihre Implementierung den Empfehlungen entsprechen. AWS 

Ausführlichere Anleitungen zu den einzelnen AWS Datendiensten finden Sie in den folgenden Themen:
+ [Bewährte Methoden mit Amazon Aurora](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.BestPractices.html)
+ [Bewährte Methoden mit Amazon Aurora MySQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/AuroraMySQL.BestPractices.html)
+ [Leistungsoptimierung für Amazon Redshift Redshift-Abfragen](https://docs.aws.amazon.com/redshift/latest/dg/c-optimizing-query-performance.html)
+ [Bewährte Methoden für das Abfragen und Scannen von Daten in Amazon DynamoDB](https://docs.aws.amazon.com/amazondynamodb/latest/developerguide/bp-query-scan.html)

# Eine Entität in einer App Studio-App erstellen
<a name="data-entities-create"></a>

Es gibt vier Methoden zum Erstellen einer Entität in einer App Studio-App. Die folgende Liste enthält jede Methode, ihre Vorteile und einen Link zu den Anweisungen, wie Sie diese Methode verwenden, um die Entität zu erstellen und anschließend zu konfigurieren.
+ [Eine Entität aus einer vorhandenen Datenquelle erstellen](#data-entities-create-existing-data-source): Erstellen Sie automatisch eine Entität und ihre Felder aus einer vorhandenen Datenquellentabelle und ordnen Sie die Felder den Spalten der Datenquellentabelle zu. Diese Option ist vorzuziehen, wenn Sie über eine bestehende Datenquelle verfügen, die Sie in Ihrer App Studio-App verwenden möchten.
+ [Eine Entität mit einer von App Studio verwalteten Datenquelle erstellen](#data-entities-create-managed-data-source): Erstellen Sie eine Entität und eine DynamoDB-Tabelle, die App Studio für Sie verwaltet. Die DynamoDB-Tabelle wird automatisch aktualisiert, wenn Sie Ihre Entität aktualisieren. Mit dieser Option müssen Sie eine Datenquelle eines Drittanbieters nicht manuell erstellen, verwalten oder eine Verbindung herstellen oder die Zuordnung von Entitätsfeldern zu Tabellenspalten festlegen. Die gesamte Datenmodellierung und Konfiguration Ihrer App erfolgt in App Studio. Diese Option ist vorzuziehen, wenn Sie Ihre eigenen Datenquellen und eine DynamoDB-Tabelle nicht verwalten möchten und ihre Funktionalität für Ihre App ausreichend ist.
+ [Eine leere Entität erstellen](#data-entities-create-empty): Erstellen Sie eine leere Entität von Grund auf neu. Diese Option ist vorzuziehen, wenn Sie keine vorhandenen Datenquellen oder Konnektoren haben, die von einem Administrator erstellt wurden, und Sie das Datenmodell Ihrer App flexibel gestalten möchten, ohne durch externe Datenquellen eingeschränkt zu werden. Sie können die Entität nach der Erstellung mit einer Datenquelle verbinden.
+ [Eine Entität mit KI erstellen](#data-entities-create-with-ai): Generieren Sie eine Entität, Felder, Datenaktionen und Beispieldaten auf der Grundlage des angegebenen Entitätsnamens. Diese Option ist vorzuziehen, wenn Sie eine Vorstellung vom Datenmodell für Ihre App haben, aber Hilfe bei der Übersetzung in eine Entität benötigen.

## Eine Entität aus einer vorhandenen Datenquelle erstellen
<a name="data-entities-create-existing-data-source"></a>

Verwenden Sie eine Tabelle aus einer Datenquelle, um automatisch eine Entität und ihre Felder zu erstellen und die Entitätsfelder den Spalten der Tabelle zuzuordnen. Diese Option ist vorzuziehen, wenn Sie über eine bestehende Datenquelle verfügen, die Sie in Ihrer App Studio-App verwenden möchten.

1. Navigieren Sie bei Bedarf zu Ihrer Anwendung.

1. Wählen Sie oben auf der Leinwand die Registerkarte **Daten** aus.

1. Wenn Ihre App keine Entitäten enthält, wählen Sie **\$1 Entität erstellen**. Andernfalls wählen Sie im Menü **Entitäten** auf der linken Seite **\$1 Hinzufügen**.

1. Wählen Sie **Tabelle aus einer vorhandenen Datenquelle verwenden** aus.

1. Wählen Sie **unter Connector** den Connector aus, der die Tabelle enthält, die Sie zum Erstellen Ihrer Entität verwenden möchten.

1. Wählen Sie **unter Tabelle** die Tabelle aus, die Sie zum Erstellen Ihrer Entität verwenden möchten.

1. Aktivieren Sie das Kontrollkästchen **Datenaktionen erstellen**, um Datenaktionen zu erstellen.

1. Klicken Sie auf **Create entity** (Entity erstellen). Ihre Entität ist jetzt erstellt und Sie können sie im Bereich **Entitäten** auf der linken Seite sehen.

1. Konfigurieren Sie Ihre neue Entität, indem Sie den Anweisungen unter folgen. [Konfiguration oder Bearbeitung einer Entität in einer App Studio-App](data-entities-edit.md) Beachten Sie, dass einige Eigenschaften oder Ressourcen bereits erstellt wurden, da Ihre Entität mit einer vorhandenen Datenquelle erstellt wurde, z. B. Felder, die verbundene Datenquelle und Feldzuordnung. Außerdem enthält Ihre Entität Datenaktionen, wenn Sie bei der Erstellung das Kontrollkästchen **Datenaktionen erstellen** aktiviert haben.

## Eine Entität mit einer von App Studio verwalteten Datenquelle erstellen
<a name="data-entities-create-managed-data-source"></a>

Erstellen Sie eine verwaltete Entität und die entsprechende DynamoDB-Tabelle, die von App Studio verwaltet wird. Die DynamoDB-Tabelle ist zwar im zugehörigen AWS Konto vorhanden, aber wenn Änderungen an der Entität in der App Studio-App vorgenommen werden, wird die DynamoDB-Tabelle automatisch aktualisiert. Mit dieser Option müssen Sie eine Datenquelle eines Drittanbieters nicht manuell erstellen, verwalten oder eine Verbindung herstellen oder die Zuordnung von Entitätsfeldern zu Tabellenspalten festlegen. Diese Option ist vorzuziehen, wenn Sie Ihre eigenen Datenquellen und eine DynamoDB-Tabelle nicht verwalten möchten und ihre Funktionalität für Ihre App ausreichend ist. Weitere Informationen zu verwalteten Entitäten finden Sie unter. [Verwaltete Datenentitäten in AWS App Studio](managed-data-entities.md)

Sie können dieselben verwalteten Entitäten in mehreren Anwendungen verwenden. Detaillierte Anweisungen finden Sie unter [Eine Entität aus einer vorhandenen Datenquelle erstellen](#data-entities-create-existing-data-source).

1. Navigieren Sie bei Bedarf zu Ihrer Anwendung.

1. Wählen Sie oben auf der Leinwand die Registerkarte **Daten** aus.

1. Wenn Ihre App keine Entitäten enthält, wählen Sie **\$1 Entität erstellen**. Andernfalls wählen Sie im Menü **Entitäten** auf der linken Seite **\$1 Hinzufügen**.

1. Wählen Sie **Verwaltete App Studio-Entität erstellen** aus.

1. Geben Sie im **Feld Entitätsname** einen Namen für Ihre Entität ein.

1. Geben Sie im Feld **Primärschlüssel** einen Namen für den Primärschlüssel Ihrer Entität ein. Der Primärschlüssel ist der eindeutige Bezeichner der Entität und kann nach der Erstellung der Entität nicht geändert werden.

1. Wählen Sie unter **Primärschlüssel-Datentyp** den Datentyp des Primärschlüssels Ihrer Entität aus. Der Datentyp kann nach der Erstellung der Entität nicht geändert werden.

1. Klicken Sie auf **Create entity** (Entity erstellen). Ihre Entität ist jetzt erstellt und Sie können sie im Bereich **Entitäten** auf der linken Seite sehen.

1. Konfigurieren Sie Ihre neue Entität, indem Sie den Anweisungen unter folgen. [Konfiguration oder Bearbeitung einer Entität in einer App Studio-App](data-entities-edit.md) Beachten Sie, dass einige Eigenschaften oder Ressourcen bereits erstellt wurden, da Ihre Entität mit verwalteten Daten erstellt wurde, z. B. das Primärschlüsselfeld und die verbundene Datenquelle.

## Eine leere Entität erstellen
<a name="data-entities-create-empty"></a>

Erstellen Sie eine leere Entität von Grund auf neu. Diese Option ist vorzuziehen, wenn Sie keine vorhandenen Datenquellen oder Konnektoren haben, die von einem Administrator erstellt wurden. Das Erstellen einer leeren Entität bietet Flexibilität, da Sie Ihre Entität in Ihrer App Studio-App entwerfen können, ohne durch externe Datenquellen eingeschränkt zu sein. Nachdem Sie das Datenmodell Ihrer App entworfen und die Entität entsprechend konfiguriert haben, können Sie sie später immer noch mit einer externen Datenquelle verbinden.

1. Navigieren Sie bei Bedarf zu Ihrer Anwendung.

1. Wählen Sie oben auf der Leinwand die Registerkarte **Daten** aus.

1. Wenn Ihre App keine Entitäten enthält, wählen Sie **\$1 Entität erstellen**. Andernfalls wählen Sie im Menü **Entitäten** auf der linken Seite **\$1 Hinzufügen**.

1. Wählen Sie **Entität erstellen** aus.

1. Klicken Sie auf **Create entity** (Entity erstellen). Ihre Entität ist jetzt erstellt und Sie können sie im Bereich **Entitäten** auf der linken Seite sehen.

1. Konfigurieren Sie Ihre neue Entität, indem Sie den Anweisungen unter folgen. [Konfiguration oder Bearbeitung einer Entität in einer App Studio-App](data-entities-edit.md)

## Eine Entität mit KI erstellen
<a name="data-entities-create-with-ai"></a>

Generieren Sie eine Entität, Felder, Datenaktionen und Beispieldaten auf der Grundlage des angegebenen Entitätsnamens. Diese Option ist vorzuziehen, wenn Sie eine Vorstellung vom Datenmodell für Ihre App haben, aber Hilfe bei der Übersetzung in eine Entität benötigen.

1. Navigieren Sie bei Bedarf zu Ihrer Anwendung.

1. Wählen Sie oben auf der Leinwand die Registerkarte **Daten** aus.

1. Wenn Ihre App keine Entitäten enthält, wählen Sie **\$1 Entität erstellen**. Andernfalls wählen Sie im Menü **Entitäten** auf der linken Seite **\$1 Hinzufügen**.

1. Wählen Sie **Eine Entität mit KI erstellen** aus.

1. Geben Sie im **Feld Entitätsname** einen Namen für Ihre Entität ein. Dieser Name wird verwendet, um die Felder, Datenaktionen und Beispieldaten Ihrer Entität zu generieren.

1. Aktivieren Sie das Kontrollkästchen **Datenaktionen erstellen**, um Datenaktionen zu erstellen.

1. Wählen Sie **Entität generieren** aus. Ihre Entität ist jetzt erstellt und Sie können sie im Bereich **Entitäten** auf der linken Seite sehen.

1. Konfigurieren Sie Ihre neue Entität, indem Sie den Anweisungen unter folgen. [Konfiguration oder Bearbeitung einer Entität in einer App Studio-App](data-entities-edit.md) Beachten Sie, dass Ihre Entität bereits generierte Felder enthält, da Ihre Entität mit KI erstellt wurde. Außerdem wird Ihre Entität Datenaktionen enthalten, wenn Sie bei der Erstellung das Kontrollkästchen **Datenaktionen erstellen** aktiviert haben.

# Konfiguration oder Bearbeitung einer Entität in einer App Studio-App
<a name="data-entities-edit"></a>

Verwenden Sie die folgenden Themen, um eine Entität in einer App Studio-Anwendung zu konfigurieren.

**Topics**
+ [Den Namen der Entität bearbeiten](data-entities-edit-name.md)
+ [Entitätsfelder hinzufügen, bearbeiten oder löschen](data-entities-edit-fields.md)
+ [Datenaktionen erstellen, bearbeiten oder löschen](data-entities-edit-data-actions.md)
+ [Beispieldaten hinzufügen oder löschen](data-entities-edit-sample-data.md)
+ [Fügen Sie verbundene Datenquellen hinzu oder bearbeiten Sie sie und ordnen Sie Felder zu](data-entities-edit-connection.md)

# Den Namen der Entität bearbeiten
<a name="data-entities-edit-name"></a>

1. Navigieren Sie bei Bedarf zu der Entität, die Sie bearbeiten möchten.

1. Aktualisieren Sie auf der Registerkarte **Konfiguration** unter **Entitätsname** den Entitätsnamen und wählen Sie außerhalb des Textfeldes, um Ihre Änderungen zu speichern.

# Entitätsfelder hinzufügen, bearbeiten oder löschen
<a name="data-entities-edit-fields"></a>

**Tipp**  
Sie können STRG\$1Z drücken, um die letzte Änderung an Ihrer Entität rückgängig zu machen.

1. Navigieren Sie bei Bedarf zu der Entität, die Sie bearbeiten möchten.

1. Auf der Registerkarte **Konfiguration** sehen Sie sich unter **Felder** eine Tabelle mit den Feldern Ihrer Entität an. Entitätsfelder haben die folgenden Spalten:
   + **Anzeigename:** Der Anzeigename ähnelt einer Tabellenüberschrift oder einem Formularfeld und ist für Anwendungsbenutzer sichtbar. Er kann Leerzeichen und Sonderzeichen enthalten, muss jedoch innerhalb einer Entität eindeutig sein.
   + **Systemname:** Der Systemname ist eine eindeutige Kennung, die im Code verwendet wird, um auf ein Feld zu verweisen. Bei der Zuordnung zu einer Spalte in einer Amazon Redshift Redshift-Tabelle muss diese mit dem Spaltennamen der Amazon Redshift Redshift-Tabelle übereinstimmen.
   + **Datentyp:** Der Datentyp, der in diesem Feld gespeichert wird, z. B. `Integer``Boolean`, oder. `String`

1. Um Felder hinzuzufügen:

   1. Um mithilfe von KI Felder auf der Grundlage des Entitätsnamens und der verbundenen Datenquelle zu generieren, wählen Sie **Weitere Felder generieren aus**.

   1. Um ein einzelnes Feld hinzuzufügen, wählen Sie **\$1 Feld hinzufügen**.

1. Um ein Feld zu bearbeiten:

   1. Um den Anzeigenamen zu bearbeiten, geben Sie den gewünschten Wert in das Textfeld **Anzeigename** ein. Wenn der Systemname des Felds nicht bearbeitet wurde, wird er auf den neuen Wert des Anzeigenamens aktualisiert.

   1. Um den Systemnamen zu bearbeiten, geben Sie den gewünschten Wert in das Textfeld **Systemname** ein.

   1. Um den Datentyp zu bearbeiten, wählen Sie das Dropdownmenü **Datentyp** und wählen Sie den gewünschten Typ aus der Liste aus.

   1. Um die Eigenschaften des Felds zu bearbeiten, wählen Sie das Zahnradsymbol des Felds. In der folgenden Liste werden die Feldeigenschaften detailliert beschrieben:
      + **Erforderlich**: Aktivieren Sie diese Option, wenn das Feld für Ihre Datenquelle erforderlich ist.
      + **Primärschlüssel**: Aktivieren Sie diese Option, wenn das Feld einem Primärschlüssel in Ihrer Datenquelle zugeordnet ist.
      + **Eindeutig**: Aktivieren Sie diese Option, wenn der Wert dieses Felds eindeutig sein muss.
      + **Datenquellenstandard verwenden**: Aktivieren Sie diese Option, wenn der Wert des Felds von der Datenquelle bereitgestellt wird, z. B. mithilfe von Autoinkrement oder einem Ereigniszeitstempel.
      + **Datentypoptionen**: Felder bestimmter Datentypen können mit Datentypoptionen wie Minimal- oder Maximalwerten konfiguriert werden.

1. Um ein Feld zu löschen, wählen Sie das Papierkorbsymbol des Felds, das Sie löschen möchten.

# Datenaktionen erstellen, bearbeiten oder löschen
<a name="data-entities-edit-data-actions"></a>

Datenaktionen werden in Anwendungen verwendet, um Aktionen für die Daten einer Entität auszuführen, z. B. das Abrufen aller Datensätze oder das Abrufen eines Datensatzes anhand der ID. Datenaktionen können verwendet werden, um Daten zu finden und zurückzugeben, die bestimmten Bedingungen entsprechen, sodass sie in Komponenten wie Tabellen oder Detailansichten angezeigt werden können.

**Contents**
+ [Datenaktionen erstellen](#data-entities-data-action-add)
+ [Datenaktionen bearbeiten oder konfigurieren](#data-entities-data-action-edit)
+ [Bedingungsoperatoren für Datenaktionen und Beispiele](#data-entities-data-action-operators)
  + [Unterstützung für Bedingungsoperatoren durch die Datenbank](#data-entities-data-action-operators-support)
  + [Beispiele für Bedingungen für Datenaktionen](#data-entities-data-action-operators-examples)
+ [Datenaktionen löschen](#data-entities-data-action-delete)

## Datenaktionen erstellen
<a name="data-entities-data-action-add"></a>

**Tipp**  
Sie können STRG\$1Z drücken, um die letzte Änderung an Ihrer Entität rückgängig zu machen.

1. Navigieren Sie bei Bedarf zu der Entität, für die Sie Datenaktionen erstellen möchten.

1. Wählen Sie die Registerkarte **Datenaktionen** aus.

1. Es gibt zwei Methoden zum Erstellen von Datenaktionen:
   + (Empfohlen) Wenn Sie KI verwenden möchten, um Datenaktionen auf der Grundlage Ihres Entitätsnamens, Ihrer Felder und der verbundenen Datenquelle für Sie zu generieren, wählen Sie **Datenaktionen generieren** aus. Die folgenden Aktionen werden generiert:

     1. `getAll`: Ruft alle Datensätze von einer Entität ab. Diese Aktion ist nützlich, wenn Sie eine Liste von Datensätzen anzeigen oder Operationen an mehreren Datensätzen gleichzeitig ausführen müssen.

     1. `getByID`: Ruft einen einzelnen Datensatz von einer Entität auf der Grundlage seiner eindeutigen Kennung (ID oder Primärschlüssel) ab. Diese Aktion ist nützlich, wenn Sie einen bestimmten Datensatz anzeigen oder Operationen an einem bestimmten Datensatz ausführen müssen.
   + Um eine einzelne Datenaktion hinzuzufügen, wählen Sie **\$1 Datenaktion hinzufügen**.

1. Informationen zum Anzeigen oder Konfigurieren der neuen Datenaktion finden Sie im folgenden Abschnitt,[Datenaktionen bearbeiten oder konfigurieren](#data-entities-data-action-edit).

## Datenaktionen bearbeiten oder konfigurieren
<a name="data-entities-data-action-edit"></a>

1. Navigieren Sie bei Bedarf zu der Entität, für die Sie Datenaktionen erstellen möchten.

1. Wählen Sie die Registerkarte **Datenaktionen** aus.

1. Konfigurieren Sie unter **Felder** die Felder, die von der Abfrage zurückgegeben werden sollen. Standardmäßig sind alle konfigurierten Felder in der Entität ausgewählt.

   Sie können der Datenaktion auch **Joins** hinzufügen, indem Sie die folgenden Schritte ausführen:

   1. Wählen Sie **\$1 Join hinzufügen**, um ein Dialogfeld zu öffnen.

   1. Wählen Sie unter **Verbundene Entität** die Entität aus, die Sie mit der aktuellen Entität verbinden möchten.

   1. Geben Sie im Feld **Alias** optional einen temporären Aliasnamen für die zugehörige Entität ein.

   1. Wählen **Sie unter Verbindungstyp** den gewünschten Verbindungstyp aus.

   1. Definieren Sie die Join-Klausel, indem Sie die Felder aus jeder Entität auswählen.

   1. Wählen Sie **Hinzufügen**, um die Verknüpfung zu erstellen.

   Nach der Erstellung wird der Join im Bereich **Joins** angezeigt, sodass zusätzliche Felder in der Drop-down-Liste „**Zurückzusetzende Felder**“ verfügbar sind. Sie können mehrere Verknüpfungen hinzufügen, einschließlich verketteter Verknüpfungen zwischen Entitäten. Sie können auch nach Feldern verbundener Entitäten filtern und sortieren.

   Um einen Join zu löschen, klicken Sie auf das Papierkorbsymbol neben dem Join. Dadurch werden alle Felder aus dieser Verknüpfung entfernt und alle abhängigen Verknüpfungen oder Einschränkungen, die diese Felder verwenden, werden aufgehoben.

1. Fügen Sie **unter Bedingungen** Regeln hinzu, bearbeiten oder entfernen Sie sie, die die Ausgabe der Abfrage filtern. Sie können Regeln in Gruppen organisieren und mehrere Regeln mit `OR` Oder-Anweisungen `AND` verketten. Weitere Informationen zu den Operatoren, die Sie verwenden können, finden Sie unter[Bedingungsoperatoren für Datenaktionen und Beispiele](#data-entities-data-action-operators).

1. Konfigurieren Sie unter **Sortierung**, wie die Abfrageergebnisse sortiert werden, indem Sie ein Attribut auswählen und eine auf- oder absteigende Reihenfolge wählen. Sie können die Sortierkonfiguration entfernen, indem Sie auf das Papierkorbsymbol neben der Sortierregel klicken.

1. Unter **Transformationsergebnisse** können Sie benutzerdefinierte Werte eingeben, JavaScript um Ergebnisse zu ändern oder zu formatieren, bevor sie angezeigt oder an Automatisierungen gesendet werden.

1. Sehen Sie sich in der **Ausgabevorschau** eine Vorschautabelle der Abfrageausgabe an, die auf den konfigurierten Feldern, Filtern, Sortierungen und JavaScript basiert.

## Bedingungsoperatoren für Datenaktionen und Beispiele
<a name="data-entities-data-action-operators"></a>

Sie können Bedingungsoperatoren verwenden, um einen konfigurierten Ausdruckswert mit einer Entitätsspalte zu vergleichen, um eine Teilmenge von Datenbankobjekten zurückzugeben. Die Operatoren, die Sie verwenden können, hängen vom Datentyp der Spalte und vom Datenbanktyp ab, mit dem die Entität verbunden ist, z. B. Amazon Redshift, Amazon Aurora oder Amazon DynamoDB.

Die folgenden Bedingungsoperatoren können mit allen Datenbankdiensten verwendet werden:
+ `=`und`!=`: Verfügbar für alle Datentypen (ausgenommen Primärschlüsselspalten).
+ `<=`, `>=``<`, und`>=`: Nur für numerische Spalten verfügbar.
+ `IS NULL`und`IS NOT NULL`: Wird verwendet, um Spalten abzugleichen, die Null- oder Leerwerte enthalten. Nullwerte werden häufig in jeder Datenbank unterschiedlich interpretiert. In App Studio sucht der `NULL` Operator jedoch nach Datensätzen, die Nullwerte in der verbundenen Datenbanktabelle enthalten, und gibt sie zurück.

Die folgenden Bedingungsoperatoren können nur in Entitäten verwendet werden, die mit Datenbankdiensten verbunden sind, die sie unterstützen:
+ `LIKE`und `NOT LIKE` (Redshift, Aurora): Wird für die Durchführung musterbasierter Abfragen in der verbundenen Datenbank verwendet. Der `LIKE` Operator bietet Flexibilität bei der Suchfunktion, da er Datensätze findet und zurückgibt, die den angegebenen Mustern entsprechen. Sie definieren die Muster mithilfe von Platzhalterzeichen, die einem beliebigen Zeichen oder einer beliebigen Zeichenfolge innerhalb des Musters entsprechen. Jedes Datenbankmanagementsystem hat einen eigenen Satz von Platzhalterzeichen, aber die beiden beliebtesten sind `%` die Darstellung einer beliebigen Anzahl von Zeichen (einschließlich 0) und `_` die Darstellung eines einzelnen Zeichens.
+ `Contains`und `Not Contains` (DynamoDB): Wird verwendet, um eine Suche mit Berücksichtigung von Groß- und Kleinschreibung durchzuführen, um festzustellen, ob der angegebene Text in den Spaltenwerten gefunden wird. 
+ `Starts With`und `Not Starts With` (DynamoDB): Wird für eine Suche mit Berücksichtigung von Groß- und Kleinschreibung verwendet, um festzustellen, ob der angegebene Text am Anfang der Spaltenwerte gefunden wird. 

### Unterstützung für Bedingungsoperatoren durch die Datenbank
<a name="data-entities-data-action-operators-support"></a>

Die folgende Tabelle zeigt, welche Bedingungsoperatoren für Datenaktionen von jeder Datenbank unterstützt werden, die eine Verbindung zu App Studio herstellen kann.


|  | =, \$1=, <, >, <=, >= | WIE, NICHT WIE | Enthält, enthält nicht | Beginnt mit, beginnt nicht mit | IST NULL, IST NICHT NULL | 
| --- | --- | --- | --- | --- | --- | 
|  **DynamoDB**  |  Ja  |  Nein  |  Ja  |  Ja  |  Ja  | 
|  **Aurora**  |  Ja  |  Ja  |  Nein  |  Nein  |  Ja  | 
|  **Redshift**  |  Ja  |  Ja  |  Nein  |  Nein  |  Ja  | 

### Beispiele für Bedingungen für Datenaktionen
<a name="data-entities-data-action-operators-examples"></a>

Betrachten Sie die folgende Datenbanktabelle, die mehrere Elemente mit `hireDate` Feldern `name``city`, und enthält.


| Name | city | Einstellungsdatum | 
| --- | --- | --- | 
|  Adam  |  Seattle  |  2025-03-01  | 
|  Adrienne  |  Boston  |  05. März 2025  | 
|  Bob  |  Albuquerque  |  06.03.2025  | 
|  Carlos  |  Chicago  |  2025-03-10  | 
|  Caroline  |  NULL  |  12.03.2025  | 
|  Rita  |  Miami  |  15.03.2025  | 

Erwägen Sie nun, Datenaktionen in App Studio zu erstellen, die das `name` Feld für Elemente zurückgeben, die bestimmten Bedingungen entsprechen. Die folgende Liste enthält Beispiele für Bedingungen und die Werte, die die Tabelle für jede Bedingung zurückgibt. 

**Anmerkung**  
Die Beispiele sind als SQL-Beispiele formatiert. Sie werden möglicherweise nicht wie in App Studio angezeigt, dienen aber dazu, das Verhalten der Operatoren zu veranschaulichen.
+ `WHERE name LIKE 'Adam'`: Gibt zurück`Adam`.
+ `WHERE name LIKE 'A%'`: Kehrt zurück `Adam` und`Adrienne`.
+ `WHERE name NOT LIKE 'B_B'`: Gibt`Adam`, `Adrienne` `Carlos``Caroline`, und zurück`Rita`.
+ `WHERE contains(name, 'ita')`: Kehrt zurück`Rita`.
+ `WHERE begins_with(name, 'Car')`: Kehrt zurück `Carlos` und`Caroline`.
+ `WHERE city IS NULL`: Kehrt zurück`Caroline`.
+ `WHERE hireDate < "2025-03-06"`: Kehrt zurück `Adam` und`Adrienne`.
+ `WHERE hireDate >= DateTime.now().toISODate()`: Hinweis, der das aktuelle Datum `DateTime.now().toISODate()` zurückgibt. In einem Szenario, in dem das aktuelle Datum 2025-03-10 ist, gibt der Ausdruck, und zurück`Carlos`. `Caroline` `Rita`

**Tipp**  
Weitere Informationen zum Vergleichen von Datums- und Uhrzeitangaben in Ausdrücken finden Sie unter. [Datum und Uhrzeit](expressions.md#expressions-date-time)

## Datenaktionen löschen
<a name="data-entities-data-action-delete"></a>

Gehen Sie wie folgt vor, um Datenaktionen aus einer App Studio-Entität zu löschen.

1. Navigieren Sie bei Bedarf zu der Entität, für die Sie Datenaktionen löschen möchten.

1. Wählen Sie die Registerkarte **Datenaktionen** aus.

1. Wählen Sie für jede Datenaktion, die Sie löschen möchten, das Dropdownmenü neben **Bearbeiten** und dann **Löschen** aus.

1. Wählen Sie im Dialogfeld die Option **Bestätigen** aus.

# Beispieldaten hinzufügen oder löschen
<a name="data-entities-edit-sample-data"></a>

Sie können Beispieldaten zu Entitäten in einer App Studio-Anwendung hinzufügen. Da Anwendungen erst mit externen Diensten kommunizieren, wenn sie veröffentlicht wurden, können Beispieldaten verwendet werden, um Ihre Anwendung und Entität in Vorschauumgebungen zu testen.

1. Navigieren Sie bei Bedarf zu der Entität, die Sie bearbeiten möchten.

1. Wählen Sie die Registerkarte **Beispieldaten**.

1. Um Beispieldaten zu generieren, wählen Sie **Weitere Beispieldaten generieren** aus.

1. Um Beispieldaten zu löschen, aktivieren Sie die Kontrollkästchen der Daten, die Sie löschen möchten, und drücken Sie die Lösch- oder Rücktaste. Wählen Sie **Speichern**, um die Änderungen zu speichern.

# Fügen Sie verbundene Datenquellen hinzu oder bearbeiten Sie sie und ordnen Sie Felder zu
<a name="data-entities-edit-connection"></a>

**Tipp**  
Sie können STRG\$1Z drücken, um die letzte Änderung an Ihrer Entität rückgängig zu machen.

1. Navigieren Sie bei Bedarf zu der Entität, die Sie bearbeiten möchten.

1. Wählen Sie die Registerkarte **Verbindung**, um die Verbindung zwischen der Entität und einer Datenquellentabelle anzuzeigen oder zu verwalten, in der Daten gespeichert werden, wenn Ihre Anwendung veröffentlicht wird. Sobald eine Datenquellentabelle verbunden ist, können Sie die Entitätsfelder den Spalten der Tabelle zuordnen.

1. Wählen Sie unter **Connector** den Konnektor aus, der eine Verbindung zur gewünschten Datenquellentabelle enthält. Weitere Informationen zu Konnektoren finden Sie unter[Connect App Studio über Konnektoren mit anderen Diensten](connectors.md).

1. Wählen Sie unter **Tabelle** die Tabelle aus, die Sie als Datenquelle für die Entität verwenden möchten.

1. Die Tabelle zeigt die Felder der Entität und die Datenquellenspalte, der sie zugeordnet sind. Wählen Sie **Automatische Zuordnung**, um Ihre Entitätsfelder automatisch Ihren Datenquellenspalten zuzuordnen. Sie können Felder in der Tabelle auch manuell zuordnen, indem Sie die Datenquellenspalte in der Dropdownliste für jedes Entitätsfeld auswählen.

# Eine Entität löschen
<a name="data-entities-delete"></a>

Gehen Sie wie folgt vor, um eine Entität aus einer App Studio-Anwendung zu löschen.

**Anmerkung**  
Durch das Löschen einer Entität aus einer App Studio-App wird die verbundene Datenquellentabelle, einschließlich der entsprechenden DynamoDB-Tabelle mit verwalteten Entitäten, nicht gelöscht. Die Datenquellentabellen verbleiben im zugehörigen AWS Konto und müssen auf Wunsch aus dem entsprechenden Dienst gelöscht werden.

**Um eine Entität zu löschen**

1. Navigieren Sie bei Bedarf zu Ihrer Anwendung.

1. Wählen Sie den Tab **Daten** aus.

1. **Wählen Sie im Menü **Entitäten** auf der linken Seite das Ellipsenmenü neben der Entität, die Sie löschen möchten, und wählen Sie Löschen.**

1. Überprüfen Sie die Informationen im Dialogfeld, geben Sie die Entität ein **confirm** und wählen Sie **Löschen**, um sie zu löschen.

# Verwaltete Datenentitäten in AWS App Studio
<a name="managed-data-entities"></a>

In der Regel konfigurieren Sie eine Entität in App Studio mit einer Verbindung zu einer externen Datenbanktabelle. Sie müssen jedes Entitätsfeld erstellen und einer Spalte in der verbundenen Datenbanktabelle zuordnen. Wenn Sie eine Änderung am Datenmodell vornehmen, müssen sowohl die externe Datenbanktabelle als auch die Entität aktualisiert werden, und die geänderten Felder müssen neu zugeordnet werden. Diese Methode ist zwar flexibel und ermöglicht die Verwendung verschiedener Arten von Datenquellen, erfordert jedoch mehr Vorausplanung und kontinuierliche Wartung.

Eine *verwaltete Entität* ist eine Art von Entität, für die App Studio den gesamten Datenspeicher- und Konfigurationsprozess für Sie verwaltet. Wenn Sie eine verwaltete Entität erstellen, wird eine entsprechende DynamoDB-Tabelle im zugehörigen AWS Konto erstellt. Dies gewährleistet eine sichere und transparente Datenverwaltung innerhalb. AWS Bei einer verwalteten Entität konfigurieren Sie das Schema der Entität in App Studio, und die entsprechende DynamoDB-Tabelle wird ebenfalls automatisch aktualisiert.

## Verwaltete Entitäten in mehreren Anwendungen verwenden
<a name="managed-data-entities-other-applications"></a>

Sobald Sie eine verwaltete Entität in einer App Studio-App erstellt haben, kann diese Entität in anderen App Studio-Apps verwendet werden. Dies ist hilfreich für die Konfiguration des Datenspeichers für Apps mit identischen Datenmodellen und Schemas, indem eine einzige zugrunde liegende Ressource zur Verwaltung bereitgestellt wird.

Wenn Sie eine verwaltete Entität in mehreren Anwendungen verwenden, müssen alle Schemaaktualisierungen der entsprechenden DynamoDB-Tabelle mit der ursprünglichen Anwendung vorgenommen werden, in der die verwaltete Entität erstellt wurde. Durch Schemaänderungen an der Entität in anderen Anwendungen wird die entsprechende DynamoDB-Tabelle nicht aktualisiert.

## Einschränkungen verwalteter Entitäten
<a name="managed-data-entities-limitations"></a>

**Einschränkungen bei der Aktualisierung von Primärschlüsseln**: Sie können den Namen oder Typ des Primärschlüssels der Entität nicht ändern, nachdem sie erstellt wurde, da dies eine destruktive Änderung in DynamoDB darstellt und zum Verlust vorhandener Daten führen würde.

**Umbenennen von Spalten**: Wenn Sie eine Spalte in DynamoDB umbenennen, erstellen Sie tatsächlich eine neue Spalte, während die ursprüngliche Spalte die Originaldaten enthält. Die Originaldaten werden nicht automatisch in die neue Spalte kopiert oder aus der ursprünglichen Spalte gelöscht. Sie können verwaltete Entitätsfelder, den so genannten *Systemnamen*, umbenennen, aber Sie verlieren dadurch den Zugriff auf die ursprüngliche Spalte und ihre Daten. Bei der Umbenennung des Anzeigenamens gibt es keine Einschränkungen.

**Ändern des Datentyps**: DynamoDB bietet zwar die Flexibilität, Spaltendatentypen nach der Tabellenerstellung zu ändern, aber solche Änderungen können sich erheblich auf bestehende Daten sowie auf die Abfragelogik und Genauigkeit auswirken. Bei Änderungen des Datentyps müssen alle vorhandenen Daten so transformiert werden, dass sie dem neuen Format entsprechen, was bei großen, aktiven Tabellen komplex ist. Darüber hinaus können Datenaktionen zu unerwarteten Ergebnissen führen, bis die Datenmigration abgeschlossen ist. Sie können zwischen den Datentypen von Feldern wechseln, aber die vorhandenen Daten werden nicht auf den neuen Datentyp migriert.

**Spalte sortieren**: DynamoDB ermöglicht den Abruf sortierter Daten über Sortierschlüssel. Sortierschlüssel müssen zusammen mit dem Partitionsschlüssel als Teil zusammengesetzter Primärschlüssel definiert werden. Zu den Einschränkungen gehören ein obligatorischer Sortierschlüssel, eine begrenzte Sortierung innerhalb einer Partition und keine globale Sortierung über Partitionen hinweg. Eine sorgfältige Datenmodellierung von Sortierschlüsseln ist erforderlich, um heiße Partitionen zu vermeiden. Wir werden den Meilenstein Sorting for Preview nicht unterstützen.

**Verknüpfungen**: Verknüpfungen werden in DynamoDB nicht unterstützt. Tabellen sind konstruktionsbedingt denormalisiert, um teure Join-Operationen zu vermeiden. Um one-to-many Beziehungen zu modellieren, enthält die untergeordnete Tabelle ein Attribut, das auf den Primärschlüssel der übergeordneten Tabelle verweist. Bei Datenabfragen mit mehreren Tabellen werden Elemente aus der übergeordneten Tabelle nachgeschlagen, um Details abzurufen. Wir werden im Rahmen des Vorschau-Meilensteins keine systemeigenen Verknüpfungen für verwaltete Entitäten unterstützen. Um dieses Problem zu umgehen, werden wir einen Automatisierungsschritt einführen, der eine Datenzusammenführung von zwei Entitäten durchführen kann. Dies wird einer Suche auf einer Ebene sehr ähnlich sein. Wir werden den Meilenstein Sorting for Preview nicht unterstützen.

**Env Stage**: Wir werden die Veröffentlichung zu Testzwecken zulassen, aber in beiden Umgebungen denselben Managed Store verwenden

# Seiten- und Automatisierungsparameter
<a name="paramters"></a>

Parameter sind eine leistungsstarke Funktion in AWS App Studio, mit der dynamische Werte zwischen verschiedenen Komponenten, Seiten und Automatisierungen innerhalb Ihrer Anwendung übergeben werden. Mithilfe von Parametern können Sie flexible und kontextsensitive Erlebnisse schaffen, wodurch Ihre Anwendungen reaktionsschneller und personalisierter werden. Dieser Artikel behandelt zwei Arten von Parametern: Seitenparameter und Automatisierungsparameter.

**Topics**
+ [Seitenparameter](parameters-page.md)
+ [Automatisierungsparameter](parameters-automation.md)

# Seitenparameter
<a name="parameters-page"></a>

Seitenparameter sind eine Möglichkeit, Informationen zwischen Seiten zu senden. Sie werden häufig verwendet, wenn innerhalb einer App Studio-App von einer Seite zur anderen navigiert wird, um den Kontext beizubehalten oder Daten zu übergeben. Seitenparameter bestehen normalerweise aus einem Namen und einem Wert.

## Anwendungsfälle für Seitenparameter
<a name="parameters-pages-use-cases"></a>

Seitenparameter werden für die Übertragung von Daten zwischen verschiedenen Seiten und Komponenten in Ihren App Studio-Anwendungen verwendet. Sie sind besonders hilfreich für die folgenden Anwendungsfälle:

1. **Suchen und Filtern**: Wenn Nutzer auf der Startseite Ihrer App suchen, können die Suchbegriffe als Parameter an die Ergebnisseite übergeben werden, sodass nur die relevanten gefilterten Elemente angezeigt werden. Wenn ein Benutzer beispielsweise nach sucht*noise-cancelling headphones*, *noise-cancelling headphones* kann der Parameter mit dem Wert an die Seite mit der Produktliste übergeben werden.

1. **Artikeldetails anzeigen**: Wenn ein Benutzer auf ein Angebot klickt, z. B. auf ein Produkt, kann die eindeutige Kennung dieses Artikels als Parameter an die Detailseite übergeben werden. Auf diese Weise können auf der Detailseite alle Informationen zu dem bestimmten Artikel angezeigt werden. Wenn ein Benutzer beispielsweise auf ein Kopfhörerprodukt klickt, wird die eindeutige ID des Produkts als Parameter an die Produktdetailseite übergeben.

1. **Weitergabe des Benutzerkontextes bei der Seitennavigation**: Wenn Benutzer zwischen den Seiten navigieren, können Parameter wichtige Kontexte wie den Standort des Benutzers, bevorzugte Produktkategorien, Warenkorbinhalte und andere Einstellungen weitergeben. Wenn ein Nutzer beispielsweise verschiedene Produktkategorien in Ihrer App durchsucht, werden sein Standort und seine bevorzugten Kategorien als Parameter gespeichert, was für ein personalisiertes und einheitliches Erlebnis sorgt.

1. **Deep-Links**: Verwenden Sie Seitenparameter, um einen Link zu einer bestimmten Seite innerhalb der App zu teilen oder mit einem Lesezeichen zu versehen.

1. **Datenaktionen**: Sie können Datenaktionen erstellen, die Parameterwerte akzeptieren, um Ihre Datenquellen auf der Grundlage der übergebenen Parameter zu filtern und abzufragen. Auf der Produktlistenseite können Sie beispielsweise eine Datenaktion erstellen, die `category` Parameter akzeptiert, um die entsprechenden Produkte abzurufen.

## Überlegungen zur Sicherheit von Seitenparametern
<a name="parameters-pages-security"></a>

Seitenparameter bieten zwar eine leistungsstarke Möglichkeit, Daten zwischen Seiten zu übertragen, sollten jedoch mit Vorsicht verwendet werden, da sie möglicherweise vertrauliche Informationen preisgeben können, wenn sie nicht ordnungsgemäß verwendet werden. Hier sind einige wichtige Sicherheitsüberlegungen, die Sie beachten sollten:

1. **Vermeiden Sie die Offenlegung sensibler Daten in URLs**

   1. **Risiko**: URLs, einschließlich der Parameter für Datenaktionen, sind häufig in Serverprotokollen, im Browserverlauf und an anderen Stellen sichtbar. Daher ist es wichtig, zu vermeiden, dass sensible Daten wie Benutzeranmeldedaten, personenbezogene Daten (PII) oder andere vertrauliche Daten in Seitenparameterwerten offengelegt werden.

   1. **Schadensbegrenzung**: Erwägen Sie die Verwendung von Kennungen, die den sensiblen Daten sicher zugeordnet werden können. Anstatt beispielsweise den Namen oder die E-Mail-Adresse eines Benutzers als Parameter zu übergeben, könnten Sie eine zufällige eindeutige Kennung übergeben, mit der der Name oder die E-Mail-Adresse des Benutzers abgerufen werden kann.

# Automatisierungsparameter
<a name="parameters-automation"></a>

Automatisierungsparameter sind eine leistungsstarke Funktion in App Studio, mit der flexible und wiederverwendbare Automatisierungen erstellt werden können, indem dynamische Werte aus verschiedenen Quellen übergeben werden, z. B. aus der Benutzeroberfläche, anderen Automatisierungen oder Datenaktionen. Sie dienen als Platzhalter, die bei der Ausführung der Automatisierung durch tatsächliche Werte ersetzt werden, sodass Sie dieselbe Automatisierung jedes Mal mit unterschiedlichen Eingaben verwenden können. 

Innerhalb einer Automatisierung haben Parameter eindeutige Namen, und Sie können auf den Wert eines Parameters verweisen, indem Sie die Variable params gefolgt vom Namen des Parameters verwenden, z. B. `{{params.customerId}}`

Dieser Artikel bietet ein tiefes Verständnis der Automatisierungsparameter, einschließlich ihrer grundlegenden Konzepte, Verwendung und bewährten Methoden.

## Vorteile von Automatisierungsparametern
<a name="parameters-automation-benefits"></a>

Automatisierungsparameter bieten mehrere Vorteile, darunter die folgende Liste:

1. **Wiederverwendbarkeit**: Mithilfe von Parametern können Sie wiederverwendbare Automatisierungen erstellen, die mit unterschiedlichen Eingabewerten angepasst werden können, sodass Sie dieselbe Automatisierungslogik mit unterschiedlichen Eingaben wiederverwenden können.

1. **Flexibilität**: Anstatt Werte fest in einer Automatisierung zu codieren, können Sie Parameter definieren und bei Bedarf unterschiedliche Werte angeben, wodurch Ihre Automatisierungen dynamischer und anpassungsfähiger werden.

1. **Trennung von Belangen**: Parameter helfen dabei, die Automatisierungslogik von den verwendeten spezifischen Werten zu trennen, was die Organisation und Wartbarkeit des Codes fördert.

1. **Validierung**: Jeder Parameter hat einen Datentyp, z. B. eine Zeichenfolge, eine Zahl oder einen booleschen Wert, der zur Laufzeit validiert wird. Dadurch wird sichergestellt, dass Anfragen mit falschen Datentypen abgelehnt werden, ohne dass ein benutzerdefinierter Validierungscode erforderlich ist.

1. **Optionale und erforderliche Parameter**: Sie können Automatisierungsparameter als optional oder erforderlich festlegen. Erforderliche Parameter müssen bei der Ausführung der Automatisierung angegeben werden, während optionale Parameter Standardwerte haben oder weggelassen werden können. Diese Flexibilität ermöglicht es Ihnen, vielseitigere Automatisierungen zu erstellen, die auf der Grundlage der bereitgestellten Parameter unterschiedliche Szenarien bewältigen können.

## Szenarien und Anwendungsfälle
<a name="parameters-automation-scenarios"></a>

### Szenario: Produktdetails werden abgerufen
<a name="parameters-automation-scenario-product-details"></a>



Stellen Sie sich vor, Sie haben eine Automatisierung, die Produktdetails auf der Grundlage einer Produkt-ID aus einer Datenbank abruft. Diese Automatisierung könnte einen Parameter haben, der aufgerufen wird`productId`.

Der `productId` Parameter fungiert als Platzhalter, den Sie beim Ausführen der Automatisierung mit dem tatsächlichen Produkt-ID-Wert ausfüllen können. Anstatt eine bestimmte Produkt-ID fest in der Automatisierung zu codieren, können Sie den `productId` Parameter definieren und bei jeder Ausführung der Automatisierung unterschiedliche Produkt-ID-Werte übergeben.

Sie könnten diese Automatisierung von der Datenquelle einer Komponente aus aufrufen und die ID des ausgewählten Produkts als `productId` Parameter mit der Syntax in doppelten geschweiften Klammern übergeben:. `{{ui.productsTable.selectedRow.id}}` Auf diese Weise ruft die Automatisierung, wenn ein Benutzer ein Produkt aus einer Tabelle (`ui.productsTable`) auswählt, die Details für das ausgewählte Produkt ab, indem sie die ID der ausgewählten Zeile als `productId` Parameter übergibt.

Alternativ können Sie diese Automatisierung von einer anderen Automatisierung aus aufrufen, die eine Produktliste durchläuft und die Details für jedes Produkt abruft, indem die Produkt-ID als Parameter übergeben wird. `productId` In diesem Szenario würde der `productId` Parameterwert in jeder Iteration der `{{product.id}}` Schleife dynamisch aus dem Ausdruck bereitgestellt.

Durch die Verwendung des `productId` Parameters und der Syntax mit doppelten geschweiften Klammern können Sie diese Automatisierung flexibler und wiederverwendbarer machen. Anstatt separate Automatisierungen für jedes Produkt zu erstellen, können Sie eine einzige Automatisierung verwenden, mit der Details für jedes Produkt abgerufen werden können, indem Sie einfach die entsprechende Produkt-ID als Parameterwert aus verschiedenen Quellen angeben, z. B. aus UI-Komponenten oder anderen Automatisierungen.

### Szenario: Umgang mit optionalen Parametern mit Fallback-Werten
<a name="parameters-automation-scenario-optional-parameters"></a>

Stellen wir uns ein Szenario vor, in dem Sie eine Entität „Aufgabe“ mit einer erforderlichen Spalte „Besitzer“ haben, aber Sie möchten, dass dieses Feld in der Automatisierung optional ist und Sie einen Fallback-Wert angeben, falls der Besitzer nicht ausgewählt ist.

1. Erstellen Sie eine Automatisierung mit einem Parameter namens`Owner`, der dem `Owner` Feld der `Task` Entität zugeordnet ist.

1. Da das `Owner` Feld in der Entität erforderlich ist, wird der `Owner` Parameter mit der erforderlichen Einstellung synchronisiert.

1. Um den `Owner` Parameter in der Automatisierung optional zu machen, schalten Sie die `required` Einstellung für diesen Parameter aus.

1. In Ihrer Automatisierungslogik können Sie einen Ausdruck wie `{{params.Owner || currentUser.userId}}` verwenden. Dieser Ausdruck prüft, ob der `Owner` Parameter angegeben ist. Wenn er nicht angegeben wird, wird auf die ID des aktuellen Benutzers als Eigentümer zurückgegriffen.

1. Auf diese Weise weist die Automatisierung automatisch den aktuellen Benutzer als Eigentümer für die Aufgabe zu, wenn der Benutzer keinen Besitzer in einem Formular oder einer Komponente auswählt.

Indem Sie die `required` Einstellung für den `Owner` Parameter umschalten und einen Fallback-Ausdruck verwenden, können Sie ihn von der Entitätsfeldanforderung entkoppeln, ihn in der Automatisierung optional machen und einen Standardwert angeben, wenn der Parameter nicht bereitgestellt wird.

## Definieren von Automatisierungsparametertypen
<a name="parameters-automation-create"></a>

Indem Sie Parametertypen verwenden, um Datentypen zu spezifizieren und Anforderungen festzulegen, können Sie die Eingaben für Ihre Automatisierungen steuern. Auf diese Weise können Sie sicherstellen, dass Ihre Automatisierungen zuverlässig mit den erwarteten Eingaben ausgeführt werden.

### Synchronisieren von Typen aus einer Entität
<a name="parameters-automation-synchronize-entity"></a>

Die dynamische Synchronisation von Parametertypen und Anforderungen aus Entitätsfelddefinitionen optimiert die Gebäudeautomatisierung, die mit Entitätsdaten interagiert, und stellt sicher, dass der Parameter immer den neuesten Feldtyp und die neuesten Anforderungen der Entitätsfelder widerspiegelt.

Das folgende Verfahren beschreibt die allgemeinen Schritte zum Synchronisieren von Parametertypen aus einer Entität:

1. Erstellen Sie eine Entität mit typisierten Feldern (z. B. Boolean, Number usw.) und markieren Sie Felder nach Bedarf.

1. Erstellen Sie eine neue Automatisierung.

1. Fügen Sie der Automatisierung Parameter hinzu und wählen Sie bei der Auswahl des **Typs** das Entitätsfeld aus, mit dem Sie synchronisieren möchten. Der Datentyp und die erforderliche Einstellung werden automatisch aus dem zugewiesenen Entitätsfeld synchronisiert

1. Bei Bedarf können Sie die Einstellung „erforderlich“ überschreiben, indem Sie sie on/off für jeden Parameter umschalten. Das bedeutet, dass der erforderliche Status nicht mit dem Entitätsfeld synchronisiert wird, ansonsten aber synchronisiert bleibt.

### Typen manuell definieren
<a name="parameters-automation-custom-types"></a>

Sie können Parametertypen auch manuell definieren, ohne von einer Entität aus zu synchronisieren

Durch die Definition benutzerdefinierter Parametertypen können Sie Automatisierungen erstellen, die bestimmte Eingabetypen akzeptieren und optionale oder erforderliche Parameter nach Bedarf verarbeiten, ohne sich auf Entitätsfeldzuordnungen verlassen zu müssen.

1. Erstellen Sie eine Entität mit typisierten Feldern (z. B. Boolean, Number usw.) und markieren Sie Felder nach Bedarf.

1. Erstellen Sie eine neue Automatisierung.

1. Fügen Sie der Automatisierung Parameter hinzu und wählen Sie bei der Auswahl des **Typs** den gewünschten Typ aus.

## Konfiguration dynamischer Werte, die an Automatisierungsparameter übergeben werden sollen
<a name="parameters-automation-pass-values"></a>

Sobald Sie Parameter für eine Automatisierung definiert haben, können Sie ihnen beim Aufrufen der Automatisierung Werte übergeben. Sie können Parameterwerte auf zwei Arten übergeben:

1. **Komponententrigger**: Wenn Sie die Automatisierung über einen Komponententrigger aufrufen, z. B. durch einen Klick auf eine Schaltfläche, können Sie JavaScript Ausdrücke verwenden, um Werte aus dem Komponentenkontext zu übergeben. Wenn Sie beispielsweise ein Texteingabefeld mit dem Namen haben`emailInput`, können Sie seinen Wert mit dem folgenden Ausdruck an den E-Mail-Parameter übergeben:`ui.emailInput.value`.

1. **Andere Automatisierungen**: Wenn Sie die Automatisierung von einer anderen Automatisierung aus aufrufen, können Sie JavaScript Ausdrücke verwenden, um Werte aus dem Automatisierungskontext zu übergeben. Sie können beispielsweise den Wert eines anderen Parameters oder das Ergebnis eines vorherigen Aktionsschritts übergeben.

## Geben Sie Sicherheit ein
<a name="parameters-automation-type-safety"></a>

Durch die Definition von Parametern mit bestimmten Datentypen wie String, Number oder Boolean können Sie sicherstellen, dass die an Ihre Automatisierung übergebenen Werte dem erwarteten Typ entsprechen.

**Anmerkung**  
In App Studio sind Datum (e) ISO-Zeichenkettendaten, und diese werden ebenfalls validiert.

Diese Typsicherheit trägt dazu bei, Typkonflikte zu vermeiden, die zu Fehlern oder unerwartetem Verhalten in Ihrer Automatisierungslogik führen können. Wenn Sie beispielsweise einen Parameter als a definieren`Number`, können Sie sicher sein, dass jeder an diesen Parameter übergebene Wert eine Zahl ist, und Sie müssen in Ihrer Automatisierung keine zusätzlichen Typprüfungen oder Konvertierungen durchführen.

## Validierung
<a name="parameters-automation-validation"></a>

Sie können Ihren Parametern Validierungsregeln hinzufügen, um sicherzustellen, dass die an Ihre Automatisierung übergebenen Werte bestimmten Kriterien entsprechen.

App Studio bietet zwar keine integrierten Validierungseinstellungen für Parameter, Sie können jedoch benutzerdefinierte Validierungen implementieren, indem Sie Ihrer Automatisierung eine JavaScript Aktion hinzufügen, die einen Fehler auslöst, wenn bestimmte Einschränkungen verletzt werden.

Für Entitätsfelder wird eine Teilmenge von Validierungsregeln, wie z. B. minimum/maximum Werte, unterstützt. Diese werden jedoch nicht auf Automatisierungsebene validiert, sondern nur auf der Datenebene, wenn Create/Update/Delete Datensatzaktionen ausgeführt werden.

## Bewährte Methoden für Automatisierungsparameter
<a name="parameters-automation-best-practices"></a>

Um sicherzustellen, dass Ihre Automatisierungsparameter gut konzipiert, wartungsfreundlich und benutzerfreundlich sind, befolgen Sie diese bewährten Methoden:

1. **Verwenden Sie aussagekräftige Parameternamen**: Wählen Sie Parameternamen, die den Zweck oder den Kontext des Parameters klar beschreiben.

1. **Geben Sie Parameterbeschreibungen** an: Nutzen Sie das Feld **Beschreibung**, wenn Sie Parameter definieren, um deren Zweck, Einschränkungen und Erwartungen zu erläutern. Diese Beschreibungen werden in den JSDoc Kommentaren angezeigt, wenn auf den Parameter verwiesen wird, sowie in allen Benutzeroberflächen, in denen Benutzer beim Aufrufen der Automatisierung Werte für die Parameter angeben müssen.

1. **Verwenden Sie geeignete Datentypen**: Überlegen Sie sich sorgfältig, welchen Datentyp die einzelnen Parameter auf der Grundlage der erwarteten Eingabewerte haben, z. B.: Zeichenfolge, Zahl, Boolean, Objekt.

1. **Überprüfen Sie die Parameterwerte**: Implementieren Sie geeignete Validierungsprüfungen innerhalb Ihrer Automatisierung, um sicherzustellen, dass die Parameterwerte bestimmten Anforderungen entsprechen, bevor Sie mit weiteren Aktionen fortfahren.

1. **Verwenden Sie Ausweichwerte oder Standardwerte**: App Studio unterstützt derzeit zwar nicht die Festlegung von Standardwerten für Parameter, Sie können jedoch Fallback- oder Standardwerte implementieren, wenn Sie die Parameter in Ihrer Automatisierungslogik verwenden. Sie können beispielsweise einen Ausdruck wie verwenden, `{{ params.param1 || "default value" }}` um einen Standardwert bereitzustellen, wenn der `param1` Parameter nicht bereitgestellt wird oder einen falschen Wert hat.

1. **Beibehaltung der Parameterkonsistenz**: Wenn Sie mehrere Automatisierungen haben, die ähnliche Parameter erfordern, versuchen Sie, die Konsistenz der Parameternamen und Datentypen für alle Automatisierungen aufrechtzuerhalten.

1. **Verwendung von Dokumentparametern**: Sorgen Sie für eine übersichtliche Dokumentation Ihrer Automatisierungen, einschließlich Beschreibungen der einzelnen Parameter, ihres Zwecks, der erwarteten Werte und aller relevanten Beispiele oder Grenzfälle.

1. **Regelmäßige Überprüfung und Refaktorierung**: Überprüfen Sie Ihre Automatisierungen und ihre Parameter regelmäßig und überarbeiten oder konsolidieren Sie die Parameter nach Bedarf, um die Übersichtlichkeit, Wartbarkeit und Wiederverwendbarkeit zu verbessern.

1. **Beschränken Sie die Anzahl der Parameter: Parameter** bieten zwar Flexibilität, aber zu viele Parameter können eine Automatisierung komplex und schwierig zu handhaben machen. Versuchen Sie, ein Gleichgewicht zwischen Flexibilität und Einfachheit zu finden, indem Sie die Anzahl der Parameter auf das Notwendige beschränken.

1. **Erwägen Sie die Gruppierung von** Parametern: Wenn Sie mehrere verwandte Parameter definieren müssen, sollten Sie in Erwägung ziehen, sie zu einem einzigen *Object* Parameter zu gruppieren.

1. **Separate Bedenken**: Vermeiden Sie es, einen einzelnen Parameter für mehrere Zwecke zu verwenden oder Werte, die nichts miteinander zu tun haben, zu einem einzigen Parameter zu kombinieren. Jeder Parameter sollte für ein bestimmtes Anliegen oder eine bestimmte Information stehen.

1. **Verwenden Sie Parameteraliase**: Wenn Sie Parameter mit langen oder komplexen Namen haben, sollten Sie die Verwendung von Aliasen oder Kurzversionen innerhalb der Automatisierungslogik erwägen, um die Lesbarkeit und Wartbarkeit zu verbessern.

Wenn Sie diese bewährten Methoden befolgen, können Sie sicherstellen, dass Ihre Automatisierungsparameter gut konzipiert, wartungsfreundlich und benutzerfreundlich sind, was letztendlich die Gesamtqualität und Effizienz Ihrer Automatisierungen verbessert.

# Verwenden JavaScript , um Ausdrücke in App Studio zu schreiben
<a name="expressions"></a>

In AWS App Studio können Sie JavaScript Ausdrücke verwenden, um das Verhalten und das Erscheinungsbild Ihrer Anwendungen dynamisch zu steuern. Einzeilige JavaScript Ausdrücke werden in doppelten geschweiften Klammern geschrieben und können in verschiedenen Kontexten wie Automatisierungen, UI-Komponenten 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 Bibliotheken von Drittanbietern oder benutzerdefinierten Bibliotheken. JavaScript 

## Basissyntax
<a name="expressions-basic-syntax"></a>

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 bewertet.
+ `{{ "Hello, " + "World!" }}`wird mit „Hello, World\$1“ bewertet.
+ `{{ Math.max(5, 10) }}`wird mit 10 bewertet.
+ `{{ Math.random() * 10 }}`gibt eine Zufallszahl (mit Dezimalzahlen) zwischen [0-10) zurück.

## Interpolation
<a name="expressions-interpolation"></a>

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

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

In diesem Beispiel `currentUser.firstName` handelt es sich um einen JavaScript Ausdruck, der den Vornamen des aktuellen Benutzers abruft, der dann dynamisch in die Begrüßungsnachricht eingefügt wird.

## Verkettung
<a name="expressions-concatenation"></a>

Sie können Zeichenketten und Variablen mit dem `+` Operator in verketten JavaScript, wie im folgenden Beispiel gezeigt.

```
{{ 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 beispielsweise is und `currentRow.FirstName` `currentRow.LastName` is `John``Doe`, dann würde der Ausdruck wie folgt aufgelöst werden`John Doe`.

## Datum und Uhrzeit
<a name="expressions-date-time"></a>

JavaScript stellt verschiedene Funktionen und Objekte für die Arbeit mit Datums- und Uhrzeitangaben bereit. 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
<a name="expressions-date-time-comparison"></a>

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 ist.
+ `{{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
<a name="expressions-code-block"></a>

Neben 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) angezeigt.

## Globale Variablen und Funktionen
<a name="expressions-global-variables-functions"></a>

App Studio bietet Zugriff auf bestimmte globale Variablen und Funktionen, die in Ihren JavaScript Ausdrücken und Codeblöcken verwendet werden können. `currentUser`Ist 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 Werten von UI-Komponenten
<a name="expressions-UI-component-values"></a>

Sie können Ausdrücke in Komponenten und Automatisierungsaktionen verwenden, um Werte von UI-Komponenten sowohl zu referenzieren als auch 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
<a name="expressions-UI-component-values-referencing"></a>

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 derselben Seite auf Werte und Eigenschaften von UI-Komponenten 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 basierend auf ihrem Status ausführen.

**Anmerkung**  
Im `ui` Namespace werden nur Komponenten auf der aktuellen Seite angezeigt, 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 Werte von UI-Komponenten:
+ `{{ui.textInputName.value}}`: Stellt den Wert einer Texteingabekomponente mit dem Namen *textInputName* dar.
+ `{{ui.formName.isValid}}`: Überprüfen Sie anhand der von Ihnen angegebenen Validierungskriterien, ob alle Felder im genannten Formular gültig *formName* sind.
+ `{{ui.tableName.currentRow.columnName}}`: Stellt den Wert einer bestimmten Spalte in der aktuellen Zeile einer benannten Tabellenkomponente dar*tableName*.
+ `{{ui.tableName.selectedRowData.fieldName}}`: Stellt den Wert des angegebenen Felds aus der ausgewählten Zeile in einer Tabellenkomponente mit dem Namen dar*tableName*. 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 die Referenzierung von Komponentenwerten:
+ `{{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 auf der Grundlage des Werts des Eingabe-Textfeldes zu validieren.
+ `{{ui.multiSelect1.value.join(", ")}}`: Bei einer Komponente mit Mehrfachauswahl mit dem Namen *multiSelect1* 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 in der Reihe der ausgewählten Optionen für die *multiSelect1* Komponente enthalten ist. Er gibt true zurück, wenn ausgewählt *option1* ist, andernfalls false. Dies kann nützlich sein, wenn Sie Komponenten bedingt rendern oder Aktionen auf der Grundlage bestimmter Optionsauswahlen ausführen möchten.
+ `{{ui.s3Upload1.files.length > 0}}`: Für eine Amazon S3 S3-Datei-Upload-Komponente mit dem Namen überprüft dieser Ausdruck*s3Upload1*, ob Dateien hochgeladen wurden, indem er die Länge des Dateiarrays überprüft. Dies 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 so, dass sie nur PNG-Bilddateien enthält, und gibt die Anzahl dieser Dateien zurück. Dies kann hilfreich sein, um Informationen über die Typen der hochgeladenen Dateien zu überprüfen oder anzuzeigen.

### Aktualisierung der Werte von UI-Komponenten
<a name="expressions-UI-component-values-updating"></a>

Um den Wert einer Komponente zu aktualisieren oder zu bearbeiten, verwenden Sie den `RunComponentAction` innerhalb einer Automatisierung. Hier ist ein Beispiel für die Syntax, die Sie verwenden können, um den Wert einer Texteingabekomponente zu aktualisieren, die *myInput* mit 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*.

## Mit Tabellendaten arbeiten
<a name="expressions-table-data"></a>

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 verwendet, um auf Tabellendaten aus der aktuellen Zeile in der Tabelle zuzugreifen. Beispielsweise 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.selectedRow`und `ui.tableName.selectedRowData` werden beide für den Zugriff auf Tabellendaten von anderen Komponenten auf der Seite verwendet. Beispielsweise das Festlegen des Namens einer Schaltfläche außerhalb der Tabelle auf der Grundlage der ausgewählten Zeile. Die zurückgegebenen Werte sind dieselben, aber die Unterschiede zwischen `selectedRow` und `selectedRowData` sind wie folgt:
  + `selectedRow`: Dieser Namespace enthält den Namen, der in der Spaltenüberschrift für jedes Feld angezeigt wird. Sie sollten ihn verwenden`selectedRow`, 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 verwenden`selectedRowData`, 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}}`: Referenziert den Spaltennamen der ausgewählten Zeile aus anderen Komponenten oder Ausdrücken auf derselben Seite.
+ `{{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 basierend auf dem gespeicherten Statuswert an.
+ `{{currentRow.colName}}`, `{{currentRow["First Name"]}}``{{currentRow}}`, oder`{{ui.tableName.selectedRows[0]}}`: Übergibt den Kontext der referenzierten Zeile innerhalb einer Zeilenaktion.

## Zugreifen auf Automatisierungen
<a name="expressions-automations"></a>

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
<a name="expressions-automations-parameters"></a>

Sie können dynamische Werte aus UI-Komponenten und anderen Automatisierungen an Automatisierungen übergeben, sodass sie 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 verweisen*ID*.

#### Manipulation von Automatisierungsparametern
<a name="expressions-automations-parameters-manipulate"></a>

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änkt den Wert eines Parameters auf einen Maximalwert (in diesem Fall`100`).
+ `{{ DateTime.fromISO(params.startDate).plus({ days: 7 }).toISO() }}`: Wenn der `params.startDate` Parameter „ist“`"2023-06-15T10:30:00.000Z"`, wird für diesen Ausdruck das Datum ausgewertet`"2023-06-22T10:30:00.000Z"`, das eine Woche nach dem Startdatum liegt.

### Der Zugriff auf die Automatisierung resultiert aus einer früheren Aktion
<a name="expressions-automations-results"></a>

Automatisierungen ermöglichen es der Anwendung, serverseitige Logik und Operationen auszuführen, z. B. Datenbanken abzufragen APIs, mit Daten zu interagieren oder Datentransformationen durchzuführen. 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.

1. Wenn Sie Aktionen benannt *action1* und *action2* in dieser Reihenfolge haben, *action1* können Sie nicht auf Ergebnisse verweisen und *action2* können nur darauf zugreifen`results.action1`.

1. Dies 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 ausführen, z. B. `results.myInvokeAutomation1.fileType === "pdf"` mit einem PDF-Viewer zu einer Seite zu navigieren, wenn die Automatisierung angibt, dass es sich bei der Datei um ein PDF handelt.

Die folgende Liste enthält die Syntax für den Zugriff auf Automatisierungsergebnisse einer früheren Aktion unter Verwendung des `results` Namespace.
+ `{{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 ab*stepName*.

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 mit dem Befehl auf das zurückgegebene Datenarray zugreifen`results.stepName.data`.
+ Bei einer API-Aufrufaktion können Sie über `results.stepName.body`
+ Für eine Amazon S3 S3-Aktion können Sie auf den Dateiinhalt zugreifen mit`results.stepName.Body.transformToWebStream()`.

In der Dokumentation zu den spezifischen Aktionstypen, die Sie verwenden, finden Sie Informationen zur Form der Daten, die sie zurückgeben, und darüber, wie Sie innerhalb des `results` Namespace 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 ist`pending`, und gibt die Länge (Anzahl) des gefilterten Arrays zurück. Dies kann nützlich sein, wenn Daten unter bestimmten Bedingungen abgefragt oder verarbeitet werden sollen.
+ `{{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 Nutzername aus 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, also multipliziert er ihn mit 1000, um ihn in Millisekunden umzurechnen, was dem vom Konstruktor erwarteten Format entspricht. `Date` Dies kann für die Arbeit mit Datums- und Uhrzeitwerten in Automatisierungen nützlich sein.
+ `{{results.stepName.Body}}`: Bei einer `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 müsste, um ihn in Komponenten verwenden zu können.

# Datenabhängigkeiten und zeitliche Überlegungen
<a name="data-dependencies-timing-considerations"></a>

Bei der Erstellung komplexer Anwendungen in App Studio ist es wichtig, die Datenabhängigkeiten zwischen verschiedenen Datenkomponenten wie Formularen, Detailansichten und automatisierungsgestützten Komponenten zu verstehen und zu verwalten. Datenkomponenten und Automatisierungen schließen ihren Datenabruf oder ihre Ausführung möglicherweise nicht gleichzeitig ab, was zu Zeitproblemen, Fehlern und unerwartetem Verhalten führen kann. Wenn Sie sich potenzieller Timing-Probleme bewusst sind und Best Practices befolgen, können Sie zuverlässigere und konsistentere Benutzererlebnisse in Ihren App Studio-Anwendungen schaffen.

Einige mögliche Probleme sind wie folgt:

1. **Konflikte beim Rendern:** Datenkomponenten werden möglicherweise in einer Reihenfolge gerendert, die nicht ihren Datenabhängigkeiten entspricht, was möglicherweise zu visuellen Inkonsistenzen oder Fehlern führen kann.

1. **Timing der Automatisierungsausführung:** Automatisierungsaufgaben können abgeschlossen werden, bevor die Komponenten vollständig geladen sind, was zu Fehlern bei der Ausführung der Laufzeit führt.

1. **Komponentenabstürze:** Komponenten, die auf Automatisierungen basieren, können bei ungültigen Antworten oder wenn die Automatisierung noch nicht abgeschlossen ist, abstürzen.

## Beispiel: Bestelldetails und Kundeninformationen
<a name="data-dependencies-timing-considerations-example"></a>

Dieses Beispiel zeigt, wie Abhängigkeiten zwischen Datenkomponenten zu Zeitproblemen und potenziellen Fehlern bei der Datenanzeige führen können.

Stellen Sie sich eine Anwendung mit den folgenden zwei Datenkomponenten auf derselben Seite vor:
+ Eine Detailkomponente (`orderDetails`), die Auftragsdaten abruft.
+ Eine Detailkomponente (`customerDetails`), die Kundendetails zur Bestellung anzeigt.

In dieser Anwendung gibt es zwei Felder in der `orderDetails` Detailkomponente, die mit den folgenden Werten konfiguriert sind:

```
// 2 text fields within the orderDetails detail component

// Info from orderDetails Component
{{ui.orderDetails.data[0].name}} 

// Info from customerDetails component
{{ui.customerDetails.data[0].name}} // Problematic reference
```

In diesem Beispiel versucht die `orderDetails` Komponente, den Kundennamen anzuzeigen, indem sie auf Daten aus der `customerDetails` Komponente verweist. Dies ist problematisch, da die `orderDetails` Komponente möglicherweise rendert, bevor die `customerDetails` Komponente ihre Daten abgerufen hat. Wenn der Abruf der `customerDetails` Komponentendaten verzögert wird oder fehlschlägt, zeigt die `orderDetails` Komponente unvollständige oder falsche Informationen an. 

## Bewährte Methoden für Datenabhängigkeit und Timing
<a name="data-dependencies-timing-considerations-example"></a>

Verwenden Sie die folgenden bewährten Methoden, um Probleme mit Datenabhängigkeit und Timing in Ihrer App Studio-App zu minimieren:

1. **Bedingtes Rendern verwenden: Rendern** Sie Komponenten oder zeigen Sie Daten nur an, wenn Sie bestätigt haben, dass sie verfügbar sind. Verwenden Sie bedingte Anweisungen, um zu überprüfen, ob Daten vorhanden sind, bevor Sie sie anzeigen. Der folgende Ausschnitt zeigt ein Beispiel für eine bedingte Anweisung:

   ```
   {{ui.someComponent.data ? ui.someComponent.data.fieldName : "Loading..."}}
   ```

1. **Sichtbarkeit untergeordneter Komponenten verwalten:** Für Komponenten wie Stepflow, Form oder Detail, die untergeordnete Komponenten rendern, bevor ihre Daten geladen werden, legen Sie die Sichtbarkeit der untergeordneten Komponenten manuell fest. Der folgende Ausschnitt zeigt ein Beispiel für die Einstellung der Sichtbarkeit auf der Grundlage der Datenverfügbarkeit der übergeordneten Komponente:

   ```
   {{ui.parentComponent.data ? true : false}}
   ```

1. **Verwenden Sie Verbindungsabfragen:** Verwenden Sie nach Möglichkeit Verbindungsabfragen, um verwandte Daten in einer einzigen Abfrage abzurufen. Dadurch wird die Anzahl der separaten Datenabrufe reduziert und Zeitprobleme zwischen Datenkomponenten minimiert.

1. **Implementieren Sie die Fehlerbehandlung in Automatisierungen:** Implementieren Sie eine robuste Fehlerbehandlung in Ihren Automatisierungen, um Szenarien, in denen erwartete Daten nicht verfügbar sind oder ungültige Antworten eingehen, elegant zu verwalten.

1. **Optionale Verkettung verwenden:** Verwenden Sie beim Zugriff auf verschachtelte Eigenschaften die optionale Verkettung, um Fehler zu vermeiden, wenn eine übergeordnete Eigenschaft nicht definiert ist. Der folgende Ausschnitt zeigt ein Beispiel für optionale Verkettung:

   ```
   {{ui.component.data?.[0]?.fieldSystemName}}
   ```

# Eine App mit mehreren Benutzern erstellen
<a name="builder-collaboration"></a>

Mehrere Benutzer können an einer einzigen App Studio-App arbeiten, aber nur ein Benutzer kann eine App gleichzeitig bearbeiten. In den folgenden Abschnitten finden Sie Informationen zur Einladung anderer Benutzer zur Bearbeitung einer App und zum Verhalten, wenn mehrere Benutzer versuchen, eine App gleichzeitig zu bearbeiten.

## Laden Sie Entwickler ein, eine App zu bearbeiten
<a name="builder-collaborate-invite"></a>

Verwenden Sie die folgenden Anweisungen, um andere Builder zur Bearbeitung einer App Studio-App einzuladen.

**Um andere Builder zur Bearbeitung einer App einzuladen**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung.

1. Wählen Sie **Freigeben**.

1. Verwenden Sie auf der Registerkarte **Entwicklung** das Textfeld, um nach Gruppen oder einzelnen Benutzern zu suchen und diese auszuwählen, die Sie zur Bearbeitung der App einladen möchten.

1. Wählen Sie für jeden Benutzer oder jede Gruppe das Drop-down-Menü aus und wählen Sie die Berechtigungen aus, die Sie diesem Benutzer oder dieser Gruppe gewähren möchten.
   + **Mitinhaber**: Miteigentümer haben dieselben Berechtigungen wie App-Besitzer.
   + **Nur bearbeiten**: Benutzer mit der Rolle **„Nur bearbeiten“** haben dieselben Berechtigungen wie Eigentümer und Mitinhaber, mit Ausnahme der folgenden:
     + Sie können andere Benutzer nicht einladen, die App zu bearbeiten.
     + Sie können die App nicht in der Test- oder Produktionsumgebung veröffentlichen.
     + Sie können der App keine Datenquellen hinzufügen.
     + Sie können die App nicht löschen oder duplizieren.

## Es wird versucht, eine App zu bearbeiten, die gerade von einem anderen Benutzer bearbeitet wird
<a name="builder-collaborate-behavior"></a>

Eine einzelne App Studio-App kann jeweils nur von einem Benutzer bearbeitet werden. Sehen Sie sich das folgende Beispiel an, um zu verstehen, was passiert, wenn mehrere Benutzer versuchen, eine App gleichzeitig zu bearbeiten.

In diesem Beispiel bearbeitet `User A` gerade eine App und hat sie mit geteilt`User B`. `User B`versucht dann, die App zu bearbeiten, die gerade bearbeitet wird`User A`.

Wenn `User B` versucht wird, die App zu bearbeiten, erscheint ein Dialogfeld mit der Information, dass die App gerade bearbeitet `User A` wird. Wenn Sie fortfahren, wird das Anwendungsstudio `User A` verlassen und alle Änderungen werden gespeichert. `User B`Sie können wählen, ob Sie den Vorgang abbrechen und `User A` fortfahren lassen möchten, oder ob Sie fortfahren und das Anwendungsstudio aufrufen möchten, um die App zu bearbeiten. In diesem Beispiel entscheiden sie sich dafür, die App zu bearbeiten.

Wenn `User B` sich entscheidet, die App zu bearbeiten, `User A` erhält sie eine Benachrichtigung, dass mit der Bearbeitung der App begonnen `User B` wurde und ihre Sitzung beendet wurde. Beachten Sie, dass sie die Benachrichtigung möglicherweise nicht erhalten, wenn `User A` die App in einem inaktiven Browser-Tab geöffnet wäre. Wenn sie in diesem Fall versuchen, zur App zurückzukehren und eine Änderung vorzunehmen, erhalten sie eine Fehlermeldung und werden aufgefordert, die Seite zu aktualisieren, wodurch sie wieder zur Liste der Anwendungen zurückkehren.

# Inhaltssicherheitseinstellungen Ihrer App anzeigen oder aktualisieren
<a name="app-content-security-settings-csp"></a>

Jede Anwendung in App Studio verfügt über Inhaltssicherheitseinstellungen, mit denen Sie verhindern können, dass externe Medien oder Ressourcen wie Bilder, iFrames geladen werden oder dass sie nur PDFs von bestimmten Domains oder URLs (einschließlich Amazon S3 S3-Buckets) geladen werden dürfen. Sie können auch die Domains angeben, in die Ihre App Objekte auf Amazon S3 hochladen kann.

Die Standardeinstellungen für die Inhaltssicherheit für alle Apps bestehen darin, das Laden aller Medien aus externen Quellen, einschließlich Amazon S3-Buckets, und das Hochladen von Objekten auf Amazon S3 zu blockieren. Um Bilder, iFrames oder ähnliche Medien zu laden PDFs, müssen Sie daher die Einstellungen bearbeiten, um die Medienquellen zuzulassen. Um das Hochladen von Objekten auf Amazon S3 zu ermöglichen, müssen Sie außerdem die Einstellungen bearbeiten, um die Domains zuzulassen, in die hochgeladen werden können.

**Anmerkung**  
Die Inhaltssicherheitseinstellungen werden verwendet, um Content Security Policy (CSP) -Header in Ihrer Anwendung zu konfigurieren. CSP ist ein Sicherheitsstandard, der dazu beiträgt, Ihre App vor Cross-Site Scripting (XSS), Clickjacking und anderen Code-Injection-Angriffen zu schützen. Weitere Informationen zu CSP finden Sie unter [Content Security Policy (CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)) in den MDN Web Docs.

**Um die Inhaltssicherheitseinstellungen Ihrer App zu aktualisieren**

1. Navigieren Sie bei Bedarf zum Anwendungsstudio Ihrer Anwendung, indem Sie in der Anwendungsliste auswählen, ob Sie es bearbeiten möchten.

1. Wählen Sie **App-Einstellungen**.

1. Wählen Sie den Tab „**Content Security Settings**“, um die folgenden Einstellungen zu sehen:
   + **Frame-Quelle**: Wird verwendet, um die Domains zu verwalten, aus denen Ihre App Frames und Iframes (z. B. interaktive Inhalte oder PDFs) laden kann. Diese Einstellung wirkt sich auf die folgenden Komponenten oder App-Ressourcen aus:
     + Komponente zum Einbetten von iFrames
     + Komponente für den PDF-Viewer
   + **Bildquelle**: Wird verwendet, um die Domains zu verwalten, aus denen Ihre App Bilder laden kann. Diese Einstellung wirkt sich auf die folgenden Komponenten oder App-Ressourcen aus:
     + Logo und Banner der App
     + Komponente „Image Viewer“
   + **Verbindungsquelle**: Wird verwendet, um die Domains zu verwalten, in die Ihre App Amazon S3 S3-Objekte hochladen kann.

1. Wählen Sie für jede Einstellung die gewünschte Einstellung aus dem Drop-down-Menü aus:
   + **Alles blockieren frames/images/connections**: Erlauben Sie nicht, dass Medien (Bilder, Frames PDFs) geladen oder Objekte auf Amazon S3 hochgeladen werden.
   + **Alle zulassen frames/images/connections**: Erlaubt das Laden aller Medien (Bilder, Frames PDFs) aus allen Domains oder erlaubt das Hochladen von Objekten auf Amazon S3 für alle Domains.
   + **Bestimmte Domänen zulassen**: Erlaubt das Laden von Medien von oder das Hochladen von Medien in bestimmte Domänen. Domänen oder URLs werden als durch Leerzeichen getrennte Liste von Ausdrücken angegeben, wobei Platzhalter (`*`) für Subdomänen, Hostadressen oder Portnummern verwendet werden können, um anzuzeigen, dass alle zulässigen Werte der einzelnen Ausdrücke gültig sind. Die Angabe entspricht `http` auch. `https` Die folgende Liste enthält Beispiele für gültige Einträge:
     + `blob:`: Entspricht allen Blobs, einschließlich Dateidaten, die durch Automatisierungsaktionen zurückgegeben wurden, wie z. B. die `GetObject` Rückgabe von Artikeln aus Amazon S3 S3-Buckets oder von Amazon Bedrock generierte Bilder.
**Wichtig**  
Sie müssen `blob:` zu Ihrem angegebenen Ausdruck hinzufügen, damit Dateidaten von Aktionen zurückgegeben werden können. Auch wenn Ihr Ausdruck dies ist`*`, sollten Sie ihn wie folgt aktualisieren `* blob:`
     + `http://*.example.com`: Entspricht allen Ladeversuchen aus einer beliebigen Subdomain von`example.com`. Stimmt auch mit `https` Ressourcen überein.
     + `https://source1.example.com https//source2.example.com`: Entspricht allen Ladeversuchen `https://source1.example.com` sowohl als auch `https://source2.example.com`
     + `https://example.com/subdirectory/`: Entspricht allen Versuchen, Dateien in ein Unterverzeichnisverzeichnis zu laden. Beispiel, `https://example.com/subdirectory/path/to/file.jpeg`. Es stimmt nicht überein`https://example.com/path/to/file.jpeg`.

1. Wählen Sie **Speichern**, um Ihre Änderungen zu speichern.