Eine für Mobilgeräte optimierte App erstellen, die dynamische Designs verwendet

In dieser Übung erstellen Sir eine für mobile Geräte optimierte App mit einem Bildschirm unter Verwendung von Microsoft Power Apps und Daten von Contoso Coffee Machines. Diese praktische Aufgabe hilft dabei, die Verwendung von Auto-Layout-Containern zu verstehen und zu beobachten, wie sich das responsive Design auf verschiedenen Geräten verhält.

Sie starten auf der Power Apps-Startseite. Führen Sie die folgenden Schritte aus:

1. Laden Sie die App in a Day-Dateien herunter, und extrahieren Sie sie. Öffnen Sie die Excel-Datei mit dem Namen Machine-Order-Data.xslx.

2. Wechseln Sie zu make.powerapps.com. Wählen Sie Folgendes aus: Erstellen>Mit einer leeren Canvas beginnen>Responsiv. Wählen Sie die Option Überspringen aus, wenn ein Willkommens-Popup-Fenster erscheint.

3. Beziehen Sie sich auf das Bild unten, um Unterstützung bei den nächsten Schritten zu erhalten. Klicken Sie auf der Befehlsleiste auf die Schaltfläche Einstellungen. Wenn es nicht zu sehen ist, klicken Sie im Bereich Strukturansicht auf die App, um es anzuzeigen.

   

4. Wählen Sie im Bereich des Popup-Fensters Einstellungen die Registerkarte Anzeige aus. Scrollen Sie dann nach unten, um sicherzustellen, dass die Option Skalierung anpassen auf Aus geschaltet ist. (So wird die Option Seitenverhältnis sperren auf Aus gestellt.)

5. Schließen Sie dann das Popup-Fenster Einstellungen.

6. Erstellen Sie einen Neuen Bildschirm indem Sie im Strukturansichtsbereich + Neuer Bildschirm auswählen. Wählen Sie ein Randleistenlyout für Ihren neuen Bildschirm aus. Weisen Sie den Namen „Catalog Screen“ zu, indem Sie auf den Bildschirmnamen (Screen2) doppelklicken und dann „Catalog Screen“ eingeben.

7. Erstellen Sie einen weiteren neuen Bildschirm, und verwenden Sie für diesen Bildschirm die Erfolgsvorlage. Geben Sie dem neuen Bildschirm den Namen „Success Screen.“

8. Löschen Sie Screen1 durch Klicken auf den Bildschirm in der Strukturansicht, Auswahl der Ellipse rechts neben dem Bildschirm und anschließender Auswahl der Option Löschen.

9. Wählen Sie dann den Randleistencontainer Catalog Screen aus. (Sie müssen mehrere Containerebenen erweitern, um den Seitenleistencontainer zu finden.) Fügen Sie einen vertikalen Katalog hinzu, indem Sie die Option + Einfügen und dann Vertikaler Katalog mit der ausgewählten Option „SidebarContainer1“ auswählen.

10. Der Bereich Eine Datenquelle auswählen sollte automatisch geöffnet werden. Wählen Sie die Schaltfläche Daten hinzufügen auf der Befehlsleiste mit Ihrem ausgewählten Katalog-Steuerelement in der Strukturansicht aus.

11. Suchen Sie nach OneDrive for Business, und wählen Sie dies aus. Erstellen Sie dann eine Verbindung. (Sie können das Sucheingabefeld verwenden, um die Suche einzuschränken.)

12. Der Bereich Eine Excel-Datei auswählen erscheint auf der rechten Seite Ihres Bildschirms. Wählen Sie die Datei Machine-Order-Data.XLSX und dann die Tabelle Maschinen aus. Klicken Sie unten im Bereich auf die Option Verbinden, um die Tabelle zu verbinden. Es sollte dann oben auf dem Bildschirm eine Benachrichtigung zu sehen sein. Sie können zum Verlassen das „X“ auswählen.

13. Möglicherweise müssen Sie die in Ihrem Katalog angezeigten Daten aktualisieren. Wenn Ihr Katalog wie im Bild unten aussieht, folgen Sie diesen Schritten. Wenn die richtigen Felder angezeigt werden, können Sie direkt mit Schritt 17 unten fortfahren.

    

14. Erweitern Sie den Katalog, und wählen Sie das Titelfeld aus. Ändern Sie in der Formelleiste die Text-Eigenschaft für die Titeltextbezeichnung in ThisItem.'Machine Name'.

15. Wählen Sie dann das Untertitelfeld aus. Ändern Sie in der Formelleiste die Text-Eigenschaft für die Untertiteltextbezeichnung in ThisItem.Price.

16. Wählen Sie dann das Bildfeld aus. Ändern Sie in der Bearbeitungsleiste die Image-Eigenschaft für die Image-Eigenschaft des Bild-Steuerelements in ThisItem.Photo.

17. Wählen Sie in der Strukturansicht das Dropdownmenü neben dem Seitenleistencontainer aus, um dessen Inhalt zu reduzieren.

18. Wählen Sie den Hauptcontainer auf der rechten Seite Ihres Bildschirms mit dem Namen MainContainer2 aus.

    

