Freigeben über

Bildschirme in Canvas-Apps hinzufügen und darin navigieren

Erstellen Sie moderne, reaktionsfähige Apps, indem Sie vorgefertigte Bildschirme für gängige App-Szenarien hinzufügen. Die Bildschirme verfügen über reaktionsfähige Container und moderne Steuerelemente, die sich an unterschiedliche Bildschirmgrößen anpassen. Sie können auch benutzerdefinierte Bildschirme mit unterschiedlichen Layouts und Steuerelementen hinzufügen.

Die folgenden neuen vordefinierten Bildschirme sind verfügbar:

Screenshot des Menüs „Neuer Bildschirm“ in Power Apps Studio mit verfügbaren Layouts

Einen neuen Bildschirm hinzufügen

  1. Melden Sie sich bei Power Apps an.

  2. Erstellen Sie eine Canvas-App oder öffnen Sie eine zur Bearbeitung.

  3. Wählen Sie auf der Befehlsleiste die Option Neuer Bildschirm und dann ein Bildschirmlayout aus.

  4. Sehen Sie sich eine Vorschau der App an, um zu sehen, wie sie auf verschiedenen Geräten aussieht. Weitere Informationen finden Sie unter Vorschau einer App.

Trinkgeld

Damit sich die App an die Größe des Gerätebildschirms anpasst, auf dem sie ausgeführt wird, deaktivieren Sie die Option Passend skalieren.

Willkommensbildschirm

Der Willkommensbildschirm eignet sich ideal für den ersten Bildschirm einer App, auf dem Sie Kacheln wie ein Bild, einen Titel und eine Beschreibung anpassen können. Sie können die Anzahl der Kacheln ändern, indem Sie sie im Hauptcontainer hinzufügen oder entfernen. Verwenden Sie die Kacheln, um Benutzenden zu anderen Teilen der App zu führen.

Der Willkommensbildschirm enthält die folgende Vorlage für Steuerelemente:

  • Bildschirmcontainer
    • Kopfzeilencontainer
      • Header
    • Hauptcontainer
      • Container
        • Bildcontainer
          • Image
        • Titelcontainer
          • Schaltfläche „Featureelement“
          • Beschreibungstext

Screenshot, der zeigt, was erscheint, wenn Sie über die Schaltfläche „Neuer Bildschirm“ ein Willkommensbildschirmlayout hinzufügen

Elemente zum Willkommensbildschirm hinzufügen und ihn anpassen

  1. Wählen Sie Neuer Bildschirm>Willkommensbildschirm aus.

  2. Um das Bild einer Kachel zu ändern, wählen Sie erst sie und dann Bearbeiten aus.

  3. Wählen Sie das Schaltflächen-Steuerelement Ausgewähltes Element aus und fügen Sie im Eigenschaftenbereich Ihren eigenen Text hinzu.

    Screenshot, der zeigt, wo der Text der Kachel „Ausgewähltes Element“ bearbeitet werden kann

  4. Wählen Sie die Kurzbeschreibung oder den ansprechenden Nachrichtentext aus und fügen Sie Ihren eigenen hinzu.

  5. Fügen Sie bei Bedarf Kacheln hinzu, und entfernen Sie sie.

    • Um Kacheln in der Strukturansicht hinzuzufügen, kopieren Sie ein Containerelement und fügen Sie eines ein.

    • Um eine Kachel in der Strukturansicht zu entfernen, wählen Sie mit der rechten Maustaste einen Container und dann Löschen aus.

Verwenden Sie den Bildschirm Kopfzeile und Katalog, um eine Reihe von Produkt- oder Serviceinformationen anzuzeigen, z. B. einen Produktkatalog. Wenn Sie ein Katalog-Steuerelement mit einer Datenquelle verbinden, wird automatisch ein Katalog erstellt, für den nur wenige Anpassungen erforderlich sind.

Das Katalogsteuerelement im Bildschirm Kopfzeile und Katalog ist ein klassisches Steuerelement. Wenn das moderne Katalogsteuerelement veröffentlicht wird, verwendet es der Bildschirm Kopfzeile und Katalog. Überblick über moderne Steuerelemente und Designs in Canvas-Apps.

Der Bildschirm Kopfzeile und Katalog enthält die folgende Vorlage für Steuerelemente:

  • Bildschirmcontainer
    • Kopfzeilencontainer
      • Header
    • Hauptcontainer
      • Katalog
        • Katalogcontainer
          • Bildcontainer
            • Image
          • Titelcontainer
            • Titeltext
            • Beschreibungstext
          • Schaltflächencontainer
            • Button

