Vorherige

Nächste

Übung – Variablen und Sammlungen verwenden

Abgeschlossen

In dieser praktischen Übung erfahren Sie, wie Sie globale, kontextbezogene Funktionen und Sammlungsfunktionen erstellen und verwenden.

1. Melden Sie sich beim Power Apps Maker Portal an (make.powerapps.com).

2. Wählen Sie im linken Navigationsbereich des Startbildschirms + Erstellen und dann Leere App aus. Klicken Sie dann im Popup-Fenster Erstellen unter Leere Canvas-App auf die Option Erstellen.

3. Geben Sie Ihrer App den Namen Sammlungsübung, belassen Sie das Format bei Tablet, und klicken Sie auf Erstellen.

4. Nach einigen Augenblicken wird Ihre neue App angezeigt. Sie können den Dialog zur Begrüßung überspringen (sofern er angezeigt wird). Finden Sie im Bereich Strukturansicht das Objekt App, und wählen Sie dann die Eigenschaft OnStart aus.

   

5. Legen Sie die OnStart-Eigenschaft auf diese Formel fest, die wir verwenden, um eine Sammlung von Kundennummern und den zugehörigen Rechnungsnummern zu erstellen (kopieren Sie sie einfach und fügen Sie sie in die fx-Formelleiste ein):

   ClearCollect(colCustomer,
   {CustomerNumber: 7470, InvoiceNumber: "INV70817"},
   {CustomerNumber: 4259, InvoiceNumber: "INV29595"},
   {CustomerNumber: 8251, InvoiceNumber: "INV74302"},
   {CustomerNumber: 2338, InvoiceNumber: "INV35115"},
   {CustomerNumber: 1524, InvoiceNumber: "INV82337"},
   {CustomerNumber: 1530, InvoiceNumber: "INV82338"}
   );
   Set(varUserDisplayName, User().FullName)
   

6. Wählen Sie die Auslassungspunkte (…) neben dem App-Objekt aus, und klicken Sie dann auf OnStart ausführen. Dadurch wird die soeben eingegebene OnStart-Formel ausgeführt und Ihre Sammlung colCustomer ausgefüllt.

7. Wählen Sie die Registerkarte Einfügen (oder + Einfügen auf der Befehlsleiste) aus, und fügen Sie einen vertikalen Katalog hinzu. Richten Sie dann die Eigenschaft Items auf colCustomer ein.

   Verwenden Sie rechts auf dem Bildschirm den Bereich Eigenschaften, um die im folgenden beschriebenen Anpassungen an Ihrer Gallery1 vorzunehmen.

   • Layout: Titel und Untertitel

   • Höhe: 650

   • Felder: Ändern Sie den Titel so, dass CustomerNumber im Datenbereich widergespiegelt wird (alternativ können Sie die Titelbezeichnung im Katalog auswählen und die Eigenschaft Text in ThisItem.CustomerNumber ändern)

   • Löschen Sie das NextArrow-Symbol (wählen Sie es im Katalog aus).

8. Wählen Sie im Katalog den umkreisten Stift für die Beschreibung oder die Bezeichnung Titel aus, und verwenden Sie die Registerkarte Einfügen, um ein Symbol hinzuzufügen. Suchen Sie nach dem Symbol Papierkorb, und wählen Sie es aus. Verschieben Sie das Symbol „Papierkorb“ auf die rechte Seite des Katalogs.

   Ihr Katalog umfasst jetzt das Symbol „Papierkorb“.

   

9. Wählen Sie das Symbol Papierkorb und die folgende Formel zu seiner Eigenschaft OnSelect aus:

   Remove(colCustomer,ThisItem)

10. Drücken und halten Sie die ALT-Taste, und wählen Sie das erste Papierkorb-Symbol aus.

    Dadurch wird die ausgewählte Zeile aus der Sammlung gelöscht. Während dieser Vorgang bearbeitet wird, möchten Sie wahrscheinlich eine Warnmeldung ausgeben, dass die Zeile gelöscht wird.

    Lassen Sie uns nun durch Verwendung einer kontextuellen Variablen eine Popup-Warnung erstellen, um den Benutzer über das ausstehende Löschen zu informieren und ihm eine Option zum Abbrechen zu geben.

