Steuerelemente und Bildschirme in Canvas-Apps erkunden
In dieser Lerneinheit untersuchen wir die Steuerelemente, die wir unserer App bereits hinzugefügt haben, sowohl im Katalog als auch im Formular. Zudem fügen wir unserer App als Vorbereitung auf die nächste Lerneinheit einige Bildschirme hinzu.
Steuerelemente in Power Apps
Ein Steuerelement ist ein Element der Benutzeroberfläche, das eine Aktion auslöst oder Informationen anzeigt. Viele Steuerelemente in Power Apps funktionieren wie die Steuerelemente, die Sie aus anderen Apps kennen: Beschriftungen, Texteingabefelder, Dropdownlisten, Navigationselemente usw.
Zusätzlich zu diesen typischen Steuerelementen verfügt Power Apps über speziellere Steuerelemente, die Sie auf der Schaltfläche + Einfügen finden, die ein Suchfeld zur Hilfe enthält, sodass Sie finden, was Sie suchen.
Im Folgenden werden einige der Steuerelemente aufgeführt, die Ihre Apps ggf. interessanter und nützlicher gestalten:
Galleries – Bei diesen Steuerelementen handelt es sich um Layoutcontainer mit Steuerelementen, die Datensätze aus einer Datenquelle zeigen.
Forms – Diese Steuerelemente zeigen Details zu Ihren Daten an und ermöglichen Ihnen das Erstellen und Bearbeiten von Datensätzen.
Media – Mit diesen Steuerelementen können Sie Hintergrundbilder, eine Kameraschaltfläche (damit Benutzer über die App Bilder aufnehmen können) und einen Barcodeleser (für die schnelle Erfassung und Identifizierung von Informationen) und weitere Elemente hinzufügen.
Charts – Mit diesen Steuerelementen können Sie Diagramme hinzufügen, einschließlich Power BI-Daten, sodass andere Benutzer sofort Analysen ihrer Daten durchführen können.
Verschaffen Sie sich einen Überblick über die verfügbaren Steuerelemente, indem Sie die Registerkarte + Einfügen auswählen und sich die verschiedenen Felder erweitern. Während Sie dies tun, sehen Sie die Nützlichkeit des Suchfelds, das Ihnen hilft, schnell das zu finden, wonach Sie suchen. Versuchen Sie, einige Werte in das Suchfeld einzugeben, um das Verhalten anzuzeigen.
Katalog-Steuerelemente und Eigenschaften
Im Katalog auf dem Bildschirm sollten verschiedene Steuerelemente angezeigt werden. Für die Art des Steuerelements wird direkt links neben dem Namen ein Symbol angezeigt, das angibt, um welche Art von Steuerelement es sich handelt. Beachten Sie, dass Sie über zwei Formsteuerelemente verfügen, wie ein Rechteck und ein Trennzeichen. Fahren Sie fort, und wählen Sie das Rechteck-Steuerelement aus Ihrer Strukturansicht aus. Sie werden sehen, dass die Eigenschaft OnSelect „Select(Parent)“ standardmäßig verwendet wird. Sofern Sie für keines dieser Katalog-Steuerelemente eine andere OnSelect-Eigenschaft festlegen, werden alle standardmäßig auf „Select(Parent)“ gesetzt, was bedeutet, dass durch die Auswahl dieses Steuerelements der Katalog selbst ausgewählt wird.
Wählen Sie nun das Steuerelement Katalog aus (kein Etikett oder eine Form darin, Sie müssen es möglicherweise in Ihrer Strukturansicht finden), und sehen Sie sich die Eigenschaft OnSelect an. Es ist derzeit auf „false“ eingestellt, was bedeutet, dass die Auswahl eines Steuerelements in Ihrem Katalog nichts bewirkt, bis Sie eine Aktion definieren.
Wählen Sie aus Ihrem Katalog in der Strukturansicht erneut das Steuerelement Rectangle aus. Wählen Sie jetzt den Dropdownwert links neben dem Formel-Eingabefeld (fx) aus, um zur Eigenschaft Visible zu wechseln. Beachten Sie, dass alle für das Steuerelement verfügbaren Eigenschaften in einer scrollbaren Liste sind, sodass Sie die Eigenschaft Visible suchen/auswählen können. Die Visible-Eigenschaft ist Teil jedes Steuerelements. Beachten Sie, dass dieses Steuerelement im Formelfeld ThisItem.IsSelected umfasst.
IsSelected ist ein boolescher Wert, der „true“ oder „false“ ergibt und anzeigt, ob dieses Element im Katalog ausgewählt ist oder nicht. Es kann immer nur ein Artikel in unserem Katalog ausgewählt werden, daher kann dieser Wert nur für einen Artikel „true“ sein. Wenn Sie Ihre App in den Modus Vorschau versetzen. Beim Versuch, verschiedene Kaffeemaschinen auszuwählen, bemerken Sie, dass das Rechteck-Steuerelement nur bei der von Ihnen ausgewählten Kaffeemaschine angezeigt wird. Das sichtbare Rechteck entspricht auch dem im Formular neben dem Katalog angezeigten Element.
Weitere wichtige Steuerelemente sind das Trennzeichen, ebenfalls ein Rechteck, aber immer sichtbar (es ist derzeit weiß gefärbt, sodass es nicht auf unserem weißen Bildschirm angezeigt wird), und ein Symbol mit dem Titel „NextArrow1“, das derzeit nichts anderes tut, als das übergeordnete Element aus dem Katalog und ein Bild-Steuerelement auszuwählen. Nehmen wir an, wir möchten NextArrow1 in einen Bearbeitungsstift ändern, um dem Benutzer einen Hinweis zu geben, dass er dieses Steuerelement betätigen muss, um diese Kaffeemaschine zu bearbeiten. Bedenken Sie, dass die Kopfzeile einige veränderbare Eigenschaften für das ausgewählte Steuerelement widerspiegelt? Wählen Sie in Ihrer Kopfzeile die Dropdown-Schaltfläche „Symbol“ aus. Unter „Aktionen“ wird dann das Bleistiftsymbol „Bearbeiten“ angezeigt. Fahren Sie fort, und wählen Sie es aus, um den Rechtspfeil in ein Bearbeitungssymbol zu ändern.
Besprechen wir kurz das Bild-Steuerelement. Da wir in Ihren Daten ein Bildfeld definiert haben, kann Power Apps anhand der Daten erkennen, was in dieses Feld gelangt. Wenn Sie hier ein anderes Bild anzeigen möchten, können Sie dieses in die Image-Eigenschaft dieses Steuerelements einfügen. Wenn bei einem Artikel zum Beispiel ein Bild im Bildfeld fehlt, können Sie mithilfe einer Formel prüfen, ob das Bildfeld leer ist, und gegebenenfalls ein anderes Bild anzeigen. Für das Bildfeld wird einfach ein Bild benötigt.
Da wir uns bereits mit Beschriftungen auseinandergesetzt haben, wechseln wir nun zu den Steuerelementen in Ihrem Formular.
Formularsteuerelemente und Eigenschaften
Gehen wir kurz auf die beiden wichtigsten Eigenschaften des Formulars ein. Die DataSource ist die Datentabelle, die mit dem Formular verbunden ist. Dies ist wichtig, damit Ihr Formular bei der Aktualisierung weiß, wo die Daten eingetragen werden müssen. Die zweite wichtige Eigenschaft ist Item. Der Artikel für unsere App ist der aus unserem Katalog ausgewählte Artikel.
Wenn Sie im Formular ein Feld auswählen, wird dieses Feld als DataCard in der Strukturansicht dargestellt. Beachten Sie, dass jede DataCard vier verschiedene Steuerelemente umfasst. Die beiden wichtigsten Bedienelemente auf Ihrer DataCard sind das Label-Steuerelement, das zunächst den Namen DataCardKey umfasst, und das Texteingabesteuerelement, das zunächst den Namen DataCardValue umfasst. Die anderen beiden Steuerelemente sind optional und davon abhängig, ob die Daten erforderlich sind oder nicht. StarVisible ist eine Textbeschriftung mit einem Sternchen, die angezeigt wird, wenn Sie dieses Feld als erforderlich kennzeichnen (entweder in Ihrem Formular oder in den Daten). Die ErrorMessage ist eine weitere Textbeschriftung, die angezeigt wird, wenn Sie versuchen, ein Formular abzusenden und diese Eingabe fehlt. Sie können die Visible-Eigenschaften für diese Steuerelemente anzeigen. Visible ergibt: „true“ oder „false“. Die Funktion And(), die im Steuerelement StarVisible angezeigt wird, bedeutet, dass beide durch ein Komma getrennten Bedingungen wahr sein müssen, damit die Funktion als „true“ ausgewertet wird.
Viele der Eigenschaften in den Formularsteuerelementen können nicht verändert werden, es sei denn, Sie „entsperren“ die Karte mit einer guten Begründung. Obwohl ein Formularsteuerelement die Eingabe von Daten erleichtern soll, ist es für Designzwecke deutlich weniger flexibel. Wenn wir Felder zu unserem vorhandenen Formular hinzufügen oder diese daraus entfernen würden, würde sich die Größe unserer Steuerelemente automatisch ändern und wir würden die von uns vorgenommenen Änderungen verlieren (denken Sie an die Texteingabe „Product Summary“). In zukünftigen Lerneinheiten werden wir mehr über das Anpassen der Dateneingabe erfahren, vorerst vermeiden wir jedoch das Anpassen von Formularkarten.
In der ImageDataCard befindet sich für unsere Kaffeemaschinen-Formulardaten das einzige Nicht-Text-Eingabesteuerelement. Beachten Sie, dass diese Karte zusätzlich zu den vier, die wir zuvor gesehen haben, mit dem Steuerelement Bild hinzufügen über ein zusätzliches Steuerelement verfügt. Beim Steuerelement Bild hinzufügen handelt es sich um ein Mediensteuerelement, mit dem Sie ein Bild von Ihrem Gerät (oder einem Online-Speicherort) auswählen können, um das vorhandene Bild zu ersetzen. Wenn Sie „Tippen oder auswählen, um ein Bild hinzuzufügen“, wird ein Popup-Fenster Öffnen angezeigt, in dem Sie eine Bilddatei auswählen und dieses Bild dann im Formular öffnen können.
Die Eigenschaften Default und Update sind zwei wichtige Eigenschaften, die Sie für jede Datenkarte kennen sollten. Die Eigenschaft Default gibt an, welche Spalte unserer Daten den Standardwert für diese Karte bereitstellt. Die Eigenschaft Update gibt an, von welchem Eingabesteuerelement die Daten stammen, die Power Apps zum Aktualisieren der Daten dieses Datensatzes nutzt.
Wählen Sie die Karte Product Summary aus, nur die Karte und nicht das Texteingabefeld in der Karte. Beachten Sie, dass der Standardwert für die Karte ThisItem.'Product Summary' ist. Dies ist der Wert, der im Texteingabefeld DataCardValue angezeigt wird. Wechseln Sie zur Update-Eigenschaft für die Karte, und beachten Sie, dass diese Karte die Aktualisierungsinformationen vom DataCardValue.Text der Karte empfängt. Wenn wir also das Formular absenden, übernimmt Power Apps alles, was in diesem Texteingabefeld steht, und aktualisiert die „Product Summary“ für diesen Artikel.
Es ist möglich, andere Steuerelemente in einer Karte zu entsperren und hinzuzufügen sowie die Aktualisierungseigenschaft der Karte zu verändern, solange das von Ihnen hinzugefügte Steuerelement den Datentyp bereitstellt, den Ihre Datenquelle erwartet.
Abschließend müssen wir für Power Apps einen SubmitForm-Befehl bereitstellen, damit alle Änderungen, die wir in unser Formular eingeben, gespeichert werden. In unserem Fall haben wir unter dem Formular die Schaltfläche „Änderungen speichern“, die dazu geeignet ist. Wenn Sie die Schaltfläche auswählen (im Bearbeitungsmodus), beachten Sie, dass die Eigenschaft OnSelectSubmitForm(Form1) ist, die jede aktualisierte Formularkarte nimmt und diese zurück in unsere Datenquelle schreibt.
Bildschirme hinzufügen
Bisher verfügte unsere App nur über einen einzigen Bildschirm. In den nächsten beiden Lerneinheiten fügen wir weitere Funktionen hinzu, während wir unsere App weiter anpassen. Mit diesem Verfahren können Sie Ihrer App Bildschirme hinzufügen:
Wählen Sie Ihren Screen1 im Bereich Strukturansicht aus, und klicken Sie dann auf die Schaltfläche Neuer Bildschirm auf der Befehlsleiste oder oben im Bereich Strukturansicht. Wählen Sie dann als Bildschirmvorlage Leer aus.
Wiederholen Sie diesen Vorgang, um einen dritten Bildschirm hinzuzufügen.
Geben wir unseren drei Bildschirmen jeweils einen neuen Namen. Doppelklicken Sie dazu im Bereich der Strukturansicht auf Screen1, und geben Sie als neuen Namen „Catalog Screen“ ein.
Wiederholen Sie diesen Vorgang, um Screen2 in „Home Screen“ und Screen3 in „Admin Screen“ umzubenennen.
Abschließend positionieren wir die Bildschirme in der Strukuransicht neu. Wählen Sie dazu die Schaltfläche mit den Auslassungspunkten und dann den Befehl Nach oben aus.
Nachdem wir nun ein besseres Verständnis der Katalog‑ und Formularsteuerelemente haben und wissen, wie wir unserer App Bildschirme hinzufügen, können wir unsere App weiter modifizieren, um die Benutzeroberfläche zu verbessern.