Übungslab 6: Formulare

In dieser Übung verwenden Sie Formulare zum Erstellen und Bearbeiten von Datensätzen in einer Datenquelle.

Lernziele

  • So fügen Sie Bildschirme hinzu
  • So navigieren Sie zwischen Bildschirmen
  • So verwenden Sie ein Formular zum Erstellen eines Datensatzes in einer Datenquelle
  • So verwenden Sie ein Formular zum Bearbeiten eines Datensatzes in einer Datenquelle
  • So löschen Sie einen Datensatz aus einer Datenquelle
  • So verknüpfen Sie ein Formular mit einem Katalog

Weiterführende Schritte des Lab

  • Erstellen neuer Bildschirme
  • Navigieren zu einem Bildschirm, wenn ein Datensatz in einem Katalog ausgewählt ist
  • Zwischen den Bildschirmen navigieren
  • Anzeigen eins Datensatzes mit einem Formular
  • Datensatz löschen
  • Bearbeiten eines Datensatzes mit einem Formular
  • Erstellen eines neuen Datensatzes mit einem Formular

Voraussetzungen

  • Sie müssen Lab 5: Externe Daten abgeschlossen haben.

Ausführliche Schritte

Übung 1: Hinzufügen von Bildschirmen und der Navigation

Aufgabe 1.1: Bearbeiten der App

  1. Navigieren Sie zum Power Apps Maker-Portal https://make.powerapps.com.

  2. Stellen Sie sicher, dass Sie sich in der Umgebung Dev One befinden.

  3. Wählen Sie im linken Navigationsmenü die Registerkarte Apps aus.

  4. Wählen Sie die Buchungsanfrage-App, die Befehle (…) und dann Bearbeiten > Auf der neuen Registerkarte bearbeiten aus.

Aufgabe 1.2: Hinzufügen von Bildschirmen

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Wählen Sie auf der Aktionsleiste in Power Apps Studio Neuer Bildschirm aus.

    Screenshot des neuen Bildschirms

  3. Wählen Sie Leer aus.

  4. Ändern Sie den Bildschirmnamen in EditScreen.

  5. Wählen Sie auf der Aktionsleiste in Power Apps Studio Neuer Bildschirm aus.

  6. Wählen Sie Kopf- und Fußzeile aus.

  7. Ändern Sie den Bildschirmnamen in DetailScreen.

Aufgabe 1.3: Hinzufügen der Navigation

  1. Erweitern Sie in der Strukturansicht BookingRequestList im MainScreen.

  2. Wählen Sie NextArrow in BookingRequestList aus.

  3. Legen Sie die OnSelect-Eigenschaft von NextArrow in der Bearbeitungsleiste auf Folgendes fest:

     Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);

  4. Wählen Sie EditScreen aus.

  5. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  6. Erweitern Sie Symbole.

  7. Wählen Sie Pfeil „Zurück“ aus.

  8. Legen Sie die Eigenschaft OnSelect für die Schaltfläche auf Folgendes fest:

     Back()

  9. Wählen Sie in der Strukturansicht das Symbol aus, und wählen Sie die Befehle (…) und anschließend Kopieren aus.

  10. Erweitern Sie DetailScreen.

  11. Erweitern Sie ScreenContainer.

  12. Wählen Sie HeaderContainer aus und anschließend die Befehle (…) aus, und wählen Sie Einfügen aus.

Übung 2: Bildschirm „Details“

Aufgabe 2.1: Hinzufügen des Anzeigeformulars

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Erweitern Sie DetailScreen.

  3. Erweitern Sie ScreenContainer1.

  4. Wählen Sie “MainContainer1” aus.

  5. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  6. Erweitern Sie Eingabe.

  7. Wählen Sie Anzeigeformular aus.

    Screenshot: Hinzufügens eines Anzeigeformulars

  8. Wählen Sie in den Eigenschaften von FormViewer Buchungsanfragen für Datenquelle aus.

  9. Wählen Sie 8 ausgewählt neben Felder aus.

    Screenshot der Standardformularfelder

  10. Entfernen Sie die Felder Status und Anmerkungen, indem Sie die Ellipse (…) neben den Feldern auswählen und Entfernen wählen.

  11. Wählen Sie + Feld hinzufügen und dann das folgende Feld aus:

    1. Entscheidung

    Screenshot: Hinzufügen von Feldern zum Formular

  12. Wählen Sie Hinzufügen aus.

  13. Ziehen Sie die Felder in den folgenden Ordner:

    1. Name des Haustiers
    2. Owner Name
    3. Besitzer-E-Mail
    4. Startdatum
    5. Enddatum
    6. Entscheidung
    7. Kosten

    Screenshot der Sortierung der Formularfelder

  14. Schließen Sie den Bereich Felder.

  15. Legen Sie die Item-Eigenschaft des Formularanzeige-Steuerelements in der Bearbeitungsleiste auf Folgendes fest:

     BookingRequestList.Selected