11. Ändern Sie zunächst OnSelect auf dem Symbol Papierkorb in Folgendes:

    UpdateContext({varPopup:true})

12. Wählen Sie zum Erstellen eines Popup-Fensters den Bildschirm (außerhalb des Katalog-Steuerelements) aus, und verwenden Sie die Option Einfügen, um ein Rechteck hinzuzufügen (Geben Sie in das Suchfeld im Menü Einfügen „Rechteck“ ein, um dies schnell zu finden).

13. Bearbeiten Sie die Rechteck-Eigenschaften folgendermaßen:

    • Name: rectangle_backgrd

    • Größe: 744 (Breite); 720 (Höhe)

    • Füllung: RGBA(166, 166, 166, .50)

    Positionieren Sie das Rechteck so, dass es Ihren Katalog abdeckt.

14. Fügen Sie ein weiteres Rechteck hinzu, und aktualisieren Sie seine Eigenschaften auf folgende:

    • Name: rectangle_foregrd

    • Size: 744 (Breite); 348 (Höhe)

    • Fill: RGBA(255, 255, 255, 1)

    • BorderThickness: 1

    Positionieren Sie dieses Rechteck so, dass es in den oberen Teil des anderen Rechtecks passt.

15. Wählen Sie Einfügen>Textbeschriftung aus.

16. Nehmen Sie die folgenden Änderungen an den Beschriftungseigenschaften Text vor:

    • Name: lbl_popup

    • FontSize: 15

    • Schriftbreite: Fett

    • Textausrichtung: Mitte

17. Setzen Sie den Text „lbl_popup“ zur folgenden Formel:

    varUserDisplayName & "
    Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber
    

18. Wählen Sie Einfügen>Schaltfläche aus, und nennen Sie Ihre Schaltfläche: „button_Delete“. Setzen Sie ihre Eigenschaft Text dann auf: Delete

19. Setzen Sie die Eigenschaft Delete ButtonOnSelect auf Folgendes:

    Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
    UpdateContext({varPopup:false})
    

20. Wählen Sie Einfügen>Schaltfläche aus, und nennen Sie die neue Schaltfläche: „button_Cancel“. Setzen Sie Ihre Eigenschaft Text auf: Cancel

21. Legen Sie die Eigenschaft OnSelect der Schaltfläche „Abbrechen“ fest auf:

    UpdateContext({varPopup:false})

22. Ordnen Sie die neu erstellten Steuerelemente folgendermaßen über Gallery1 an:

    

23. Lassen Sie uns nun alle diese Steuerelemente zusammen auswählen, sodass wir sie gruppieren können. Wählen Sie bei gedrückter STRG-Taste die folgenden Steuerelemente aus:

    • rectangle_backgrd

    • rectangle_foregrd

    • lbl_popup

    • button_Delete

    • button_Cancel

24. Wenn alle ausgewählt sind, klicken Sie mit der rechten Maustaste auf Gruppe, und wählen Sie diese Option aus. Legen Sie die Eigenschaft Visible von Group1 folgendermaßen fest:

    varPopup

    Dadurch sollten sie alle vom Bildschirm verschwinden. Falls dies nicht der Fall ist, halten Sie die Taste ALT gedrückt, und klicken Sie auf die Schaltfläche Cancel.

    Sie haben ein Popup-Fenster erstellt, das den ausgewählten Kunden aus dem Katalog löscht.

    Lassen Sie uns nun die Funktion Delete testen.

25. Drücken und halten Sie die ALT-Taste, und wählen Sie das erste Papierkorb-Symbol für die Rechnung mit der Nr. INV29595 aus.

26. Wählen Sie die Schaltfläche Löschen aus. INV29595 wird aus der Sammlung entfernt, und Ihr Popup-Fenster verschwindet.

27. Drücken und halten Sie jetzt die ALT-Taste erneut, und wählen Sie dann das Symbol Papierkorb für die Rechnung mit der Nr. INV74302 aus.

28. Klicken Sie dieses Mal auf Ihre Schaltfläche Abbrechen. Das Popup-Fenster wird geschlossen, und INV74302 verbleibt im Katalog.

Jetzt haben wir eine dynamische Sammlung, eine globale Variable und ein Popup erstellt, das eine kontextabhängige Variable verwendet.

Weiter