Responsive Power Apps mit Layoutcontainern! // Responsive Power Apps with Containers
- kim
- 31. Dez. 2020
- 7 Min. Lesezeit
Aktualisiert: 31. Mai
đĄ Hinweis in eigener Sache
 Du willst Power Apps & Power Automate von Grund auf lernen? In meinem Onlinekurs âLisaâs Challenge â Zeiterfassung mit Power Apps & Automateâ begleite ich dich Schritt fĂŒr Schritt beim Aufbau deiner ersten Business-App.
 đ Jetzt Kurs ansehen
 đ Tipp: Trag dich hier ein und erhalte den Kurs kostenlos! Gilt nur bis 31.08.25!
 đ Kostenlosen Zugang sichern
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:

Comments