How to create a responsive pop-up using layout containers

Introduction

Responsiveness is a key feature of any app and there are many elements in an app that need to be responsive e.g. a pop-up. One of the sample apps I created for Microsoft Teams is Profile+ (code can be found here). It is an app that shows organization structure for a selected user and also shows the list of team members in a team. We will use the filter section of the team members view to illustrate how to build a responsive pop-up using layout containers. The focus will be on the UI and not on how to implement a filter.

PS: I prefer traditional containers over layout containers 9 out of 10 times. There is something very satisfying about writing mathematical expressions for the different properties for various controls. However, I wanted to illustrate that if you are not a fan of writing mathematical expressions, here is an alternate way of doing it.

Responsive pop-up using layout containers

Add the following controls to create a responsive pop-up using layout containers

1. A label
   1. Name: lblFilterOverlay
   2. X: 0
   3. Y: 0
   4. Width: Parent.Width
   5. Height: Parent.Height
   6. Text: ""
   7. Fill: RGBA(0, 0, 0, 0.4)
2. A vertical layout container
   1. Name: conFilter
   2. X: (Parent.Width - Self.Width) / 2
   3. Y: (Parent.Height - Self.Height) / 2
   4. Width: Min(600, Parent.Width - 40)
   5. Height: 200
   6. Fill: RGBA(255, 255, 255, 1)
   7. Justify (LayoutJustifyContent): LayoutJustifyContent.Start
   8. Align (LayoutAlignItems): LayoutAlignItems.Stretch
   9. PaddingTop: 20
   10. PaddingLeft: 20
   11. PaddingRight: 20
   12. DropShadow: DropShadow.Bold
3. A label inside the vertical container
   1. Name: lblFilterHeader
   2. Text: "Filter - Title"
4. A combo box inside the vertical container
   1. Name: cmbFilter
   2. Items: as needed
5. A horizontal container inside the vertical container
   1. Name: conActionButtons
   2. Justify: LayoutJustifyContent.End
   3. Align: LayoutAlignItems.Start
6. A button inside the horizontal container
   1. Name: btnClearFilter
   2. Text: "Clear"
   3. OnSelect: Reset(cmbFilterOptions); UpdateContext({locViewFilter: false})
7. Another button inside the horizontal container
   1. Name: btnApplyFilter
   2. Text: "Apply"
   3. OnSelect: UpdateContext({locFilter: cmbFilterOptions.Selected.Value, locViewFilter: false})
8. Set the Visible property of the vertical container and lblFilterOverlay label to locViewFilter
9. Add an icon which will be used to display the filter pop-up
   1. Name: icnFilter
   2. Icon: If(IsBlank(cmbFilterOptions.Selected.Value),Icon.FilterFlat, Icon.FilterFlatFilled)
   3. OnSelect: UpdateContext({locViewFilter: true})

Here is a demo:

PS: Notice the drop shadow of the pop-up. Even though I don't like layout containers, I have to say that I love the drop shadow!

Recent articles

1. How to create a responsive pop-up using traditional containers
2. How to create a left aligned gallery
3. How to create a center aligned responsive gallery