Teilen über

Hinzufügen eines scrollenden Bildschirms zu einer Canvas-App

  • Artikel

Erstellen Sie in einer Canvas-App einen Bildschirm, durch den Benutzer scrollen können, um andere Elemente anzuzeigen. Erstellen Sie z.B. eine Smartphone-App, die Daten in mehreren Diagrammen anzeigt, die Benutzer durch Scrollen anzeigen können.

Wenn Sie in einem Abschnitt mehrere Steuerelemente hinzufügen, bleibt die relative Position der Steuerelemente im Abschnitt erhalten, wobei es keine Rolle spielt, ob es sich um eine Smartphone-App oder eine Tablet-App handelt. Bildschirmgröße und Ausrichtung kann sich auch darauf auswirken, wie die Abschnitte angeordnet sind.

Voraussetzungen

  1. Erstellen Sie eine leere Canvas-App.
  2. Erfahren Sie, wie Sie Steuerelemente hinzufügen und konfigurieren.

Erstellen eines Scrollbildschirms

  1. Wählen Sie unter der Menü Neue Anzeige aus.

  2. Wählen Sie Bildlauffähig.

    Wählen Sie einen neuen Bildschirm und dann einen scrollbaren Bildschirmtyp.

    Der App wird ein neuer scrollbarer Bildschirmtyp hinzugefügt.

    Ein Screenshot, der den scrollbaren Bildschirm zeigt, der der App hinzugefügt wurde.

Steuerelemente hinzufügen

Der scrollbare Bildschirm enthält standardmäßig ein flüssiges Raster mit einer Datenkarte. Datenkarten helfen beim Trennen von Bausteinen auf dem Bildschirm. Um den Bildschirm mit mehreren Steuerelementen scrollbar zu machen, fügen Sie weitere Datenkarten hinzu. Fügen Sie dann nach Bedarf Steuerelemente in Datenkarten hinzu.

Um Datenkarten hinzuzufügen, können Sie Abschnitt hinzufügen am unteren Rand des scrollbaren Bildschirms auswählen.

Abschnitt hinzufügen-Schaltfläche, die auf dem scrollbaren Bildschirm auf dem Canvas hervorgehoben ist.

Wir beginnen mit dem Hinzufügen von Steuerelementen auf der Datenkarte, die standardmäßig mit dem scrollbaren Bildschirm verfügbar ist, und fügen dann einen neuen Abschnitt hinzu, der eine weitere Datenkarte hinzufügt. Sobald eine neue Datenkarte verfügbar ist, fügen wir der neuen Datenkarte ein weiteres Steuerelement hinzu.

Zusammen würden beide Datenkarten und die Steuerelemente innerhalb der Datenkarten die Standardlänge des Bildschirms verlängern, was die Verwendung der Bildlauffähigkeit des Bildschirms erfordern würde.

Tipp

Weitere Informationen zu Datenkarten finden Sie unter Grundlegendes zu Datenkarten.

  1. Wählen Sie + (Einfügen) im linken Bereich aus.

    Alt-Text zur Beschreibung des Bildinhalts.

  2. Erweitern Sie Diagramme, und wählen Sie dann Säulendiagramm aus.

  3. Ändern Sie die Größe des auf dem Bildschirm hinzugefügten Diagramms so, dass es etwa zwei Drittel des Bildschirms einnimmt.

  4. Reduzieren Sie die Größe der Datenkarte auf die Größe des hinzugefügten Diagramms.

    Ändern Sie die Größe der Datenkarte auf dem Bildschirm so, dass sie zwei Drittel des Bildschirms einnimmt.

  5. Wählen Sie Abschnitt hinzufügen auf dem Bildschirm, um einen weiteren Abschnitt hinzuzufügen.

    Dem Bildschirm wird eine neue Datenkarte hinzugefügt:

  6. Wählen Sie Einfügen > Diagramme > Liniendiagramm aus.

  7. Scrollen Sie mit der Bildlaufleiste auf der rechten Seite des Bildschirms nach unten und wählen Sie dann Abschnitt hinzufügen aus, um eine dritte Datenkarte hinzuzufügen.

  8. Wählen Sie Einfügen > Eingabe > Stifteingabe aus.

  9. Passen Sie die Größe des Stifteingabe-Steuerelements an, indem Sie die Breite innerhalb der Datenkarte vergrößern.

    Stifteingabe-Steuerelement mit größerer Breit auf dem Bildschirm.

  10. Drücken Sie F5 auf der Tastatur, um eine Vorschau der App anzuzeigen. Scrollen Sie mit der Bildlaufleiste nach unten zum unteren Teil des Bildschirms.

    Vorschau des scrollbaren Bildschirms.

Nachdem Sie nun gezeigt haben, wie Sie den scrollbaren Bildschirm verwenden, passen Sie die App weiter an Ihre geschäftlichen Anforderungen an.

Bildlaufbildschirm für Formulare

Das Power Apps Datenkarten verwendet, um Abschnitte zu erstellen, können die Steuerelemente Formular anzeigen und Formular bearbeiten nicht in sie eingefügt werden. Das Verschachteln einer solchen Kombination von Steuerelementen kann die Leistung der App beeinträchtigen. Verwenden Sie daher bei der Verwendung von Formularsteuerelementen Layout-Container wie das vertikaler Container-Steuerelement.

Tipp

Informationen zum Arbeiten mit Formularen finden Sie unter Canvas-App-Formulare verstehen.

Es gibt mehrere verschiedene Methoden, um das Scrollen mit Formularen zu konfigurieren:

Verwenden Sie die Vertical Overflow-Eigenschaft

Die Verwendung der Vertical Overflow-Eigenschaft ist eine grundlegende Methode zur Verwendung eines Bildlaufbildschirms mit einem Formular.

  1. Stellen Sie sicher, dass Sie einen leeren Bildschirm und keinen scrollbaren Bildschirm verwenden.

  2. Wählen Sie Einfügen > Layout, und wählen Sie dann Vertikaler Container.

  3. Wählen Sie auf der rechten Seite des Bildschirms im Eigenschaftenbereich Vertical Overflow-Eigenschaften-Dropdown-Menü und wählen Sie Scrollen aus.

    Vertical overflow-Eigenschaft des auf Scrollen gesetzten Containers.

  4. Fügen Sie das Bearbeitungs- oder Anzeigeformular mit den erforderlichen Feldern hinzu. Wenn die Liste der Felder die Größe des Containers auf dem Bildschirm überschreitet, können Sie mithilfe der Bildlaufleiste innerhalb des Containers scrollen.

    Scrollbarer vertikaler Container, der die Eigenschaft „Vertical Overflow“ zum Scrollen mit einem Anzeigeformular verwendet.

Verwenden Sie Container innerhalb von „vertikaler Container“

Bei komplexen Apps können Sie erwägen, Container innerhalb eines „Vertikaler Container“-Steuerelements hinzuzufügen. Passen Sie dann die Höhe des Formulars und des inneren Behälters wie unten gezeigt an.

  1. Stellen Sie sicher, dass Sie einen leeren Bildschirm und keinen scrollbaren Bildschirm verwenden.

  2. Wählen Sie Einfügen > Layout, und wählen Sie dann Vertikaler Container.

  3. Wählen Sie auf der rechten Seite des Bildschirms im Eigenschaftenbereich Vertical Overflow-Eigenschaften-Dropdown-Menü und wählen Sie Scrollen aus.

  4. Wählen Sie Einfügen > Layout, und wählen Sie dann Container.

  5. Schalten Sie auf der rechten Seite des Bildschirms im Eigenschaftenbereich Flexible height-Eigenschaft auf Aus.

    Flexible height-Eigenschaft für den Container deaktiviert.

  6. Fügen Sie das Bearbeitungs- oder Anzeigeformular mit den erforderlichen Feldern hinzu.

  7. Um das Scrollen innerhalb des Bildschirms für das Formular zu ermöglichen, aktualisieren Sie die Höhe des in Schritt 4 hinzugefügten Containers und des Formulars.

    Bildlauffähiges Formular, das die Container- und Formularhöhe für die Bildlauffunktion verwendet.

Weitere Informationen zum Arbeiten mit der Reaktionsfähigkeit einer App finden Sie unter Responsive Canvas-Apps erstellen und Responsive Layouts

Siehe auch

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).