Übung – Eine grundlegende Bildschirmnavigation für eine Canvas-App erstellen
In dieser Lerneinheit arbeiten wir weiter an unserer Contoso-Kaffeemaschinen-App. Stellen Sie daher sicher, dass Sie die App geöffnet haben, die wir in diesem Lernmodul weiter entwickelt haben.
Wir fügen eine App-Bildschirmnavigation hinzu, damit Ihr Benutzer zu den verschiedenen Bildschirmen der App wechseln kann. Wenn Sie eine App erstellen, ist der Bildschirm oben in Ihrer Strukturansicht der Bildschirm, auf dem die App landet, es sei denn, Sie definieren in der Formel Ihres StartScreens für Ihre App absichtlich einen anderen Bildschirm. In unserem Fall ist der erste Bildschirm, der jemandem angezeigt wird, wenn wir eine App mit ihm teilen, unser „Home Screen“.
Gehen Sie folgendermaßen vor, um unserer App Navigation hinzuzufügen:
Wechseln Sie zum „Home Screen“ Ihrer App und fügen Sie zwei Schaltflächen-Steuerelemente ein.
Positionieren Sie beide in der Mitte des Bildschirms übereinander mit etwas Abstand dazwischen, damit unser Benutzer nicht versehentlich auf eines tippt, wenn er versucht, auf das andere zu tippen.
Halten Sie die Umschalttaste gedrückt, und wählen Sie beide Steuerelemente aus. Einige Steuerelemente haben identische Eigenschaften, die leicht an beide ausgewählten Elemente angepasst werden können. Lassen Sie beide Steuerelemente für die nächsten beiden Schritte ausgewählt.
Wählen Sie das Dropdown-Steuerelement Ausrichten auf der Befehlsleiste und dann die Option „Links ausrichten“ aus. Wenn Sie das Dropdown-Steuerelement Ausrichten nicht sehen, klicken Sie mit der rechten Maustaste (wobei beide Steuerelemente ausgewählt sind), und es wird die Dropdown-Option Ausrichten in einem Popup-Fenster angezeigt.
Hinweis
Die Funktion Ausrichten ist eine leistungsstarke Option, schnell mehrere Steuerelemente gleichzeitig anzuordnen. Eine weitere leistungsstarke Funktion, die Sie sich merken sollten, ist die Funktion Rückgängig machen, die sich auch in der Befehlsleiste rechts neben der Schaltfläche Zurück befindet.
Jetzt finden Sie im Eigenschaftenfenster auf der rechten Seite die Eigenschaften „Width“ und „Height“. Diese sind numerische Eingabefelder. Geben Sie 250 für Width und 100 für Height ein.
Ändern Sie die Eigenschaft Text der Schaltfläche oben zur Aufschrift „Katalog anzeigen“ und die Text-Eigenschaft der unteren Schaltfläche in „Admin Screen“.
Als Nächstes fügen wir unsere ersten Funktionen hinzu, die die Bildschirmnavigation aktivieren. Die Funktion Navigate verfügt über einen erforderlichen Parameter: den Bildschirm, zu dem die App navigieren wird. Wenn Sie eine Funktion Navigate hinzufügen, geben Sie Ihren Bildschirmnamen in einfache Anführungszeichen ein, und denken Sie daran, dass Power Apps Sie dazu auffordert, wenn Sie ihn in die Formelleiste eingeben. Wählen Sie die Schaltfläche „Katalog anzeigen“ aus, und fügen Sie der Eigenschaft OnSelect Folgendes hinzu:
Navigate('Catalog Screen')Wählen Sie zudem die Schaltfläche mit dem Namen „Admin Screen“ aus, und geben Sie Folgendes in die Eigenschaft OnSelect ein:
Navigate('Admin Screen')Wenn wir unserem Benutzer die Möglichkeit geben, vom Startbildschirm aus zu navigieren, bleibt er auf dem Zielbildschirm hängen, es sei denn, wir bieten ihm eine Möglichkeit, zum Startbildschirm zurückzuwechseln. Sie haben bereits die Funktion Navigate gesehen, mit der Sie Ihren Benutzer zurück zum Startbildschirm bringen können, Power Apps bietet jedoch mit der Funktion Back eine weitere Möglichkeit, zum Bildschirm zu wechseln, auf dem sich Ihr Benutzer zuvor befand. Wechseln Sie zum Catalog Screen, und fügen Sie ein Schaltflächen-Steuerelement hinzu.
Ziehen Sie Ihre neue Schaltfläche in die untere rechte Ecke des Bildschirms, und aktualisieren Sie die Eigenschaft Text so, dass sie „Zurück“ lautet.
Aktualisieren sie jetzt die Eigenschaft OnSelect Ihrer neuen Schaltfläche zu Folgendem:
Back()Durch diese Formel wird der Benutzer zum vorherigen Bildschirm zurückgeleitet.
Wechseln Sie zu Ihrem Admin Screen, und wiederholen Sie die beiden oben genannten Schritte.
Wechseln Sie nun zurück zu Ihrem Home Screen, und versetzen Sie die App in den Vorschaumodus. Versuchen Sie, die Schaltfläche „Katalog anzeigen“ auszuwählen und dann mithilfe der Schaltfläche „Zurück“ zur Startseite zurückzukehren. Versuchen Sie den gleichen Vorgang mit den Schaltflächen Ihres Admin Screen.
Tipp
Ihre App versteht „Zurück“ nur, wenn Sie zuerst über die App zu diesem Bildschirm navigieren. Wenn Sie mit der Vorschau Ihrer App über den Catalog Screen oder den Admin Screen beginnen, hat Power Apps keinen Kontext dafür, zu welchem Bildschirm mit der Back-Funktion navigiert werden soll. Denken Sie also bei der Vorschau Ihrer App daran, die Vorschau vom Home Screen aus zu starten.
Herzlichen Glückwunsch! Sie haben Ihrer App jetzt eine grundlegende Navigation hinzugefügt. Im nächsten Lernmodul erfahren Sie mehr über die App-Navigation. Bleiben Sie also nach einer kurzen Wissensbeurteilung bei uns, um weitere Dinge zu erfahren, die Sie tun können, um Ihre App auf die nächste Stufe zu heben!