19. Wählen Sie das Pluszeichen (+) (oder die Schaltfläche „Einfügen“ auf der Befehlsleiste) aus, um ein Bearbeitungsformular einzufügen. Wählen Sie die Tabelle Machines als Datenquelle aus.

20. Wählen Sie rechts im Bereich „Eigenschaften“ unter der Datenquelle die Option Felder bearbeiten aus.

21. Wählen Sie im Bereich Felder die Option Feld hinzufügen aus, und fügen Sie die folgenden Felder hinzu, indem Sie das Kontrollkästchen neben jedem Feldnamen in dieser Reihenfolge aktivieren: Foto, Maschinen-ID, Maschinenname, Farbe, Beschreibung, Funktion, Preis, Maschinentyp, Maschinentyp-ID, durchschnittliche Tassen pro Woche und durchschnittliche Espressi pro Woche. Wählen Sie dann unten die Schaltfläche Hinzufügen aus.

22. Schließen Sie den Bereich Felder.

23. Beachten Sie, dass die Felder im Formular in der Reihenfolge angezeigt werden, in der Sie sie ausgewählt haben.

24. Während Sie Form1 im Dropdownmenü Eigenschaft oben links auf Ihrem Bildschirm (über der Kopfzeile der Strukturansicht) noch ausgewählt haben, wählen Sie die Eigenschaft Item aus, und geben Sie denn im Formelfeld (fx) Folgendes ein: Gallery1.Selected. (Wenn Ihr Katalog nicht Gallery1 heißt, verwenden Sie Ihren tatsächlichen Katalognamen.)

25. Richten Sie dann abschließend die Eigenschaft Fill in Folgendes ein, während Ihr Formular noch ausgewählt ist: Color.LightSteelBlue.

26. Sie fügen dann unseren Kopfzeilen-Container hinzu. Wählen Sie das Steuerelement HeaderContainer2 aus (Verwenden Sie während dieser Übung den Namen Ihres tatsächlichen Steuerelements für die Kopfzeile, falls dieser abweicht), und verwenden Sie das Pluszeichensymbol (+), um ein Steuerelement Textbeschriftung einzugeben. Passen Sie die Eigenschaften der Textbeschriftung mithilfe der Dropdownliste für Eigenschaften und der Bearbeitungsleiste wie folgt an:

    Text: „Contoso Coffee Catalog“

    Size: ändern von 13 in 20

    Height: ändern von 40 in Parent.Height

    Width: ändern von 150 in 200

27. Mit dem Dropdownmenü Ausrichten auf der Befehlsleiste (links neben der Schaltfläche Farbe; alternativ können Sie für die Auswahl Textausrichtung im Bereich Eigenschaften rechts suchen), ändern Sie Ausrichten von Linksbündig zu Blocksatz.

28. Wählen Sie anschließend den Kopfzeilen-Container außerhalb der Textbeschriftung aus, um die Auswahl der Textbeschriftungssteuerung aufzuheben. Fügen Sie ein Bild-Steuerelement in HeaderContainer2 ein, und passen Sie die Eigenschaften wie folgt an:

    Image: User().Image

    Height: Parent.Height

29. Sie können ein Verbindungssymbol erstellen, indem Sie ein Symbol Globus in HeaderContainer2 einfügen. Passen Sie die Eigenschaften wie folgt an:

    Height: 20

    Width: 20

    Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

30. Dann können Sie die Elemente des Kopfzeilencontainers rechtsbündig ausrichten. Wählen Sie dazu HeaderContainer2 in der Ansicht der Strukturansicht aus, und zeigen Sie den Bereich „Eigenschaften“ auf der rechten Seite an. Suchen Sie nach der Option Im Blocksatz ausrichten (horizontal). Die dritte Option ist Ende (die angezeigt wird, wenn Sie den Mauszeiger über das Symbol bewegen). Wählen Sie diese aus.

31. Abschließend fügen Sie dem Kopfzeilen-Container etwas Hintergrundfarbe hinzu. Passen Sie die Eigenschaft Fill an Folgendes an: Color.LightSteelBlue.

32. Wählen Sie MainContainer2 aus. Hier befindet sich Ihr Formular. Fügen Sie ein Schaltflächen-Steuerelement mit folgenden Eigenschaften ein:

    Text: „Speichern“

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

33. Wählen Sie das Formular innerhalb von MainContainer2 aus, und passen Sie die Eigenschaft OnSuccess in Folgendes an: Navigate('Success Screen').

34. Wählen Sie aus dem Bereich Strukturansicht den Success Screen aus.

35. Wählen Sie das Symbol Check (iconCheck1) aus, und aktualisieren Sie die OnSelect-Eigenschaft auf:

    Back()

36. Geben Sie den Vorschau-Modus ein. Passen Sie die Anzeige an das iPhone 12 an, indem Sie das Dropdownmenü „Telefon“ auswählen. Beobachten Sie, wie sich das Layout je nach Gerät und Ausrichtung anpasst.

37. Speichern Sie Ihre App, wenn Sie sie später verwenden oder erneut aufrufen möchten.

Sie haben jetzt eine reaktionsfähige App erstellt, die plattformübergreifend verwendet werden kann.