Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
Erstellen Sie beim Erstellen einer Canvas-App in Power Apps ganz einfach ein attraktives und effizientes Formular. Betrachten Sie z. B. dieses grundlegende Formular zum Aufzeichnen von Verkaufsaufträgen:
In diesem Lernprogramm werden die Schritte zum Erstellen dieses Formulars erläutert. Darüber hinaus befassen wir uns mit einigen erweiterten Themen, z. B. der dynamischen Größenanpassung von Feldern, um den verfügbaren Platz auszufüllen.
Bevor du anfängst
Wenn Sie mit Power Apps noch nicht vertraut sind (oder nur automatisch generierte Apps erstellt haben), sollten Sie eine App von Grund auf neu erstellen, bevor Sie sich mit diesem Artikel vertraut machen. Wenn Sie eine App von Grund auf neu erstellen, werden Sie mit den erforderlichen Konzepten wie dem Hinzufügen von Datenquellen und Steuerelementen vertraut, die in diesem Artikel erwähnt, aber nicht erläutert werden.
Dieser Artikel wird so geschrieben, als ob Sie über eine Datenquelle mit dem Namen "Verkaufsauftrag " verfügen und die Felder in der vorherigen Grafik enthalten. Wenn Sie über eine Power Apps pro Benutzer, pro App oder Testlizenz und Systemadministrator- oder System customizer-Berechtigungen verfügen, können Sie eine Tabelle in Microsoft Dataverse erstellen und ähnliche Felder hinzufügen.
Einen Katalog hinzufügen
Erstellen Sie eine Tablet-App von Grund auf neu, und fügen Sie Ihre Datenquelle hinzu.
Alles, was in diesem Artikel behandelt wird, gilt auch für Telefonlayouts, aber Telefon-Apps haben häufig nur eine vertikale Spalte.
Fügen Sie ein vertikales Gallery-Steuerelement hinzu, und legen Sie dessen Items-Eigenschaft auf 'Verkaufsauftrag' fest.
(optional) Um den Beispielen in diesem Lernprogramm zu entsprechen, ändern Sie das Layout des Katalogs so, dass nur Titel und Untertitel angezeigt werden.
Klicken oder tippen Sie in der Galerie auf SO004.
Dieser Datensatz wird in dem Formular angezeigt, das Sie erstellen, indem Sie die schritte weiter unten in diesem Artikel ausführen.
Hinzufügen einer Titelleiste
Fügen Sie einen leeren Bildschirm hinzu, auf dem Sie das Formular ablegen.
Außerhalb dieses Lernprogramms können Sie die Steuerelemente "Katalog" und " Formular bearbeiten " auf demselben Bildschirm platzieren, aber Sie haben mehr Platz, um mit ihnen zu arbeiten, wenn Sie sie auf separaten Bildschirmen platzieren.
Fügen Sie am oberen Rand des neuen Bildschirms ein Bezeichnungs-Steuerelement hinzu, und legen Sie deren Text-Eigenschaft auf den folgenden Ausdruck fest:
"Verkaufsauftrag " & Gallery1.Selected.SalesOrderIdDie Bezeichnung zeigt die Verkaufsauftragsnummer des Eintrags, der im Katalog ausgewählt wurde.
(optional) Formatieren Sie die Bezeichnung wie folgt:
Legen Sie die Align-Eigenschaft auf "Zentrieren" fest.
Legen Sie die Size-Eigenschaft auf 20 fest.
Legen Sie die Fill-Eigenschaft auf Navy fest.
Legen Sie die Color-Eigenschaft auf "Weiß" fest.
Legen Sie die Width-Eigenschaft auf "Parent.Width" fest.
Legen Sie die zugehörigen X- und Y-Eigenschaften auf 0 fest.
Ein Formular hinzufügen
Fügen Sie ein Bearbeitungsformular-Steuerelement hinzu, und verschieben und skalieren Sie es so, dass es den Bildschirm unter der Beschriftung ausfüllt.
Im nächsten Schritt verbinden Sie die Formularsteuerung mit der Datenquelle "Verkaufsauftrag", indem Sie den rechten Bereich nutzen und nicht die Bearbeitungsleiste. Wenn Sie die Bearbeitungsleiste verwenden, werden im Formular standardmäßig keine Felder angezeigt. Sie können jederzeit beliebige Felder anzeigen, indem Sie im rechten Bereich ein oder mehrere Kontrollkästchen aktivieren.
Klicken oder tippen Sie im rechten Bereich auf den Abwärtspfeil neben Keine Datenquelle ausgewählt, und klicken oder tippen Sie dann auf Auftragsbestellung.
Ein Standardsatz von Feldern aus der Datenquelle "Verkaufsauftrag " wird in einem einfachen, dreispaltigen Layout angezeigt. Viele davon sind jedoch leer, und es kann eine Weile dauern, bis sie an ihren endgültigen Positionen positioniert sind.
Legen Sie die Item-Eigenschaft des Formulars auf "Gallery1.Selected" fest.
Das Formular zeigt den Datensatz an, den Sie im Katalog ausgewählt haben, aber der Standardsatz von Feldern stimmt möglicherweise nicht mit dem gewünschten Datensatz im Endprodukt überein.
Blenden Sie im rechten Bereich jedes dieser Felder aus, indem Sie das Kontrollkästchen deaktivieren:
- Verkaufsauftrags-ID
- Konto
- Vertriebsmitarbeiter
- Kontokontakt
Verschieben Sie das Feld " Bestellstatus ", indem Sie es nach links ziehen und dann auf der anderen Seite des Kundenauftragsverweisfelds ablegen.
Ihr Bildschirm sollte diesem Beispiel ähneln:
Auswählen einer Datenkarte
Jedes angezeigte Feld weist eine entsprechende Datenkarte auf dem Formular auf. Diese Karte enthält eine Reihe von Steuerelementen für den Feldtitel, ein Eingabefeld, einen Stern (der angezeigt wird, wenn das Feld erforderlich ist) und eine Überprüfungsfehlermeldung.
Sie können karten auch direkt im Formular auswählen. Wenn eine Karte ausgewählt ist, wird darüber eine schwarze Beschriftung angezeigt.
Hinweis
Wenn Sie eine Karte löschen (und nicht nur ausblenden) möchten, wählen Sie sie aus, und drücken Sie ENTF.
Anordnen von Karten in Spalten
Standardmäßig verfügen Formulare in Tablet-Apps über drei Spalten, und in Smartphone-Apps gibt es eine. Sie können nicht nur angeben, wie viele Spalten ein Formular hat, sondern auch, ob alle Karten innerhalb von Spaltenrahmen passen sollen.
In dieser Abbildung wurde die Anzahl der Spalten im Formular von 3 in 4 geändert. Dazu wurde das Kontrollkästchen An Spalten ausrichten aktiviert. Die Karten im Formular wurden automatisch an das neue Layout angepasst.
Größe von Karten in mehreren Spalten anpassen
Je nach den Daten auf jeder Karte möchten Sie möglicherweise, dass einige Karten in eine einzelne Spalte und andere Karten passen, um mehrere Spalten zu umfassen. Wenn eine Karte mehr Daten enthält, als sie in einer einzelnen Spalte angezeigt werden sollen, können Sie die Karte erweitern, indem Sie sie auswählen und dann den Ziehpunkt auf dem linken oder rechten Rand des Auswahlfelds ziehen. Beim Ziehen des Ziehpunkts wird die Karte an den Spaltenbegrenzungen „eingerastet“.
Um Das Design flexibler zu gestalten, aber eine Struktur beizubehalten, können Sie die Anzahl der Spalten auf 12 erhöhen. Mit dieser Änderung können Sie jede Karte ganz einfach so konfigurieren, dass sie das gesamte Formular, die Hälfte des Formulars, ein Drittel, ein Viertel, ein Sechstel usw. umfasst. Sehen wir uns dies in Aktion an.
Legen Sie im rechten Bereich die Anzahl der Spalten im Formular auf 12 fest.
Am Formular wird keine sichtbare Änderung vorgenommen, aber Sie verfügen über eine größere Anzahl von Fangpunkten, wenn Sie den rechten oder linken Ziehpunkt ziehen.
Vergrößern Sie die Breite der Karte Order date (Bestelldatum), indem Sie den Ziehpunkt rechts um einen Fangpunkt nach rechts ziehen.
Die Karte umfasst vier der 12 Spalten des Formulars (oder 1/3 des Formulars), statt nur drei der 12 Spalten des Formulars (oder 1/4 des Formulars). Wenn Sie die Breite einer Karte um einen Snap-Punkt erhöhen, erstreckt sich die Karte um ein zusätzliches Zwölftel der Form.
Wiederholen Sie den vorherigen Schritt mit dem Bestellstatus und den Referenzkarten für Kundenbestellungen .
Ändern Sie die Größe der Namen- und Beschreibungskarten , um sechs Spalten (oder 1/2) des Formulars aufzunehmen.
Die ersten beiden Zeilen der Lieferadresse sollen die volle Breite des Formulars einnehmen.
Fertig. Wir haben unser gewünschtes Format, mischen Zeilen mit unterschiedlicher Spaltenanzahl:
Bearbeiten von Steuerelementen in einer Karte
Die Lieferadresse enthält mehrere Informationen, die für den Benutzer visuell gruppiert werden sollen. Jedes Feld verbleibt in einer eigenen Datenkarte, aber wir können die Steuerelemente in der Karte bearbeiten, um sie besser zusammenpassen zu können.
Wählen Sie die erste Zeile der Lieferadresse Karte aus, wählen Sie die Beschriftung innerhalb dieser Karte aus, und löschen Sie dann die ersten drei Wörter aus dem Text.
Wählen Sie die Karte Zweite Zeile der Lieferadresse aus, wählen Sie das Label in dieser Karte aus und löschen Sie dann den gesamten Text darin.
Oft können Sie das Bezeichnungssteuerelement einfach entfernen. Formeln können jedoch davon abhängen, dass dieses Steuerelement vorhanden ist. Der sicherere Ansatz besteht darin, den Text zu entfernen oder die Visible-Eigenschaft des Steuerelements auf "false" festzulegen.
Verschieben Sie auf derselben Karte das Texteingabefeld über die Beschriftung, um den Abstand zwischen der ersten und der zweiten Zeile der Adresse zu verringern.
Die Höhe der Karte verkleinert sich, wenn ihre Inhalte weniger Platz einnehmen.
Jetzt richten wir unsere Aufmerksamkeit auf die dritte Zeile der Adresse. Ähnlich wie das, was wir gerade getan haben, kürzen wir den Text jeder Beschriftung für diese Karten und ordnen das Texteingabefeld rechts neben jeder Beschriftung an. Hier sind die Schritte für die Statuskarte :
| Schritt | Description | Ergebnis |
|---|---|---|
| 1 | Wählen Sie die Statuskarte aus, sodass Ziehpunkte um sie herum angezeigt werden. |
|
| 2 | Wählen Sie die Bezeichnung auf dieser Karte aus, sodass Ziehpunkte an ihrem Rand angezeigt werden. |
|
| 3 | Platzieren Sie den Cursor rechts neben dem Text, und löschen Sie dann den nicht benötigten Teil. |
|
| 4 | Passen Sie mithilfe der Ziehpunkte an den Seiten das Beschriftungssteuerelement an die neue Textgröße an. |
|
| 5 | Wählen Sie das Texteingabe-Steuerelement innerhalb dieser Karte aus. |
|
| 6 | Mithilfe der Ziehpunkte an den Seiten können Sie das Texteingabesteuerelement auf die gewünschte Größe anpassen. |
|
| 7 | Ziehen Sie das Texteingabefeld nach rechts oben neben das Bezeichnungssteuerelement, und legen Sie es dort ab. |
|
| Unsere Änderungen an der Staatskarte sind jetzt abgeschlossen. |
|
Das Ergebnis für die vollständige dritte Adresszeile:
Viele der Karten beginnen mit dynamischen Formeln für ihre Eigenschaften. Beispielsweise hatte das Texteingabesteuerelement, dessen Größe wir geändert und das wir darüber verschoben haben, eine Width-Eigenschaft, die auf der Breite des übergeordneten Elements basiert. Wenn Sie ein Steuerelement verschieben oder die Größe ändern, werden diese dynamischen Formeln durch statische Werte ersetzt. Wenn Sie möchten, können Sie die dynamischen Formeln mithilfe der Bearbeitungsleiste wiederherstellen.
Deaktivieren von "An Spalten ausrichten"
Manchmal möchten Sie eine feinere Kontrolle, als die standardmäßigen 12 Spalten bieten können. In diesen Fällen können Sie An Spalten ausrichten deaktivieren und Karten manuell positionieren. Das Formular rastet weiterhin in 12 Spalten ein, aber Sie können nach dem Starten einer Größenänderung oder Neupositionierung auch die Alt- oder Strg+Umschalttaste gedrückt halten, um die Fangpunkte außer Kraft zu setzen. Weitere Informationen finden Sie unter alternativen Tastenkombinationen für abweichendes Verhalten.
In unserem Beispiel haben die vier Komponenten, aus denen die dritte Zeile der Adresse besteht, genau dieselbe Breite. Dies ist jedoch möglicherweise nicht das beste Layout, da Stadtnamen länger als staatliche Abkürzungen sind und das Texteingabefeld für Länder/Regionen aufgrund der Länge der Beschriftung kurz ist. Um diesen Platz zu optimieren, schalten Sie im rechten Fensterbereich Spalten einblenden aus und halten Sie dann die Tasten Alt oder Strg+Umschalt gedrückt, nachdem Sie mit der Größe und Positionierung dieser Karten begonnen haben.
Nach sorgfältiger Positionierung verfügt das Ergebnis über geeignete Größen für jedes Feld und gleichmäßigen Abstand zwischen Feldern:
Was sind zusammengefasst die Unterschiede zwischen der Aktivierung und Deaktivierung von An Spalten ausrichten?
| Verhalten | „An Spalten ausrichten“ ein | „An Spalten ausrichten“ aus |
|---|---|---|
| Bei Größenänderung erfolgt eine Ausrichtung an | Anzahl der ausgewählten Spalten: 1, 2, 3, 4, 6 oder 12 |
12 Spalten |
| Ausrichten bei Größenänderung kann außer Kraft gesetzt werden | Nein | Ja, mit Alt- oder Ctrl+UMSCHALTTASTEN nach dem Starten der Größenänderung |
| Karten werden automatisch zwischen Zeilen neu angeordnet (mehr zu diesem späteren Zeitpunkt) | Yes | Nein |
Festlegen von Breite und Höhe
Wie bei allem in Power Apps wird das Layout des Formulars durch Eigenschaften der Kartensteuerelemente gesteuert. Wie bereits beschrieben, können Sie die Werte dieser Eigenschaften ändern, indem Sie Steuerelemente an verschiedene Positionen ziehen oder Griffpunkte verwenden, um die Größe der Steuerelemente zu ändern. Sie werden jedoch Situationen entdecken, in denen Sie diese Eigenschaften genauer verstehen und bearbeiten möchten, insbesondere bei dynamischen Formularen mit Formeln.
Grundlegendes Layout: X, Y und Breite
Die X- und Y-Eigenschaften steuern die Position von Karten. Wenn wir mit Steuerelementen im unformatierten Canvas arbeiten, geben diese Eigenschaften eine absolute Position an. In einem Formular haben diese Eigenschaften eine andere Bedeutung:
- X: Reihenfolge innerhalb einer Zeile.
- Y: Zeilennummer.
Ähnlich wie Steuerelemente auf der Leinwand gibt die Width-Eigenschaft die Mindestbreite der Karte an (mehr zu den Mindestwerten in Kürze).
Sehen wir uns die Eigenschaften X, Y und Width der Karten in unserer Form an:
Überlaufende Datenzeilen
Was geschieht, wenn die Karten in einer Zeile zu breit sind, um an diese Zeile zu passen? Normalerweise müssen Sie sich keine Gedanken über diese Möglichkeit machen. Bei aktivierter Option An Spalten ausrichten werden diese drei Eigenschaften automatisch so angepasst, dass alle Inhalte perfekt ohne Überlauf in die Zeilen passen.
Bei deaktiviertem An Spalten ausrichten oder einer formelbasierten Width-Eigenschaft auf einer oder mehreren Ihrer Karten kann es hingegen zu einem Zeilenüberlauf kommen. In diesem Fall erfolgt ein automatischer Umbruch der Zeilen, wobei effektiv eine neue Zeile erstellt wird. Ändern wir beispielsweise manuell die Width-Eigenschaft unserer Kundenauftragsreferenzkarte (erste Zeile, drittes Element) auf 500:
Die drei Karten in der obersten Zeile passen nicht mehr horizontal, und es wurde eine weitere Zeile erstellt, um den Überlauf umzuschließen. Die Y-Koordinate für alle diese Karten ist bei 0 immer noch identisch, und die Karten "Name" und "Beschreibung" weisen weiterhin einen Y von 1 auf. Karten mit unterschiedlichen Y-Werten werden nicht über Zeilen hinweg zusammengeführt.
Sie können dieses Verhalten verwenden, um ein vollständig dynamisches Layout zu erstellen, in dem Karten basierend auf einer Z-Reihenfolge platziert werden und so viel wie möglich ausgefüllt werden, bevor Sie zur nächsten Zeile wechseln. Um diesen Effekt zu erzielen, geben Sie allen Karten den gleichen Y-Wert , und verwenden Sie X für die Reihenfolge der Karten.
Füllen von Leerbereichen: WidthFit
Durch den Überlauf im letzten Beispiel wurde ein Leerbereich hinter der Karte Order status (Bestellstatus) erzeugt, die die zweite Karte in der ersten Zeile darstellte. Wir konnten die Width-Eigenschaften der beiden verbleibenden Karten manuell anpassen, um diesen Platz zu füllen, aber dieser Ansatz ist mühsam.
Verwenden Sie alternativ die WidthFit-Eigenschaft . Wenn diese Eigenschaft für eine oder mehrere Karten in einer Zeile auf "true " festgelegt ist, wird jeder verbleibende Platz in der Zeile gleichmäßig zwischen ihnen geteilt. Dieses Verhalten ist der Grund, warum wir bereits erwähnt haben, dass die Width-Eigenschaft einer Karte ein Minimum ist und was gesehen wird, breiter sein kann. Diese Eigenschaft bewirkt nie, dass eine Karte schmaler wird, sondern stets nur ihre Verbreiterung.
Wenn "WidthFit" auf der Statuskarte "Order" auf "True" festgelegt wird, füllt sie den verfügbaren Platz aus, während die erste Karte unverändert bleibt:
Wenn wir "WidthFit" auch auf der Bestelldatumskarte auf "True" festlegen, teilen beide Karten den verfügbaren Platz gleichmäßig auf:
Beachten Sie, dass Ziehpunkte auf diesen Karten die von WidthFit bereitgestellte zusätzliche Breite und nicht die von der Width-Eigenschaft bereitgestellte Mindestbreite berücksichtigen. Es kann verwirrend sein, die Width-Eigenschaft zu bearbeiten, während WidthFit aktiviert ist; Sie können es deaktivieren, Änderungen an der Breite vornehmen und dann wieder aktivieren.
Wann kann WidthFit nützlich sein? Wenn Sie über ein Feld verfügen, das nur in bestimmten Situationen verwendet wird, können Sie dessen Visible-Eigenschaft auf "false" festlegen, und die anderen Karten in der Zeile füllen den Platz automatisch um sie herum. Möglicherweise möchten Sie eine Formel verwenden, die ein Feld nur anzeigt, wenn ein anderes Feld einen bestimmten Wert aufweist.
Hier legen wir die Visible-Eigenschaft des Felds "Bestellstatus " auf einen statischen False fest:
Nachdem die zweite Karte effektiv entfernt wurde, kann die dritte Karte nun zur gleichen Zeile wie die erste Karte zurückkehren. Für die erste Karte ist " WidthFit" weiterhin auf "true" festgelegt, sodass sie allein erweitert wird, um den verfügbaren Platz auszufüllen.
Da der Status "Bestellung " nicht sichtbar ist, können Sie ihn nicht so einfach auf der Canvas auswählen. Sie können jedoch jedes steuerelement, sichtbar oder nicht, in der hierarchischen Liste der Steuerelemente auf der linken Seite des Bildschirms auswählen.
Höhe
Die Height-Eigenschaft steuert die Höhe jeder Karte. Karten haben das Äquivalent von WidthFit für Height, und es ist immer auf "true" festgelegt. Sie können davon ausgehen, dass eine HeightFit-Eigenschaft vorhanden ist. Suchen Sie jedoch nicht danach im Produkt, da eine derartige Eigenschaft noch nicht offengelegt ist.
Sie können dieses Verhalten nicht deaktivieren, sodass es schwierig sein kann, die Höhe von Karten zu ändern. Alle Karten in einer Zeile scheinen die gleiche Höhe wie die höchste Karte zu haben. Möglicherweise sehen Sie sich eine Zeile wie folgt an:
Welche Karte macht die Zeile größer? In der vorherigen Abbildung ist die Karte Total amount (Gesamtbetrag) ausgewählt, die hoch erscheint, aber ihre Height-Eigenschaft ist auf 80 festgelegt (was identisch mit der Höhe der ersten Zeile ist). Um die Höhe einer Zeile zu verringern, müssen Sie die Höhe der höchsten Karte in dieser Zeile verringern, und Sie können die höchste Karte nicht identifizieren, ohne die Height-Eigenschaft jeder Karte zu überprüfen.
AutoHeight
Eine Karte ist möglicherweise auch höher als erwartet, wenn sie ein Steuerelement enthält, für das die AutoHeight-Eigenschaft auf "true" festgelegt ist. Beispielsweise enthalten viele Karten eine Beschriftung, die eine Fehlermeldung anzeigt, wenn der Wert des Felds ein Überprüfungsproblem verursacht.
Ohne anzuzeigenden Text (kein Fehler) wird die Beschriftung auf null Höhe reduziert. Wenn Sie nicht besser wussten, würden Sie nicht wissen, dass es dort war, und das ist so, wie es sein sollte:
Auf der linken Seite des Bildschirms zeigt die Liste der Steuerelemente ErrorMessage1 an, die unser Bezeichnungssteuerelement ist. Wenn Sie eine App aktualisieren, können Sie dieses Steuerelement auswählen, um ihm eine gewisse Höhe zu verleihen und Ziehpunkte anzuzeigen, mit denen Sie das Steuerelement positionieren und skalieren können. Das "A" in einem blauen Feld gibt an, dass das Steuerelement AutoHeight auf "true" festgelegt hat:
Die Text-Eigenschaft dieses Steuerelements ist auf "Parent.Error" festgelegt, das verwendet wird, um dynamische Fehlerinformationen basierend auf Überprüfungsregeln abzurufen. Zur Veranschaulichung legen wir die Text-Eigenschaft dieses Steuerelements statisch fest, wodurch die Höhe (und durch Erweiterung die Höhe der Karte) erhöht wird, um die Länge des Texts zu berücksichtigen:
Lassen Sie uns die Fehlermeldung etwas länger machen, und wieder wachsen das Steuerelement und die Karte, um Platz zu schaffen. Die Zeile wächst insgesamt in der Höhe, wobei die vertikale Ausrichtung zwischen den Karten beibehalten wird:
