How to create a responsive pop-up using traditional 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 traditional containers. The focus will be on the UI and not on how to implement a filter.

Responsive pop-up using traditional containers

Add the following controls to create a responsive pop-up using traditional 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)
   8. OnSelect: UpdateContext({locViewFilter: false})
2. A 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)
3. A label inside the container
   1. Name: lblFilterHeader
   2. X: 20
   3. Y: 20
   4. Width: Parent.Width - Self.X - 20
   5. Height: 40
   6. Text: "Filter - Title"
4. A combo box inside the container
   1. Name: cmbFilter
   2. X: lblFilterHeader.X
   3. Y: lblFilterHeader.Y + lblFilterHeader.Height + 20
   4. Width: lblFilterHeader.Width
   5. Height: 40
   6. Items: as needed
5. A button inside the container
   1. Name: btnApplyFilter
   2. X: Parent.Width - Self.Width - 20
   3. Y: Parent.Height - Self.Height - 20
   4. Width: 160
   5. Height: 40
   6. Text: "Apply"
   7. OnSelect: UpdateContext({locFilter: cmbFilterOptions.Selected.Value, locViewFilter: false})
6. Another button inside the container
   1. Name: btnClearFilter
   2. X: btnApplyFilter.X - Self.Width - 20
   3. Y: btnApplyFilter.Y
   4. Width: 160
   5. Height: 40
   6. Text: "Clear"
   7. OnSelect: Reset(cmbFilterOptions); UpdateContext({locViewFilter: false})
7. Set the Visible property of the container and lblFilterOverlay label to locViewFilter
8. 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:

Recent articles

1. How to create a left aligned gallery
2. How to create a center aligned responsive gallery
3. Want to track your fitness goals using an app?