Eine für Mobilgeräte optimierte App erstellen, die dynamische Designs verwendet
In dieser Übung erstellen wir eine für mobile Geräte optimierte One-Screen-App basierend auf unseren Contoso-Kaffeemaschinendaten. Der Zweck dieser Übung ist es, Ihnen Erfahrungen beim Erstellen einer App mit Auto-Layout-Containern zu vermitteln und Ihnen aus erster Hand zu zeigen, wie sich reaktionsfähige Apps verhalten. Wir erstellen eine völlig neue App. Wechseln Sie also auf die Power Apps-Startseite, und gehen Sie diese Schritte durch.
Laden Sie die Excel-Tabelle CoffeeMachineData.xlsx herunter. Wählen Sie den Link und dann die Schaltfläche Rohdatei herunterladen aus, um die Datei herunterzuladen. Fahren Sie mit den nächsten Schritten fort, wenn das Herunterladen durchgeführt wird.
Wählen Sie Erstellen>Leere App>Tablet aus. Benennen Sie Ihre App, und klicken Sie dann auf die Option Erstellen.
Das folgende Diagramm hilft Ihnen bei den nächsten Schritten, die entsprechend der Schritte nummeriert sind. Klicken Sie auf der Befehlsleiste auf die Schaltfläche Einstellungen. (Möglicherweise müssen Sie App im Bereich Strukturansicht auswählen, um dies anzuzeigen.)
Wählen Sie im Popup-Fenster Einstellungen die Registerkarte Anzeige aus, scrollen Sie dann nach unten und wählen Sie Aus für die Option Passend skalieren aus (diese Aktion schaltet automatisch das Seitenverhältnis sperren auf Aus).
Schließen Sie dann das Popup-Fenster Einstellungen.
Erstellen Sie einen Neuen Bildschirm mit einem Seitenleistenlayout für Ihre App. Geben Sie diesem den Namen „Catalog Screen“.
Erstellen Sie über Vorlagen>Erfolgreich einen Neuen Bildschirm. Geben Sie diesem den Namen „Success Screen“.
Löschen Sie Screen1.
Wählen Sie dann die Schaltfläche Daten hinzufügen von der Befehlsleiste aus. Suchen Sie dann OneDrive for Business, und wählen Sie dies aus.
Wählen Sie im Bereich Excel-Datei auswählen auf der rechten Seite Ihres Bildschirms Ihre Datei CoffeeMachineData.xlsx aus. Wählen Sie dann die Tabelle CoffeeMachines aus. Klicken Sie unten im Bereich auf die Option Verbinden, um die Tabelle zu verbinden.
Wählen Sie den horizontalen Container SidebarContainer1 links auf Ihrem Bildschirm aus. Beziehen Sie sich auf das Bild unten für die nächsten Schritte.
Wählen Sie das Pluszeichen (+)-Symbol im Container aus, und fügen Sie einen Vertikalen Katalog in SidebarContainer1 ein, und wählen Sie dann CoffeeMachines als Datenquelle aus. Legen Sie die Eigenschaft Fill auf „Color.LightSteelBlue“ fest.
Als Nächstes fügen wir in den Catalog Screen ein Formular ein. Wählen Sie rechts auf Ihrer App-Canvas MainContainer1 aus. Wählen Sie das Pluszeichen (+) (oder die Schaltfläche „Einfügen“ auf der Befehlsleiste) aus, um ein Bearbeitungsformular einzufügen. Wählen Sie im Bereich Eigenschaften auf der rechten Seite des Bildschirms CoffeeMachines als Datenquelle aus.
Wählen Sie im Bereich „Eigenschaften“ unter der Datenquelle die Option Felder bearbeiten aus.
Wählen Sie im Bereich Felder die Option Feld hinzufügen aus, und fügen Sie alle Felder hinzu, indem Sie im Popup-Fenster „Feld auswählen“ das Kontrollkästchen neben jedem Feldnamen aktivieren. Wählen Sie dann unten die Schaltfläche Hinzufügen aus.
Schließen Sie den Bereich Felder.
Während Form1 noch ausgewählt ist, wählen Sie im Dropdownmenü Eigenschaft oben links auf dem Bildschirm die Eigenschaft Item aus, und geben Sie im Feld der Formel (fx) Folgendes ein: Gallery1.Selected
Abschließend legen Sie dann in Ihrem Formular die Eigenschaft Fill auf „Color.LightSteelBlue“ fest.
Wir fügen dann unseren Kopfzeilen-Container hinzu. Wählen Sie das Steuerelement HeaderContainer aus, und verwenden Sie das Pluszeichen (+), um eine Textbeschriftung einzufügen und die Eigenschaften im Dropdown wie folgt anzupassen:
Text: „Contoso Coffee Catalog“
Size: ändern von 13 in 20
Height: ändern von 40 in Parent.Height
Width: ändern von 150 in 200
Mit der Schaltfläche 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.
Fügen Sie als Nächstes ein Image-Steuerelement in HeaderContainer1 ein, und passen Sie die Eigenschaften wie folgt an:
Image: User().Image
Höhe: Parent.Height
Erstellen wir ein Verbindungssymbol, indem wir ein Symbol Globus in HeaderContainer1 einfügen. Passen Sie die Eigenschaften wie folgt an:
Height: 20
Width: 20
Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)
Als Nächstes richten wir unsere HeaderContainer-Elemente rechtsbündig aus. Suchen Sie dazu im Eigenschaftenfenster auf der rechten Seite nach der Option Im Blocksatz ausrichten (horizontal). Die dritte Option ist Ende. Machen Sie weiter, und wählen Sie diese Option aus.
Abschließend fügen wir unserem Kopfzeilen-Container etwas Hintergrundfarbe hinzu. Passen Sie die Eigenschaft Fill auf „Color.LightSteelBlue“ an.
Wählen Sie MainContainer1 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)
Wählen Sie das Formular innerhalb von MainContainer1 aus, und passen Sie die Eigenschaft OnSuccess in Folgendes an: Navigate(Screen3)
Wählen Sie aus dem Bereich Strukturansicht den Success Screen aus.
Wählen Sie das Symbol Check (iconCheck1) aus, und aktualisieren Sie die OnSelect-Eigenschaft auf:
Back()Setzen Sie die App in den Vorschaumodus. Passen Sie die Anzeige an das iPhone 12 an, indem Sie das Dropdownmenü „Telefon“ auswählen. Ist Ihnen aufgefallen, wie Ihr Display die Steuerelemente verändert hat? Probieren Sie die Ausrichtung verschiedener Tablets und Telefone aus, um zu sehen, wie sich der Bildschirm ändert.
Unsere einfache, reaktionsfähige App ist jetzt auf jeder Plattform nutzbar. Weiter so!