Übung – Eine grundlegende Bildschirmnavigation für eine Canvas-App erstellen

  • 5 Minuten

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:

  1. Wechseln Sie zum „Home Screen“ Ihrer App und fügen Sie zwei Schaltflächen-Steuerelemente ein.

  2. 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. Beachten Sie, wie Power Apps Ihnen auf dem Bildschirm mit „Punktierte Linie“-Referenzen angezeigt werden, die Ihnen dabei helfen, Steuerelemente im Hinblick auf andere Steuerelemente auf dem Bildschirm in ihrer Nähe zu positionieren. Stellen Sie in diesem Fall sicher, dass sie leicht versetzt sind, damit wir das Steuerelement Ausrichtung lernen können.

  3. 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.

  4. 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.

  5. 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.

  6. Ändern Sie die Eigenschaft Text der Schaltfläche oben zur Aufschrift „Katalog anzeigen“ und die Text-Eigenschaft der unteren Schaltfläche in „Admin Screen“.

    Um die text-Eigenschaft zu bearbeiten, können Sie auf den Text einer Schaltfläche auf dem Bildschirm doppelklicken oder das Formelfeld oder das Eigenschaftenfenster öffnen, um den Text zu aktualisieren. Probieren Sie alle diese Techniken aus, um zu ermitteln, welche Methode für Sie am besten geeignet ist.

  7. 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 wechseln 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')

  8. 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')

  9. 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.

  10. 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.

  11. Aktualisieren sie jetzt die Eigenschaft OnSelect Ihrer neuen Schaltfläche zu Folgendem:

    Back()

    Durch diese Formel wird der Benutzer zum vorherigen Bildschirm zurückgeleitet.

  12. Wechseln Sie zu Ihrem Admin Screen, und wiederholen Sie die beiden oben genannten Schritte.

  13. 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!