Responsive Power Apps mit Layoutcontainern! // Responsive Power Apps with Containers
Vor ein paar Wochen tauchten plötzlich in unserem Microsoft 365 Tenant unter dem Bereich "Layout" neue Steuerelemente auf. Fancy Stuff dachten wir, ist es auch!
Zusätzlich zum klassischen Container Steuerelement gibt es nun Horizontal- und Vertical-Container. Um diese Container zu aktivieren müsst Ihr unter erweiterte Eigenschaften das Vorschaufeature "Layoutcontainer" aktivieren.
Ab dann gehts rund und ihr könnt eure Power Apps deutlich responsiver bauen! Geil!
Die Jungs aus der Power Platform Community haben schon einige Beiträge darüber veröffentlicht, die wir Euch auf jeden Fall empfehlen wollen:
Darüber hinaus zeigen wir Euch in diesem Blog ein Beispiel für die Anwendung von Containern, dass wir diese Woche für einen Kunden gebaut haben.
Der Wunsch war es, vier SharePoint-Listen, die alle in verschiedenen Gallerien dargestellt werden auf einem Bildschirm bearbeiten zu können. Das Ganze sollte möglichst responsive sein und sich auf verschiedene Bildschirmgrößen des Endgerätes anpassen.
So sieht das vorläufige Ergebnis aus:
Die einzelnen Steuerelemente passen sich an die Größe des Browser oder Endgerätes an und sind wunderbar responsive.
Wie haben wir das gebaut?
Wir haben einen horizontalen Container eingefügt. In diesem lassen sich verschiedene Steuerelemente gleichmäßig horizontal anordnen.
Danach können Blocksatz (horizontal) und Ausrichten (vertikal) festgelegt werden. Wir haben die Eigenschaft auf Blocksatz (horizontal) "Anfang" gelassen. Es ist auch möglich, von der rechten Seite oder aus dem Zentrum zu beginnen. Ausrichten (vertikal) bestimmt, ob oben, unten oder mittig im Container die Steuerelemente eingefügt werden. Wir belassen diese Eigenschaft ebenfalls bei "Anfang", also von oben nach unten.
Mit der Eigenschaft "Lücke" legt ihr fest, welcher Abstand zwischen den einzelnen Elementen bestehen soll. Bei 0 werden die Steuerelemente direkt aneinander gereiht. Wir haben uns der Übersichtlichkeit halber für einen Abstand von 15 entschieden.
Die Größe des Containers muss Variabel sein, damit der Container responsive ist. Wir haben die Breite auf App.Width und die Höhe auf Basis der App.Height abzüglich Header und Footer-Steuerelement definiert. Damit passt sich unser Container nun schon an die Bildschirmgröße des Endgerätes an.
In den horizontalen Container fügt ihr jetzt beliebig viele Steuerelemente ein. Wir haben uns für weitere Container, in diesem Fall vertikale Container, entschieden, um untereinander weitere Steuerelemente gleichmäßig und responsive platzieren zu können. In unserem Fall sind es insgesamt fünf vertikale Container. Vier Container erhalten später eine Gallery mit einer SharePoint Liste als Datenquelle. Der letzte Container erhält die einzelnen Formulare zum Hinzufügen und Bearbeiten von Datensätzen aus den vier übrigen
Diesen vertikalen Containern müsst ihr nun eine Mindesthöhe geben und die Eigenschaft "Im Container ausrichten" auf Benutzerdefiniert -> gestreckt setzen. Das sorgt dafür, dass der vertikale Container immer so hoch ist, wie der horizontale, in dem er sich befindet.
Die Eigenschaft "Flexible Breite" setzt ihr auf "Ja", damit alle horizontalen Container die Gleiche Breite besitzen. Mit den Füllabschnitten könnt Ihr festlegen, wie viel Breite einer dieser Container im Verhältnis zu allen Containern erhält. Wenn wir zum Beispiel vier vertikale Container in unseren horizontalen Container einfügen, dann erhält jeder automatisch den Füllabschnitt 1 und erhält somit 1/4 der Breite des übergeordneten Containers (horizontaler Container)
Dann fügen wir in die vertikalen Container jeweils vier Steuerelemente ein. Eine Lable, eine Suchfeld, ein Icon zum hinzufügen von Datensätzen und eine Gallery zur Anzeige von Daten. Bei den ersten drei Steuerelementen legen wir die Eigenschaft "Im Container ausrichten" auf "Nach Container festlegen" und "gestreckt" fest. Damit sind die Steuerelemente automatisch so breit wie der Container. Die Höhe setzen wir auf 40. Bei der Gallery wird die Eigenschaft "flexible Höhe" auf "Ja" gesetzt, damit sich die Höhe je nach Bildschirmgröße anpasst und die Gallery den übrigen Platz komplett ausnutzt.
Als nächstes wollen wir die Daten aus der Gallery bearbeiten können, indem ein Formular zum ausgewählten Datensatz erscheint. Hierfür benötigen wir den fünften vertikalen Containern.
Wir nutzen zur Variabilität die Visible-Eigenschaften der vertikalen Containern. Wenn wir also einen Mitarbeiter auswählen, sollen alle anderen Listen (also die gesamten vertikalen Container) ausgeblendet werden. Dies sorgt dafür, dass sich die Mitarbeiter-Liste aufgrund der Auswahl der flexiblen Breite über den gesamten horizontalen Container streckt. Für die Visible Eigenschaft nutzt ihr eine Kontextvariable, die je nach Auswahl gesetzt wird.
Statt den anderen drei Listen wollen wir jedoch das Formular einsetzen, sodass neben dem ausgewählten vertikalen Container der fünfte sichtbar wird - das Formular. Damit dieses den Platz der anderen drei Formulare einnehmen kann, erhält es 3 Füllabschnitte in den Eigenschaften. So behält die noch anzuzeigende Liste 1/4 der Breite und das Formular die anderen 3/4. Als Füllabschnitt wird nun 3/7 angezeigt, da es mit den anderen 3 Listen nun insgesamt 7 Füllabschnitte gibt. Auf die Breite wirken sich jedoch nur die aus, die visible sind. - Übrigens: Die Liste verschiebt sich durch das Ausblenden vorheriger Listen jeweils ganz nach links, da sie nun immer die erste (vor dem Formular) im horizontalen Container ist.
Nun müsst ihr lediglich die Formulare zu den Datenquellen einfügen, in unserem Fall 4 Stück. Diese erhalten jeweils eine eigene Kontextvariable, welche die Visible-Eigenschaft "true" setzt, sobald die zugehörige Liste ausgewählt wurde. Also hat auch hier jedes Formular einen (von vier) Füllabschnitten. In diesem vertikalen Container ist zudem noch eine Überschrift (inkl. Abbruch-Icon) sowie ein Button zum Speichern der Eingaben eingefügt.
Zum Ende sieht unser Bildschirm wie folgt aus:
Interessantes Zeug zu Containern:
A few weeks ago, new controls suddenly appeared in our Microsoft 365 tenant under the "Layout" section. Fancy stuff we thought, it is!
In addition to the classic container control, there are now horizontal and vertical containers. To activate these containers you have to activate the preview feature "Layoutcontainer" under advanced properties.
From then on you can build your Power Apps much more responsive! Cool!
The guys from the Power Platform community have already published some articles about this, which we definitely want to recommend to you:
In addition, in this blog we'll show you an example of using containers that we built for a client this week.
The request was to be able to edit four SharePoint lists, all displayed in different galleries, on one screen. The whole thing should be as responsive as possible and adapt to different screen sizes of the end device.
This is the preliminary result:
The individual controls adapt to the size of the browser or end device and are wonderfully responsive.
How did we build this?
We inserted a horizontal container. In this, various controls can be arranged evenly horizontally.
Then justification (horizontal) and alignment (vertical) can be set. We have left the property on Justification (horizontal) "Start". It is also possible to start from the right side or from the center. Align (vertical) determines whether controls are inserted at the top, bottom or center of the container. We also leave this property at "Start", i.e. from top to bottom.
With the property "Gap" you determine which distance should exist between the individual elements. At 0, the controls will be placed directly next to each other. For the sake of clarity, we have chosen a gap of 15.
The size of the container must be variable, so that the container is responsive. We defined the width to App.Width and the height based on App.Height minus the header and footer controls. This means that our container now already adapts to the screen size of the end device.
You can now insert as many controls as you like into the horizontal container. We have decided to use additional containers, in this case vertical containers, in order to be able to place additional controls evenly and responsively among each other. In our case, there are a total of five vertical containers. Four containers will later receive a Gallery with a SharePoint list as data source. The last container receives the individual forms for adding and editing records from the four remaining containers.
Now you have to give these vertical containers a minimum height and set the property "Align in container" to Custom -> Stretched. This ensures that the vertical container is always as high as the horizontal one it is in.
Set the property "Flexible width" to "Yes", so that all horizontal containers have the same width. With the fill sections you can define how much width one of these containers gets in relation to all containers. For example, if we insert four vertical containers into our horizontal container, then each one will automatically get the fill section 1 and thus will get 1/4 of the width of the parent container (horizontal container)
Then we insert four controls into each of the vertical containers. A Lable, a Search box, an Icon to add records and a Gallery to display data. For the first three controls, we set the "Align in Container" property to "Set by Container" and "Stretched". This automatically makes the controls as wide as the container. We set the height to 40. For the Gallery, we set the "Flexible Height" property to "Yes" so that the height adjusts according to the screen size and the Gallery completely uses the remaining space.
Next, we want to be able to edit the data from the Gallery by having a form appear for the selected record. For this we need the fifth vertical container.
We use the Visible properties of the vertical containers for variability. So when we select an employee, we want all other lists (i.e. the entire vertical containers) to be hidden. This ensures that the employee list stretches across the entire horizontal container because of the flexible width selection. For the Visible property, you use a context variable that is set depending on the selection.
However, instead of the other three lists, we want to insert the form so that the fifth one becomes visible next to the selected vertical container - the form. In order for it to take the place of the other three forms, it gets 3 fill sections in the properties. So the list that is still to be displayed retains 1/4 of the width and the form retains the other 3/4. 3/7 is now displayed as the fill section because with the other 3 lists there are now a total of 7 fill sections. However, only those that are visible have an effect on the width. - By the way: The list moves by hiding previous lists in each case completely to the left, since it is now always the first (before the form) in the horizontal container.
Now you just have to insert the forms to the data sources, in our case 4 of them. Each of them gets its own context variable, which sets the Visible property "true" as soon as the corresponding list is selected. So also here each form has one (of four) fill sections. In this vertical container there is also a heading (including a cancel icon) and a button to save the input.
In the end, our screen looks like this: