Übung – Die Dive Center Canvas-App erstellen

  • 18 Minuten

In dieser Übung wenden Sie beim Erstellen einer Dive Center Canvas-App Ihr erlerntes Wissen an.

Szenario

Sie arbeiten in einem Tauchzentrum, bieten Services an und verkaufen Tauchausrüstung. Sie verwalten die Dataverse-Umgebung der Organisation.

Die Mitarbeiter der Serviceabteilung brauchen eine Power Apps-App, mit der sie die Check-in‑ und Check-out-Prozesse für Kunden durchführen können, die Tauchausrüstung zur Reparatur bringen.

Die Mitarbeiter benötigen zur Unterstützung dieser Prozesse folgende Eigenschaften:

  • Eine Kundenliste für die Reparaturdienste

  • Die Möglichkeit, Check-Ins zu speichern

  • Eine Liste der Tauchausrüstung zum Identifizieren der Art der zu registrierenden Ausrüstung

Die Benutzer haben andere Anforderungen geäußert, und Sie möchten möglicherweise auch die folgenden Funktionen einbeziehen:

  • Aktivieren Sie die Option, mit dem Auschecken für abgeschlossene Serviceanfragen fortzufahren.

  • Erstellen Sie eine neue Tauchausrüstung mit Angaben eines Bilds sowie von Farbe und Ausrüstungstyp.

  • Erfassen Sie beim Check-in Bilder und die Art der Dienstleistung auf.

  • Erfassen Sie zum Abschließen des Auscheckens eine Unterschrift.

  • Erstellen Sie neue Kunden.

Übung

Voraussetzung: In der Lerneinheit Übung – Auf die Dive Center Canvas-App vorbereiten werden die Lösung und die Datenquelle, auf die sich diese Übung bezieht, erklärt. Beginnen Sie in Ihrer Umgebung mit dem Namen Dive Center App, wo sich Ihre App-Dataverse-Tabellen bereits befinden.

  1. Klicken Sie auf der Befehlsleiste Ihres Umgebungsbildschirms auf Neu > App > Canvas-App, um eine neue Canvas-App mit dem Namen Service Request zu erstellen.

    Screenshot einer Dataverse-Lösung mit dem Fokus auf der Menüoption Neue Canvas-App

    Wählen Sie als Format der Canvas-App Telefon aus. Wählen Sie dann Erstellen aus.

    Screenshot des Formulars Neue Canvas-App ohne Vorlage mit dem Fokus auf Appname, Telefonformat und der Schaltfläche Erstellen

  2. Fügen Sie im Power Apps-Canvas-Studio ein Bild ein, das als Hauptlogo verwendet werden soll.

  3. Positionieren und skalieren Sie das Bild auf Basis der verfügbaren Bildschirmfläche und anderen Komponenten, die in die App aufgenommen werden sollen. Verwenden Sie die Eigenschaft Fill, um den Bildschirmhintergrund an die Farbe des Logos anzupassen.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Bild-Steuerelement und seinen Eigenschaften

  4. Fügen Sie drei Schaltflächen Einchecken, Auschecken und Beenden hinzu, um die Navigation zu den nachfolgenden Bildschirmen zu ermöglichen Definieren Sie basierend auf der erwarteten Benutzererfahrung Farben, Positionen und Größe.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Schaltfläche-Steuerelement und seinen Eigenschaften

  5. Benennen Sie Standardsteuerelemente und Bildschirme um, indem Sie Namen verwenden, die ihre Verwendung beschreiben. Dies ist die beste Methode, um sie leichter zu identifizieren. Sie können auf jedes Steuerelement in der Strukturansicht doppelklicken, um es umzubenennen, oder die Auslassungspunkte neben dem Steuerelement verwenden und die Option Umbenennen auswählen.

    Screenshot des Canvas-App-Studios mit dem Fokus auf der Option Umbenennen für die Bildschirmkomponenten

  6. Wählen Sie die Option Bildschirm duplizieren auf dem Startbildschirm aus und ändern Sie den Namen des neuen Bildschirms in „CHECKIN“, um den Bildschirm zum Einchecken zu erstellen.

    Screenshot des Canvas-App-Studios mit dem Fokus auf der Option Bildschirm duplizieren

  7. Entfernen Sie die Schaltflächen aus dem neuen Bildschirm und ändern Sie dann die Größe des Hauptbilds, um Platz für das Formular zu haben, das für den Check-in-Prozess hinzugefügt wird.

  8. Fügen Sie ein Bearbeitungsformular ein, verbinden Sie die Datenquelle mit der Dataverse-Tabelle Service Requests, setzen Sie die Eigenschaft Default mode des Formulars auf Neu und ändern Sie den Namen in frmCheckIn.

    Screenshot des Canvas-App-Studios mit Fokus auf der Eigenschaft Edit form und data source für das Steuerelement

  9. Verschieben Sie das Formular, ändern Sie seine Größe und nutzen Sie die Bildschirmfläche. Wählen Sie im Eigenschaftenbereich die Option Felder bearbeiten aus, damit Sie die Felder des Formulars ändern können.

  10. Copilot schlägt automatisch vor, welche Felder enthalten sein sollten, und ordnet sie entsprechend an. Wir wollen sie für den Check-in-Prozess jedoch wie folgt anordnen, indem wir sie per Drag & Drop von oben nach unten in das Bedienfeld Felder ziehen: Name, Debitor, Ausrüstung, Details und voraussichtliche Fertigstellung. (Unter diesen Feldern können Sie beliebige optionale Felder positionieren.)

    Wenn diese Felder in Ihrem Formular nicht angezeigt werden, wählen Sie die Schaltfläche + Feld hinzufügen aus, um sie zu suchen/hinzuzufügen.

    Screenshot des Canvas-App-Studios mit Fokus auf der Option Feld hinzufügen für ein form-Steuerelement

    Sie müssen Daten zu Ihrer Tabelle „Dive Gear“ und möglicherweise auch zu Ihrer Tabelle „Contacts“ hinzufügen, um die Ergebnisse in Ihrem Kombinationsfeld im Abschnitt Ausrüstung und Debitor Ihres Formulars anzuzeigen.

  11. Überprüfen Sie die Kombinationsfeld-Steuerelementfelder für die Debitor‑ und Ausrüstungskarten in Ihrem Formular. Möglicherweise zeigen sie nicht die korrekten Daten an, sodass Sie diese Karten entsperren und einige Anpassungen vornehmen müssen. Stellen Sie für das Kombinationsfeld „Customer“ sicher, dass Sie die Eigenschaft „DisplayFields“ aktualisieren, um [fullname] anzuzeigen, und setzen Sie für das Kombinationsfeld „Gear“ die Eigenschaft „DisplayFields“ auf ["msft_name"] einrichten.

  12. Fügen Sie zwei Schaltflächen am unteren Rand des Canvas-Bildschirms hinzu, um den Benutzern Aktualisierungs‑ und Navigationsfunktionen bereitzustellen. Aktualisieren Sie den Text für sie in „SPEICHERN“ und „ZURÜCK“ und benennen Sie sie um in btnSaveCheckIn und btnBackCheckIn.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Steuerelementen Schaltfläche und den Eigenschaften für die Steuerelemente

  13. Um das Formular zu aktualisieren, wenn die Schaltfläche btnSaveCheckIn ausgewählt wurde und eine Verarbeitung eines neuen Check-Ins zu ermöglichen, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    SubmitForm(frmCheckIn); NewForm(frmCheckIn);

  14. Geben Sie das folgende PowerFx-Skript in die Eigenschaft OnSelect der Schaltfläche ein, um zurück zum HOME SCREEN zu navigieren, wenn die Schaltfläche btnBackCheckIn ausgewählt ist:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  15. Um zum Bildschirm CHECKIN vom HOME SCREEN zu navigieren, wenn die Schaltfläche btnCheckIn vom HOME SCREEN ausgewählt ist, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    Navigate(CHECKIN,ScreenTransition.Fade);

  16. Um Benutzern zu ermöglichen, die App zu schließen, wenn sie die Schaltfläche btnExit vom HOME SCREEN auswählen, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    Exit();

  17. Sie können hier die App speichern und wiedergeben, um das Navigieren zwischen den Bildschirmen und das Erstellen neuer Check-in-Einträge zu testen.

Optionale Funktionen

Der folgende Abschnitt umfasst die Schritte, die benötigt werden, um mit den optionalen Funktionen der App fortzufahren. Für einige dieser Funktionen werden Tabellen und Spalten benötigt, die in der Lerneinheit Übung – Auf die Dive Center Canvas-App vorbereiten vorher in diesem Modul festgelegt wurden.

Check-out-Funktion

Gehen Sie folgendermaßen vor, um App-Benutzern Check-out-Funktionen verfügbar zu machen:

  1. Erstellen Sie ein Duplikat des Bildschirms CHECKIN, und benennen Sie ihn dann in CHECKOUT um. Benennen Sie die Bildschirmkomponenten um und führen Sie dann folgende Aktionen aus:

    1. Ändern Sie die Schaltfläche „SAVE“ in „CHECK OUT“.

    2. Bearbeiten Sie die Felder frmCheckOut, um das Feld Name zu entfernen.

    3. Hinzufügen/Verschieben Sie die optionalen Anlagen bis knapp unter das Feld „Geschätzter Abschluss“.

    4. Setzen Sie den Default mode auf Anzeigen, sodass das Formular als schreibgeschützt angezeigt wird.

    Screenshot des Canvas-App-Studios mit Fokus auf den Eigenschaften für ein form-Steuerelement und den neu benannten Komponenten auf einem Bildschirm

  2. Fügen Sie dem Bildschirm eine Dropdown-Eingabe oben auf dem Bildschirm hinzu, und gehen Sie dann folgendermaßen vor, um eine Liste der zum Auschecken verfügbaren Serviceanfragen bereitzustellen:

    1. Geben Sie dem Dropdownmenü den neuen Namen ddServiceRequestForCheckOut.

    2. Positionieren Sie das Dropdownmenü über dem Formular frmCheckOut (passen Sie die Größe Ihres Formulars entsprechend an).

    3. Legen Sie die Eigenschaft Items auf die Tabelle Serviceanfragen fest.

    4. Richten Sie die Eigenschaft Value auf die Spalte Name ein.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Steuerelement Dropdown und den Eigenschaften des Steuerelements

  3. Geben Sie aus dem drop-down-Steuerelement das folgende PowerFx-Skript in die Eigenschaft Item des Formulars frmCheckOut ein, um die ausgewählte Serviceanfrage anzuzeigen:

    ddServiceRequestForCheckOut.Selected

  4. Geben Sie das folgende PowerFx-Skript in der Eigenschaft Items aus der Dropdowneingabe ein, um nur eine Liste der Serviceanfragen anzuzeigen, die zum Auschecken bereit sind:

    Filter('Service Requests',IsBlank('Actual Completion'))

  5. Also wird die Serviceanfrage angezeigt wie ausgecheckt, wenn die Schaltfläche btnSaveCheckOut ausgewählt wurde, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now()});

  6. Um zum Bildschirm CHECKOUT vom HOME SCREEN zu navigieren, wenn die Schaltfläche btnCheckOut vom HOME SCREEN ausgewählt ist, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    Navigate(CHECKOUT,ScreenTransition.Fade);

  7. Sie können hier die App speichern und wiedergeben, um das Navigieren zwischen den Bildschirmen und das Erstellen neuer Checkout-Prozess zu testen.

Eine Funktion für Tauchausrüstung erstellen

Gehen Sie folgendermaßen vor, um Benutzern die Möglichkeit zu geben, neue Tauchausrüstung mit Farbe, Ausrüstungstyp und einem Bild zu erstellen:

  1. Erstellen Sie ein Duplikat des Bildschirms CHECKIN, und benennen Sie ihn dann in DIVEGEAR um. Benennen Sie die Bildschirmkomponenten um und führen Sie dann folgende Aktionen aus:

    1. Bearbeiten Sie die Eigenschaften frmGear, um die Tabelle Tauchausrüstung als Datenquelle zu verwenden.

    2. Wählen Sie die verschiedenen Felder aus, die Sie den Benutzern zur Verfügung stellen möchten, einschließlich des Felds Bild.

    Screenshot des Canvas-App-Studios mit Fokus auf den Eigenschaften für ein form-Steuerelement und den neu benannten Komponenten auf einem Bildschirm

  2. Um die Tauchausrüstung zu erstellen, wenn die Schaltfläche btnSaveGear ausgewählt wurde und das Erstellen neuer Tauchausrüstung zu ermöglichen, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    SubmitForm(frmGear); NewForm(frmGear); Refresh ('Dive Gear');

  3. Geben Sie das folgende PowerFx-Skript in die Eigenschaft OnSelect der Schaltfläche ein, um zurück zum Bildschirm CHECKIN zu navigieren, wenn die Schaltfläche btnBackGear ausgewählt ist:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Entsperren Sie die Eigenschaften der Datenkarte für den Servicetyp des Formulars frmCheckIn, um vom CHECKIN zu der von Ihnen erstellten neuen Tauchausrüstung auf dem Bildschirm CHECKIN zu navigieren. Passen Sie die Größe des Kombinationsfelds der Datenkarte an, um Platz zum Einfügen eines Symbols Hinzufügen daneben zu schaffen.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Steuerelement Symbole und seinen Eigenschaften

  5. Geben Sie das folgende PowerFx-Skript in die Eigenschaft OnSelect des Symbols Hinzufügen ein, um zum Bildschirm DIVEGEAR zu navigieren:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. Ändern Sie die Datenquelleneigenschaft des Kombinationsfelds in die Tabelle Tauchausrüstung, um sicherzustellen, dass die Ausrüstungsliste aktualisiert wird, wenn eine neue Ausrüstung erstellt wird.

    Screenshot des Canvas-App-Studios mit Fokus auf der Eigenschaft Datenquelle eines Kombinationsfelds

  7. Sie können hier die App speichern und wiedergeben, um das Navigieren zwischen den Bildschirmen und das Erstellen neuer Tauchausrüstung zu testen.

Bilder und Servicetyp-Funktion erfassen

Gehen Sie folgendermaßen vor, um Benutzern die Möglichkeit zu geben, beim Check-in Bilder und den Servicetyp aufzunehmen:

  1. Stellen Sie sicher, dem Formular frmCheckin Servicetyp, Anhänge und Angenommen am hinzuzufügen.

    Screenshot des Canvas-App-Studios mit Fokus auf den Feldern für ein Formular

  2. Entsperren Sie die Datenkarte Akzeptiert am, und legen Sie dann die Eigenschaft Update mit dem folgenden PowerFx-Skript fest, um den Wert Akzeptiert am auf das Datum und die Uhrzeit der Erstellung der Serviceanfrage festzulegen.

    Now()

  3. An diesem Punkt können Sie die App speichern und wiedergeben, um das Hinzufügen von Bildern als Anhänge zur Serviceanfrage zu testen.

Signaturfunktion erfassen

Gehen Sie folgendermaßen vor, um Benutzern die Möglichkeit zu geben, eine Unterschrift zu erfassen und so einen Check-out abzuschließen:

  1. Fügen Sie Ihrem Bildschirm CHECKOUT einen Container hinzu, und strecken Sie den Container, sodass er den gesamten Bildschirm ausfüllt. Legen Sie die Eigenschaft Fill des Containers auf Folgendes fest: RGBA(149,149,149,0.4)

  2. Fügen Sie dem Container-Steuerelement folgende Beschriftungen hinzu

    Name Text Position/Größe Andere Informationen
    lbl_SignatureCapture <leer> X: 0
    Y: 338
    Breite: 640
    Höhe: 384    		 Füllen: RGBA(255, 255, 255, 1)
    lbl_SignatureLine <leer> X: 0
    Y: 587
    Breite: 640
    Höhe: 13    		 Füllen: RGBA(0,0,0,1)
    lbl_CustomerSignature Unterschrift des Kunden X: 21
    Y: 600
    Breite: 560
    Höhe: 70    		 FontSize: 21
    lbl_OK OK X: 388
    Y: 599
    Breite: 60
    Höhe: 70    		 FontSize: 21
    lbl_Cancel Abbrechen X: 492
    Y: 599
    Breite: 122
    Höhe: 70    		 FontSize: 21

    Das Ergebnis ähnelt dem folgenden Screenshot.

    Screenshot des Canvas-App-Studios mit dem Fokus auf dem Steuerelement Text Beschriftung und den Steuerelementen für mehrere Bezeichnungen eines Bildschirms

  3. Fügen Sie die folgenden Steuerelemente Symbole dem Container auf dem Bildschirm CHECKOUT aus. Sie werden links neben den Beschriftungen „Abbrechen“ und „OK“ angezeigt und sind auswählbar.

    Name Symbol Position/Größe Farbe
    ico_Cancel Abbrechen X: 448
    Y: 615
    Breite: 35
    Höhe: 39    		 RGBA(255,0,0,1)
    ico_OK Überprüfung X: 346
    Y: 615
    Breite: 35
    Höhe: 39    		 RGBA(51,176,75,1)

  4. Fügen Sie in Ihren Container ein Steuerelement Stifteingabe hinzu, um die Kundenunterschrift zu erfassen. Benennen Sie es um in PenCustomerSignature, und legen Sie die Eigenschaften für Steuerelemente anzeigen auf Aus fest. Legen Sie die Position und Größe so fest, dass sie sich über dem Steuerelement lbl_SignatureLine befindet.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Steuerelement Stifteingabe und den Eigenschaften des Steuerelements

  5. Wir werden eine Variable hinzufügen, um den Container mit den signaturbezogenen Steuerelementen je nach Prozessphase ein‑ und auszublenden. Ersetzen Sie die aktuelle Eigenschaft OnSelect der Schaltfläche btnSaveCheckOut mit dem folgenden PowerFx-Skript:

    Set(flgSignature, true);

  6. Zum Anzeigen und Ausblenden des Containers mit den signaturbezogenen Steuerelementen basierend auf dem Status der Variablen flgSignature richten Sie die Eigenschaft Visible des Containers auf Folgendes ein:

    flgSignature

  7. Legen Sie die Eigenschaft OnSelect von ico_Cancel mit dem folgenden PowerFx-Skript fest, um die Option bereitzustellen, die Signaturerfassung abzubrechen und zum Bildschirm CHECKOUT zurückzukehren:

    Reset(PenCustomerSignature);Set(flgSignature, false);

  8. Legen Sie die Eigenschaft OnSelect von ico_OK mit dem folgenden PowerFx-Skript fest, um die Serviceanfrage mit der erfassten Signatur zu aktualisieren und den Checkout-Prozess abzuschließen:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now(),'Customer Signature':PenCustomerSignature.Image}); Reset(PenCustomerSignature); Set(flgSignature, false);

  9. An dieser Stelle können Sie die App speichern und abspielen, um die Signaturerfassung beim Checkout einer Serviceanfrage zu testen.

Neue Funktion für Debitoren erstellen

Gehen Sie folgendermaßen vor, um über den Bildschirm CHECKIN Benutzern das Erstellen neuer Kunden zu ermöglichen:

  1. Erstellen Sie ein Duplikat des Bildschirms CHECKIN, und benennen Sie ihn dann in CUSTOMER um. Benennen Sie die Bildschirmkomponenten um, und führen Sie die folgenden Schritte aus:

    1. Bearbeiten Sie die Eigenschaften frmCustomer, um die Tabelle Kontakte als Datenquelle zu verwenden

    2. Wählen Sie die verschiedenen Felder aus, die Sie für Benutzer verfügbar machen möchten, z. B. Vorname, Nachname, E-Mail und Mobiltelefon.

    Screenshot des Canvas-App-Studios mit Fokus auf den Eigenschaften für ein form-Steuerelement und den neu benannten Komponenten auf einem Bildschirm

  2. Um das Formular zu aktualisieren, wenn die Schaltfläche btnSaveCustomer ausgewählt wurde und eine Verarbeitung eines neuen Debitors zu ermöglichen, geben Sie das folgende PowerFx-Skript in der Eigenschaft OnSelect der Schaltfläche ein:

    SubmitForm(frmCustomer); NewForm(frmCustomer); Refresh(Contacts);

  3. Geben Sie das folgende PowerFx-Skript in die Eigenschaft OnSelect der Schaltfläche ein, um zurück zum Bildschirm CHECKIN zu navigieren, wenn die Schaltfläche btnBackCustomer ausgewählt ist:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Zum Navigieren von CHECKIN zu diesem, entsperren Sie die Eigenschaften der Datenkarte für das Feld Debitor des Formulars frmCheckIn. Passen Sie die Größe des Kombinationsfelds der Datenkarte an, um Platz zum Einfügen eines Symbols Hinzufügen daneben zu schaffen.

    Screenshot des Canvas-App-Studios mit Fokus auf dem Steuerelement Symbole und seinen Eigenschaften

  5. Geben Sie das folgende PowerFx-Skript in die Eigenschaft OnSelect des Symbols ein, um zum Bildschirm CUSTOMER zu navigieren:

    Navigate(CUSTOMER,ScreenTransition.Fade);

  6. Ändern Sie die Datenquelleneigenschaft des Kombinationsfelds in die Tabelle Kontakte, um sicherzustellen, dass die Customer List aktualisiert wird, wenn ein neuer Debitor erstellt wird.

    Screenshot des Canvas-App-Studios mit Fokus auf der Eigenschaft Datenquelle eines Kombinationsfelds

  7. Sie können hier die App speichern und wiedergeben, um das Navigieren zwischen den Bildschirmen und das Erstellen neuer Tauchausrüstung zu testen.

Nächste Schritte

Jetzt wissen Sie, wie Sie mit Dataverse eine Canvas-App Dive Center erstellen. Als Nächstes erfahren Sie, wie Sie eine modellgesteuerte App erstellen.