Übungslab 3 – Erstellen einer Canvas-App

In diesem Lab entwerfen und erstellen Sie eine Canvas-App aus einer leeren App und fügen dann eine Datenquelle und einen Katalog hinzu.

Lernziele

• Erstellen einer Canvas-App mit einem Katalog, der mit einer Datenquelle verknüpft ist
• Formatieren von Feldern mit Power Fx-Formeln

Weiterführende Schritte des Lab

• Erstellen Sie eine Canvas App ohne Vorlage
• Hinzufügen einer Datenquelle zur App
• Hinzufügen eines Katalogs zur App
• Konfigurieren der Felder im Katalog

Voraussetzungen

• Sie müssen Lab 2: Datenmodell abgeschlossen haben

Ausführliche Schritte

Übung 1 – Erstellen einer Canvas-App

Aufgabe 1.1 – Erstellen 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 + Erstellen aus.

4. Wählen Sie die Kachel Leere App unter Beginnen ab aus.

5. Wählen Sie Erstellen unter der Kachel Leere Canvas-App aus.

   

6. Geben Sie Booking Request app als App-Name ein.

7. Wählen Sie Tablet als Format aus.

   

8. Klicken Sie auf Erstellen.

9. Warten Sie, bis die App erstellt wurde.

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

Aufgabe 1.2 – Hinzufügen einer Datenquelle

1. Wählen Sie im App-Erstellungsmenü Daten aus.

   

2. Wählen Sie das Dropdown-Caret neben Daten hinzufügen aus und geben Sie Booking in Suche ein.

   

3. Wählen Sie die Microsoft Dataverse-Tabelle Buchungsanfragen aus.

Aufgabe 1.3 – Konfigurieren des Hauptbildschirms

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

2. Wählen Sie Screen1 in der Strukturansicht, die Auslassungspunkte (…) und dann Umbenennen aus.

3. Geben Sie MainScreen ein.

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

5. Wählen Sie Rechteck aus.

6. Ziehen Sie das Rechteck auf die obere linke Seite des Bildschirms.

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

8. Benennen Sie das Rechteck in HeaderRect um.

9. Legen Sie die Eigenschaften des Rechtecks in der Bearbeitungsleiste wie folgt fest:

   1. X = 0
   2. Y = 0
   3. Höhe = 80
   4. Breite=Parent.Width

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

11. Textbeschriftung auswählen.

12. Ziehen Sie die Bezeichnung oben links auf den Bildschirm.

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

14. Benennen Sie die Beschriftung in HeaderLabel um.

15. Legen Sie die Eigenschaften der Beschriftung in der Bearbeitungsleiste wie folgt fest:

    1. X = 0
    2. Y = 0
    3. Höhe = 80
    4. Breite=Parent.Width
    5. Ausrichtung=Align.Center
    6. Größe=24
    7. Text="Booking Request"
    8. Farbe=Color.White

    

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

Aufgabe 1.4 – Hinzufügen eines Katalogs

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

2. Wählen Sie Vertikaler Katalog.

   

3. Wählen Sie Buchungsanfragen für die Datenquelle aus.

   

4. Wählen Sie auf der Registerkarte Eigenschaften für Layout die Option Titel, Untertitel und Textkörper aus.

5. Wählen Sie 7 ausgewählt neben Felder aus.

6. Wählen Sie Kosten für Textkörper1 aus.

7. Wählen Sie Entscheidung für Untertitel2 aus.

8. Wählen Sie Name des Haustiers für Titel2 aus.

   

9. Schließen Sie den Bereich Daten.

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

11. Ändern Sie den Namen des Katalogs in BookingRequestList.

12. Legen Sie die Eigenschaften des Katalogs in der Bearbeitungsleiste wie folgt fest:

    1. X = 0
    2. Y = 80
    3. Höhe = 575
    4. Breite=250

Aufgabe 1.5 – Formatieren des Währungsfelds

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

2. Erweitern Sie den Katalog BookingRequestList.

3. Wählen Sie Textkörper1 aus.

   

4. Legen Sie die Texteigenschaft in der Bearbeitungsleiste auf die Formel fest:

    Text(Value(ThisItem.Cost), "$#,##0.00")
   

5. Wählen Sie oben rechts in Power Apps Studio die Option Speichern aus.

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