Screenshot mit dem Bildschirm „Kopfzeile und Katalog“.

  1. Wählen Sie Neuer Bildschirm>Kopfzeile und Katalog aus.

  2. Wählen Sie in der Strukturansicht Katalog aus, und verbinden Sie ihn mit einer Datenquelle wie z. B. Dataverse.

  3. Wählen Sie im Katalog bestimmte Steuerelemente aus, z. B. das Bild, den Titeltext und die Textbeschreibung. Verwenden Sie in den Eigenschaften des Steuerelements die ThisItem-Syntax, um das gewünschte Bild, den Titeltext und die Beschreibung festzulegen.

    Wenn Sie beispielsweise den Kontonamen zum Titeltextsteuerelement hinzufügen möchten, finden Sie es, indem Sie ThisItem in die Bearbeitungsleiste eingeben, um eine Liste der verfügbaren Elemente aufzurufen, die Sie aus Ihrem Dataset hinzufügen können.

    Screenshot, der die Verwendung von ThisItem in der Bearbeitungsleiste zeigt.

Genehmigungsanforderungs-Bildschirm

Der Bildschirm Genehmigungsanforderung enthält eine Kopfzeile, ein Formular mit einer Schaltfläche zum Senden und einen Katalog mit vordefinierten Phasen. Der Bildschirm Genehmigungsanforderung eignet sich für Szenarien, in denen Aktionen durch Formularübermittlungen ausgelöst werden, z. B. das Übermitteln einer Genehmigungsanforderung oder das Anzeigen eines Workflowprozesses für ein Unternehmen.

Trinkgeld

Wenn Sie einen Genehmigungsanforderungsbildschirm hinzufügen, werden Sie aufgefordert, ihn mit einer Datenquelle zu verbinden. Die Datenquelle bestimmt die Feldnamen im Anfrageformular.

Der Bildschirm Genehmigungsanforderung enthält die folgende Vorlage für Steuerelemente:

  • Bildschirmcontainer
    • Kopfzeilencontainer
      • Header
    • Hauptcontainer
      • Formularcontainer
        • Formulattiteltext
        • Genehmigungsformular
        • Schaltfläche „Senden“
      • Randleistencontainer
        • Prüfertext
        • Prüferkatalog

Screenshot des Bildschirms „Genehmigungsanforderung“.

Den Bildschirm „Genehmigungsanforderung“ hinzufügen und anpassen

  1. Wählen Sie Neuer Bildschirm>Genehmigungsanforderung aus.

  2. In der Strukturansicht von ApprovalForm werden Sie aufgefordert, eine Verbindung zu einer Datenquelle herzustellen, z. B. zu Dataverse.

  3. Eine Datenquelle auswählen

  4. Um sich die Details der Genehmigungsphasen anzeigen zu lassen, wählen Sie in der Strukturansicht ReviewersGallery unter dem Knoten SidebarContainer aus. Wählen Sie dann im Eigenschaftenbereich die Registerkarte Erweitert aus und wählen Sie Elemente aus.

    Die Genehmigungsphasen weisen folgende Details auf:

    • Name: Der Name der Phase oder der genehmigenden Person
    • Titel: Der Untertitel der Phase oder der genehmigenden Person
    • Status: Der Phasenstatus
    • Aktuell: Gibt an, ob es sich bei dieser Phase um die aktuelle Phase der Genehmigungsanforderung handelt

    Screenshot, der die erweiterte Eigenschaft „Items“ zeigt.

Sie können der Schaltfläche einen Power Automate-Genehmigungsworkflow hinzufügen, um die genehmigende Person zu benachrichtigen. Weitere Informationen finden Sie unter Einen Genehmigungsworkflow mit Power Automate erstellen und testen.

Kopfzeile und Formular

Der Bildschirm Kopfzeile und Formular enthält eine Kopfzeile, ein Formular und zwei Schaltflächen zum Senden des Formulars oder zum Abbrechen der Formularübermittlung. Dieser Bildschirm eignet sich hervorragend für die Verwendung eines Vollbildformulars.

Der Bildschirm Kopfzeile und Formular enthält die folgende Vorlage für Steuerelemente:

  • Bildschirmcontainer
    • Kopfzeilencontainer
      • Header
    • Hauptcontainer
      • Formularcontainer
        • Form
      • Schaltflächencontainer
        • Schaltfläche „Abbrechen“
        • Schaltfläche „Senden“

Screenshot mit dem Bildschirm „Kopfzeile und Formular“.

Den Bildschirm „Kopfzeile und Formular“ hinzufügen und anpassen

  1. Wählen Sie Neuer Bildschirm>Kopfzeile und Formular aus.

  2. In der Strukturansicht wird Formular ausgewählt, und Sie werden aufgefordert, das Formular mit einer Datenquelle zu verbinden.

  3. Eine Datenquelle auswählen

  4. Wählen Sie optional, um die beste Bildschirmreaktionsfähigkeit zu gewährleisten, jede Datenkarte auf dem Formular aus und setzen Sie ihre Eigenschaft Width Fit auf der Registerkarte Anzeige des Bereichs Eigenschaften auf Ein.

Kopfzeile und Tabelle

Der Bildschirm Kopfzeile und Tabelle enthält zwei Steuerelemente, ein Kopfzeilensteuerelement und ein Tabellensteuerelement. Diese Vorlage eignet sich hervorragend zum Anzeigen einer detaillierten Datentabelle auf einem Bildschirm.

