Ü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 oben in der Baumansicht die Option + Neuer Bildschirm.

   

3. Wählen Sie Leer aus.

4. Ändern Sie den Bildschirmnamen in EditScreen.

5. Wählen Sie oben in der Baumansicht die Option + Neuer Bildschirm.

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. Benennen Sie das Symbol in BackIconEdit um.

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

11. Erweitern Sie DetailScreen.

12. Erweitern Sie ScreenContainer.

13. Wählen Sie HeaderContainer, dann die Befehle (…) sowie die Option Einfügen aus und danach wählen Sie erneut Einfügen.

14. Benennen Sie das Symbol in BackIconDetail um.

Ü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.

   

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

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

   

10. Fügen Sie die Felder hinzu oder entfernen Sie sie, sodass sie in der folgenden Reihenfolge angeordnet sind:

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

    

11. Schließen Sie den Bereich Felder.

12. 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.

   

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 9 ausgewählt neben Felder aus.

7. Fügen Sie die Felder hinzu oder entfernen Sie sie, sodass sie in der folgenden Reihenfolge angeordnet sind:

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

8. Schließen Sie den Bereich Felder.

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

    BookingRequestList.Selected
   

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

11. Benennen Sie das Formular in BookingRequestForm um.

12. 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

    

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.