Aufgabe 2.2: Hinzufügen der Bezeichnung

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Erweitern Sie DetailScreen.

  3. Erweitern Sie ScreenContainer1.

  4. Wählen Sie “FooterContainer1” aus.

  5. Wählen Sie + im Fußzeilencontainer aus.

    Screenshot: Hinzufügen eines Steuerelements zum Container

  6. Wählen Sie Beschriftung aus.

  7. Legen Sie die Eigenschaft Text der Bezeichnung auf Folgendes fest:

     BookingRequestList.Selected.'Pet Name'

Aufgabe 2.3: Hinzufügen der Schaltfläche „Löschen hinzufügen“

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Erweitern Sie DetailScreen.

  3. Erweitern Sie ScreenContainer1.

  4. Wählen Sie “FooterContainer1” aus.

  5. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  6. Wählen Sie die Schaltfläche aus.

  7. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  8. Benennen Sie die Schaltfläche in Deletebtn um.

  9. Legen Sie die Eigenschaft Text für die Schaltfläche auf Folgendes fest:

     "Delete"

  10. Legen Sie die Eigenschaft OnSelect für die Schaltfläche fest auf:

     Remove('Booking Requests', BookingRequestList.Selected); Back();

Übung 3: Bearbeiten des Bildschirms

Aufgabe 3.1: Hinzufügen von Formularen zum Bearbeiten

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Wählen Sie EditScreen aus.

  3. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  4. Wählen Sie Formular bearbeiten aus.

  5. Wählen Sie in den Eigenschaften des Formulars Buchungsanfragen für Datenquelle aus.

  6. Wählen Sie 8 ausgewählt neben Felder aus.

  7. Entfernen Sie Entscheidung und Anmerkungen, indem Sie die Ellipse (…) neben den Feldern auswählen und Entfernen wählen.

  8. Ziehen Sie die Felder in den folgenden Ordner:

    1. Name des Haustiers
    2. Owner Name
    3. Besitzer-E-Mail
    4. Startdatum
    5. Enddatum
    6. Kosten

  9. Schließen Sie den Bereich Felder.

  10. Legen Sie die Eigenschaft Item des Formularsteuerelements auf Folgendes fest:

     BookingRequestList.Selected

  11. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  12. Benennen Sie das Formular in BookingRequestForm um.

  13. Legen Sie die Eigenschaften des Formulars wie folgt fest:

    1. X=0
    2. Y = 125
    3. Höhe = 500
    4. Breite=Parent.Width
    5. Spalten=1
    6. Layout=Horizontal

    Screenshot des konfigurierten Buchungsanfrageformulars.

Aufgabe 3.2: Hinzufügen der Schaltfläche „Senden“

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Wählen Sie EditScreen aus.

  3. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  4. Wählen Sie die Schaltfläche aus.

  5. Ziehen Sie die Schaltfläche unter das Formular.

  6. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  7. Benennen Sie die Schaltfläche in Submitbtn um.

  8. Legen Sie die Eigenschaft Text für die Schaltfläche auf Folgendes fest:

     "Submit"

  9. Legen Sie die Eigenschaft OnSelect für die Schaltfläche fest auf:

     SubmitForm(BookingRequestForm)

  10. Wählen Sie BookingRequestForm aus.

  11. Legen Sie die Eigenschaft OnSuccess für die Form auf Folgendes fest:

     Navigate(MainScreen, ScreenTransition.UnCover)

Aufgabe 3.3: Hinzufügen der Navigation zum Bearbeitungsbildschirm

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Erweitern Sie DetailScreen.

  3. Erweitern Sie ScreenContainer.

  4. Wählen Sie HeaderContainer aus.

  5. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  6. Erweitern Sie Symbole.

  7. Wählen Sie Bearbeiten aus.

  8. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  9. Benennen Sie das Symbol in EditIcon um.

  10. Legen Sie die Eigenschaft OnSelect für die Schaltfläche auf Folgendes fest:

     Navigate(EditScreen, ScreenTransition.Cover)

Aufgabe 3.4: Neuer Datensatz

  1. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  2. Wählen Sie MainScreen aus.

  3. Wählen Sie im Menü für die App-Erstellung Einfügen (+) aus.

  4. Erweitern Sie Symbole.

  5. Wählen Sie Hinzufügen aus.

  6. Wählen Sie im Menü für die App-Erstellung Strukturansicht aus.

  7. Benennen Sie das Symbol in NewIcon um.

  8. Legen Sie die Eigenschaften des Symbols wie folgt fest:

    1. X = 0
    2. Y = 0
    3. Höhe = 80
    4. Breite=80
    5. Farbe=Color.White

  9. Legen Sie die Eigenschaft OnSelect für die Schaltfläche auf Folgendes fest:

     NewForm(BookingRequestForm);Navigate(EditScreen, ScreenTransition.Cover)

  10. Wählen Sie oben rechts in Power Apps Studio Speichern aus.

  11. Wählen Sie oben links in der Befehlsleiste die Schaltfläche <- Zurück und dann Verlassen aus, um die App zu beenden.