Der Bildschirm Kopfzeile und Tabelle enthält die folgende Steuerelemente:

  • Kopfzeilencontainer
    • Header
  • Hauptcontainer
    • Table

Den Bildschirm „Kopfzeile und Tabelle“ hinzufügen und anpassen

  1. Wählen Sie Neuer Bildschirm>Kopfzeile und Tabelle aus.

  2. Wählen Sie in der Strukturansicht Tabelle aus und verbinden Sie diese mit einer Datenquelle.

Tabelle und Formular

Der Bildschirm „Tabelle und Formular“ enthält zwei Hauptsteuerelemente: das moderne Tabellensteuerelement und das moderne Formularsteuerelement. Diese Vorlage verfügt über integrierte Power Fx Formeln, die eine einfache Datenverbindung und -anpassung ermöglichen. Diese Vorlage eignet sich ideal zum Auswählen und Bearbeiten eines Datensatzes mithilfe eines Formulars.

Der Tabellen- und Formularbildschirm enthält die folgenden Steuerelemente:

  • Bildschirmcontainer
    • Kopfzeilencontainer
      • Kopfzeilensteuerelement
    • Textcontainer
      • Texteingabe (Suche)
      • Tabellensteuerelement
      • Formularsteuerelement
      • Schaltfläche
        • Neu
        • Bearbeiten
        • Delete
        • Senden
        • Abbrechen

Screenshot mit dem Bildschirm „Tabelle und Formular“.

Tabellen- und Formularbildschirm hinzufügen und anpassen

In Power Apps Studio:

  1. Wählen Sie Neuer Bildschirm>Tabelle und Formular aus.

  2. Wählen Sie in der Inline-Aktionsleiste Daten aus.

  3. Wählen Sie die gewünschte Datenquelle aus.

    Screenshot, der die Position der Daten-Schaltfläche zeigt, wo Sie eine Datenquelle aus einer Liste auswählen können.

    Sobald die Verbindung hergestellt ist, sind sowohl die Tabelle als auch die Formularsteuerelemente an die Datenquelle gebunden.

Sie können einen Datensatz im Tabellensteuerelement auswählen, und das Formular zeigt die Details des ausgewählten Datensatzes an.

Alle Schaltflächen in dieser Vorlage verfügen über vorgefertigtes Power Fx, sodass keine weiteren Anpassungen erforderlich sind. Wenn Sie den Bildschirm mit der ausgewählten Datenquelle verbinden, ist der Bildschirm nun voll funktionsfähig.

Screenshot, der die Bildschirmansicht zeigt, wenn eine Verbindung mit einer Datenquelle besteht: eine Datenliste und ihre Formularelemente mit einer Senden-Schaltfläche.

Bildschirme neu anordnen

Wenn Ihre App über mehr als einen Bildschirm verfügt, können Sie diese in der Baumansicht in einer anderen Reihenfolge anordnen.

Wählen Sie das Überlaufmenü eines Bildschirms aus, den Sie neu anordnen möchten, und wählen Sie dann Nach oben oder Nach unten aus.

Screenshot, der zeigt, wo sich das Überlaufmenü befindet, um einen Bildschirm in Ihrer Baumansicht nach oben oder unten zu verschieben

Verwenden Sie die Eigenschaft StartScreen, um festzulegen, welcher Bildschirm zuerst angezeigt werden soll.

Navigation hinzufügen

Wenn Ihre App über mehr als einen Bildschirm verfügt, können Sie eine Navigation hinzufügen, damit Ihre Benutzer zwischen ihnen wechseln können.

  1. Wählen Sie bei dem ausgewählten Bildschirm Einfügen aus. Geben Sie im Suchfeld Weiter-Pfeil ein und wählen Sie ihn dann aus.

  2. Bewegen Sie den Pfeil an die Stelle auf dem Bildschirm, an der er erscheinen soll.

  3. Legen Sie bei ausgewähltem Pfeil die Eigenschaft OnSelect auf die Funktion Navigate fest, z. B. Navigate(Target, Fade).

    Ersetzen Sie Ziel durch den Namen des Bildschirms, zu dem Sie navigieren möchten.

    Screenshot der auf die Navigate-Funktion festgelegten OnSelect-Eigenschaft

    Wenn in diesem Beispiel ein Benutzender den Pfeil auswählt, wird der Ziel-Bildschirm eingeblendet.

  4. Fügen Sie auf die gleiche Weise auf dem Bildschirm Ziel ein Symbol Zurück-Pfeil hinzu. Legen Sie die OnSelect-Eigenschaft fest, zum Beispiel auf Navigate(Target, ScreenTransition.Fade).

    Ersetzen Sie Ziel durch den Namen des Bildschirms, zu dem Sie zurückkehren möchten.

Bildschirm-Steuerelement-Verweis

  • Last updated on