Skip to main content

Notifications

Community site session details

Community site session details

Session Id : 4WGQiAZVTLg17kjHYec8u0
Power Apps - Building Power Apps
Answered

What are the main building blocks of a modern Filter Feature in Power Apps?

Like (0) ShareShare
ReportReport
Posted on 3 Nov 2024 17:28:35 by 35
What are the main building blocks of a modern Filter Feature in Power Apps? 
This is both a question and a thread for people who want to both learn and also build a modern filter feature in Power Apps.
I know some of the building blocks and will like to learn from what others have done in the community. 
Do you use components or containerized like I'm doing in this thread? 

1. I start by building Formulas under App, in this case the menu icons. The other formulas are for a side navigation menu component.
 
MenuItems = Table(
{
Id: 1,
Name: "Dashboard",
Icon: MenuIcons.Dashboard,
Screen: Screen_DashBoard
},
{
Id: 2,
Name: "Projects",
Icon: MenuIcons.Projects,
Screen: Screen_Projects
},
{
Id: 3,
Name: "Tasks",
Icon: MenuIcons.Tasks,
Screen: Screen_Tasks
},
{
Id: 4,
Name: "Issues",
Icon: MenuIcons.Issues,
Screen: Screen_Issues
},
{
Id: 5,
Name: "Schedule",
Icon: MenuIcons.Schedule,
Screen: Screen_Schedule
},
{
Id: 6,
Name: "Gnatt Chart",
Icon: MenuIcons.GnattChart,
Screen: Screen_GnattChart
}
);
MenuIcons = {
Dashboard: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'><path fill='currentColor' d='M7.5 1.018V8a.5.5 0 0 0 .5.5h2.677A2 2 0 0 0 10 10v.268A2 2 0 0 0 7 12v2.93a7.001 7.001 0 0 1 .5-13.912m6.855 5.089q.175-.06.361-.087A7.005 7.005 0 0 0 8.5 1.018V7.5h4.563a2 2 0 0 1 1.291-1.393m.322.946A1 1 0 0 0 14 8v7a1 1 0 1 0 2 0V8a1 1 0 0 0-1.323-.947M12 9a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1m-3 2a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0v-3a1 1 0 0 1 1-1'/></svg>
",
Projects: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='currentColor' d='M4 4.25A2.25 2.25 0 0 1 6.25 2h7.5A2.25 2.25 0 0 1 16 4.25V9.5h1.75A2.25 2.25 0 0 1 20 11.75v1.3a2.5 2.5 0 0 0-1.617 1.119A3.001 3.001 0 0 0 12.5 15c0 .805.317 1.536.833 2.075A3 3 0 0 0 11 20c0 .664.148 1.366.506 2H4.75a.75.75 0 0 1-.75-.75zM8 7.5a1 1 0 1 0 0-2a1 1 0 0 0 0 2m-1 6a1 1 0 1 0 2 0a1 1 0 0 0-2 0M7 10a1 1 0 1 0 2 0a1 1 0 0 0-2 0m4-3.5a1 1 0 1 0 2 0a1 1 0 0 0-2 0m0 3.5a1 1 0 1 0 2 0a1 1 0 0 0-2 0m4.5 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4m0 6c2.567 0 3.5-1.52 3.5-3a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2c0 1.48.933 3 3.5 3m4.007-1.022q.234.021.493.022c2.2 0 3-1.216 3-2.4a1.6 1.6 0 0 0-1.6-1.6h-2.164c.475.53.764 1.232.764 2c0 .656-.144 1.35-.493 1.978M22 15.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0'/></svg>",
Tasks: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='currentColor' d='M21.707 3.293a1 1 0 0 0-1.414 0L19 4.586l-.293-.293a1 1 0 1 0-1.414 1.414l1 1a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0 0-1.414M14.004 17H3l-.117.007A1 1 0 0 0 3 19h11.004l.117-.007A1 1 0 0 0 14.003 17m0-6H3l-.117.007A1 1 0 0 0 3 13h11.004l.117-.007A1 1 0 0 0 14.003 11m0-6H3l-.117.007A1 1 0 0 0 3 7h11.004l.117-.007A1 1 0 0 0 14.003 5m7.703 11.293a1 1 0 0 0-1.414 0L19 17.586l-.293-.293a1 1 0 0 0-1.414 1.414l1 1a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0 0-1.414m-1.414-6.5a1 1 0 1 1 1.414 1.414l-2 2a1 1 0 0 1-1.414 0l-1-1a1 1 0 0 1 1.414-1.414l.293.293z'/></svg>",
Issues: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 1024 1024'><path fill='currentColor' d='M464 688a48 48 0 1 0 96 0a48 48 0 1 0-96 0m72-112c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8zm400-188h-59.3c-2.6 0-5 1.2-6.5 3.3L763.7 538.1l-49.9-68.8a7.92 7.92 0 0 0-6.5-3.3H648c-6.5 0-10.3 7.4-6.5 12.7l109.2 150.7a16.1 16.1 0 0 0 26 0l165.8-228.7c3.8-5.3 0-12.7-6.5-12.7m-44 306h-64.2c-5.5 0-10.6 2.9-13.6 7.5a352.2 352.2 0 0 1-49.8 62.2A355.9 355.9 0 0 1 651.1 840a355 355 0 0 1-138.7 27.9c-48.1 0-94.8-9.4-138.7-27.9a355.9 355.9 0 0 1-113.3-76.3A353.1 353.1 0 0 1 184 650.5c-18.6-43.8-28-90.5-28-138.5s9.4-94.7 28-138.5c17.9-42.4 43.6-80.5 76.4-113.2s70.9-58.4 113.3-76.3a355 355 0 0 1 138.7-27.9c48.1 0 94.8 9.4 138.7 27.9c42.4 17.9 80.5 43.6 113.3 76.3c19 19 35.6 39.8 49.8 62.2c2.9 4.7 8.1 7.5 13.6 7.5H892c6 0 9.8-6.3 7.2-11.6C828.8 178.5 684.7 82 517.7 80C278.9 77.2 80.5 272.5 80 511.2C79.5 750.1 273.3 944 512.4 944c169.2 0 315.6-97 386.7-238.4A8 8 0 0 0 892 694'/></svg>",
Schedule: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><g fill='none' stroke='currentColor'><circle cx='19' cy='5' r='2.5' stroke-width='1.5'/><path stroke-linecap='round' stroke-width='1.5' d='M21.25 10v5.25a6 6 0 0 1-6 6h-6.5a6 6 0 0 1-6-6v-6.5a6 6 0 0 1 6-6H14'/><path stroke-linecap='round' stroke-width='1.6' d='M8.276 16.036v-4.388m3.83 4.388V8.769m3.618 7.267v-5.51'/></g></svg>",
GnattChart: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 20 20'><path fill='currentColor' d='M4.5 7a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zM9 9.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5m3.5 1.5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm-8-7A2.5 2.5 0 0 0 2 6.5v7A2.5 2.5 0 0 0 4.5 16h11a2.5 2.5 0 0 0 2.5-2.5v-7A2.5 2.5 0 0 0 15.5 4zM3 6.5A1.5 1.5 0 0 1 4.5 5H7v1h1V5h4v3h1V5h2.5A1.5 1.5 0 0 1 17 6.5v7a1.5 1.5 0 0 1-1.5 1.5H13v-2h-1v2H8V9H7v6H4.5A1.5 1.5 0 0 1 3 13.5z'/></svg>"
};
CustomIcons = {
Search: "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 48 48'><g fill='#616161'><path d='m29.175 31.99l2.828-2.827l12.019 12.019l-2.828 2.827z'/><circle cx='20' cy='20' r='16'/></g><path fill='#37474f' d='m32.45 35.34l2.827-2.828l8.696 8.696l-2.828 2.828z'/><circle cx='20' cy='20' r='13' fill='#64b5f6'/><path fill='#bbdefb' d='M26.9 14.2c-1.7-2-4.2-3.2-6.9-3.2s-5.2 1.2-6.9 3.2c-.4.4-.3 1.1.1 1.4c.4.4 1.1.3 1.4-.1C16 13.9 17.9 13 20 13s4 .9 5.4 2.5c.2.2.5.4.8.4c.2 0 .5-.1.6-.2c.4-.4.4-1.1.1-1.5'/></svg>",
FilterbyStatus: "
<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.18 20.274L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v3m0 4l2 2l4-4'/></svg>",
FilterbyPriority: "
<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.713 19.762L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1m1 9l5-5m0 4.5V17h-4.5'/></svg>",
FilterbyPM:"<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'><path fill='currentColor' d='m17 21l1.8 1.77c.5.5 1.2.1 1.2-.49V18l2.8-3.4A1 1 0 0 0 22 13h-7c-.8 0-1.3 1-.8 1.6L17 18zm-2-1H2v-3c0-2.7 5.3-4 8-4c.6 0 1.3.1 2.1.2c-.2.6-.1 1.3.1 1.9c-.7-.1-1.5-.2-2.2-.2c-3 0-6.1 1.5-6.1 2.1v1.1h10.6l.5.6zM10 4C7.8 4 6 5.8 6 8s1.8 4 4 4s4-1.8 4-4s-1.8-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2'/></svg>"
};
MyTheme = {
DarkColor: "#3f768c",
LightColor: "#d5ecf5"
};
CompanyName = "Company Name";
CompanyLogo = 'PMLogo';
 
 
2. Building the containers as below. You can copy and paste as code into a parent container to have the same filter feature design.
Then all you need to do is change your gallery filters to match the names of the various filter controls.
 
- MainFilter_Container:
    Control: GroupContainer
    Variant: horizontalAutoLayoutContainer
    Properties:
      FillPortions: =0
      LayoutAlignItems: =LayoutAlignItems.Stretch
      LayoutDirection: =LayoutDirection.Vertical
      LayoutMinHeight: =0
      LayoutMinWidth: =200
      LayoutMode: =LayoutMode.Auto
      LayoutOverflowY: =LayoutOverflow.Scroll
      Visible: =varFilterOpen
      Width: =200
    Children:
    - Container_FilterSectionTitle:
        Control: GroupContainer
        Variant: horizontalAutoLayoutContainer
        Properties:
          AlignInContainer: =AlignInContainer.SetByContainer
          DropShadow: =DropShadow.None
          Fill: =RGBA(255, 255, 255, 1)
          FillPortions: =0
          Height: =50
          LayoutAlignItems: =LayoutAlignItems.Stretch
          LayoutMinWidth: =200
          LayoutMode: =LayoutMode.Auto
          PaddingLeft: =10
          PaddingRight: =10
        Children:
        - Lbl_Filters:
            Control: Label
            Properties:
              Text: ="Filters"
              FillPortions: =1
              Font: =Font.Lato
              FontWeight: =FontWeight.Semibold
              Height: =0
              LayoutMinWidth: =100
              Size: =10
        - Btn_ClearAll:
            Control: Button
            Properties:
              OnSelect: |-
                =Concurrent(
                Reset(TxtInputSearch),
                Reset(cmbStatus),
                Reset(cmbPriority)
                )
              Appearance: ='ButtonCanvas.Appearance'.Transparent
              FontSize: =12
              Text: ="Clear All"
              FillPortions: =1
              Height: =0
              LayoutMinWidth: =70
              Width: =0
    - Container_AllFilters:
        Control: GroupContainer
        Variant: verticalAutoLayoutContainer
        Properties:
          AlignInContainer: =AlignInContainer.SetByContainer
          DropShadow: =DropShadow.None
          Fill: =RGBA(244, 244, 244, 1)
          LayoutDirection: =LayoutDirection.Vertical
          LayoutMinHeight: =600
          LayoutMinWidth: =200
          LayoutMode: =LayoutMode.Auto
          RadiusBottomLeft: =0
          RadiusBottomRight: =0
          RadiusTopLeft: =0
          RadiusTopRight: =0
        Children:
        - SearchControlFilters:
            Control: GroupContainer
            Variant: verticalAutoLayoutContainer
            Properties:
              DropShadow: =DropShadow.None
              FillPortions: =0
              Height: =90
              LayoutDirection: =LayoutDirection.Vertical
              LayoutMinWidth: =200
              LayoutMode: =LayoutMode.Auto
              PaddingBottom: =5
              PaddingLeft: =5
              PaddingRight: =5
              PaddingTop: =5
              RadiusBottomLeft: =0
              RadiusBottomRight: =0
              RadiusTopLeft: =0
              RadiusTopRight: =0
            Children:
            - Container9:
                Control: GroupContainer
                Variant: horizontalAutoLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =40
                  LayoutMinWidth: =200
                  LayoutMode: =LayoutMode.Auto
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Img_Search:
                    Control: Image
                    Properties:
                      Image: ="data:image/svg+xml;utf8,"&EncodeUrl(Substitute(CustomIcons.Search,"",""))
                      AlignInContainer: =AlignInContainer.Stretch
                      LayoutMinHeight: =30
                      PaddingBottom: =7
                      PaddingTop: =7
                      Width: =30
                - Lbl_Search:
                    Control: Label
                    Properties:
                      Text: ="Search"
                      AlignInContainer: =AlignInContainer.Stretch
                      FillPortions: =1
                      Font: =Font.Lato
                      FontWeight: =FontWeight.Semibold
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =0
                      Size: =9
                      Width: =0
                - Btn_ClearSearchBox:
                    Control: Button
                    Properties:
                      OnSelect: =Reset(TxtInputSearch)
                      Appearance: ='ButtonCanvas.Appearance'.Transparent
                      FontSize: =12
                      Text: ="Clear"
                      AlignInContainer: =AlignInContainer.Stretch
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =50
                      Width: =50
            - SearchBoxContainer10:
                Control: GroupContainer
                Variant: manualLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =35
                  LayoutMinHeight: =35
                  LayoutMinWidth: =0
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - TxtInputSearch:
                    Control: Classic/TextInput
                    Properties:
                      Default: =""
                      HintText: ="Search..."
                      BorderThickness: =0
                      Height: =28
                      HoverBorderColor: =Self.Fill
                      PaddingLeft: =20
                      PressedBorderColor: =RGBA(116, 116, 116, 1)
                      RadiusBottomLeft: =10
                      RadiusBottomRight: =10
                      RadiusTopLeft: =10
                      RadiusTopRight: =10
                      Size: =10
                      Width: =Parent.Width
                      Y: =4
                - IcoSearch:
                    Control: Classic/Icon
                    Variant: Search
                    Properties:
                      Color: =RGBA(116, 116, 116, 1)
                      Height: =15
                      Icon: =Icon.Search
                      PaddingRight: =0.00
                      PaddingTop: =0.00
                      Width: =15
                      X: =4
                      Y: =SearchBoxContainer10.Height/2-Self.Height/2
        - Container_FilterbyStatusMain:
            Control: GroupContainer
            Variant: verticalAutoLayoutContainer
            Properties:
              DropShadow: =DropShadow.None
              FillPortions: =0
              Height: =90
              LayoutDirection: =LayoutDirection.Vertical
              LayoutMinWidth: =200
              LayoutMode: =LayoutMode.Auto
              PaddingBottom: =5
              PaddingLeft: =5
              PaddingRight: =5
              PaddingTop: =5
              RadiusBottomLeft: =0
              RadiusBottomRight: =0
              RadiusTopLeft: =0
              RadiusTopRight: =0
            Children:
            - FilterByStatusTitleContainer:
                Control: GroupContainer
                Variant: horizontalAutoLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =40
                  LayoutMinWidth: =200
                  LayoutMode: =LayoutMode.Auto
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Img_FilterbyStatus:
                    Control: Image
                    Properties:
                      Image: ="data:image/svg+xml;utf8,"&EncodeUrl(Substitute(CustomIcons.FilterbyStatus,"",""))
                      AlignInContainer: =AlignInContainer.Stretch
                      LayoutMinHeight: =30
                      PaddingBottom: =7
                      PaddingTop: =7
                      Width: =30
                - Lbl_FilterbyStatus:
                    Control: Label
                    Properties:
                      Text: ="Filter by Status"
                      AlignInContainer: =AlignInContainer.Stretch
                      FillPortions: =1
                      Font: =Font.Lato
                      FontWeight: =FontWeight.Semibold
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =0
                      Size: =9
                - Btn_ClearFilterbyStatus:
                    Control: Button
                    Properties:
                      OnSelect: =Reset(cmbStatus)
                      Appearance: ='ButtonCanvas.Appearance'.Transparent
                      FontSize: =12
                      Text: ="Clear"
                      AlignInContainer: =AlignInContainer.Stretch
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =50
                      Width: =50
            - FilterByStatusContainer:
                Control: GroupContainer
                Variant: manualLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =35
                  LayoutMinHeight: =35
                  LayoutMinWidth: =0
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Container_EdgeRounder:
                    Control: GroupContainer
                    Variant: manualLayoutContainer
                    Properties:
                      BorderColor: =RGBA(116, 116, 116, 0.1)
                      BorderThickness: =1
                      DropShadow: =DropShadow.None
                      Height: =28
                      PaddingRight: =0.00
                      PaddingTop: =0.00
                      RadiusBottomLeft: =12
                      RadiusBottomRight: =12
                      RadiusTopLeft: =12
                      RadiusTopRight: =12
                      Width: =180
                      X: =6
                    Children:
                    - cmbStatus:
                        Control: Classic/ComboBox
                        Properties:
                          DisplayFields: =["Value"]
                          InputTextPlaceholder: ="Select Status"
                          IsSearchable: =false
                          Items: =["New", "In-Progress", "Pending", "Completed"]
                          SearchFields: =["Value"]
                          SelectMultiple: =false
                          BorderStyle: =BorderStyle.None
                          BorderThickness: =0
                          ChevronBackground: =RGBA(237, 237, 237, 237)
                          ChevronHoverBackground: =RGBA(237, 237, 237, 237)
                          Height: =Parent.Height
                          HoverBorderColor: =ColorFade(RGBA(237, 237, 237, 237), 15%)
                          PaddingRight: =4.34
                          PaddingTop: =4.34
                          PressedFill: =RGBA(237, 237, 237, 237)
                          Size: =10
                          Width: =Parent.Width
                          X: =0.00
        - Container_FilterbyPriorityMain:
            Control: GroupContainer
            Variant: verticalAutoLayoutContainer
            Properties:
              DropShadow: =DropShadow.None
              FillPortions: =0
              Height: =90
              LayoutDirection: =LayoutDirection.Vertical
              LayoutMinWidth: =200
              LayoutMode: =LayoutMode.Auto
              PaddingBottom: =5
              PaddingLeft: =5
              PaddingRight: =5
              PaddingTop: =5
              RadiusBottomLeft: =0
              RadiusBottomRight: =0
              RadiusTopLeft: =0
              RadiusTopRight: =0
            Children:
            - FilterByPriorityTitleContainer:
                Control: GroupContainer
                Variant: horizontalAutoLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =40
                  LayoutAlignItems: =LayoutAlignItems.Stretch
                  LayoutMinWidth: =200
                  LayoutMode: =LayoutMode.Auto
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Img_FilterbyPriority:
                    Control: Image
                    Properties:
                      Image: ="data:image/svg+xml;utf8,"&EncodeUrl(Substitute(CustomIcons.FilterbyPriority,"",""))
                      LayoutMinHeight: =30
                      PaddingBottom: =7
                      PaddingTop: =7
                      Width: =30
                - Lbl_FilterbyPriority:
                    Control: Label
                    Properties:
                      Text: ="Filter by Priority"
                      FillPortions: =1
                      Font: =Font.Lato
                      FontWeight: =FontWeight.Semibold
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =0
                      Size: =9
                - Btn_ClearPriority:
                    Control: Button
                    Properties:
                      OnSelect: =Reset(cmbPriority)
                      Appearance: ='ButtonCanvas.Appearance'.Transparent
                      FontSize: =12
                      Text: ="Clear"
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =50
                      Width: =50
            - FilterByPriorityContainer:
                Control: GroupContainer
                Variant: manualLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =35
                  LayoutMinHeight: =35
                  LayoutMinWidth: =0
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Container_EdgeRounder_1:
                    Control: GroupContainer
                    Variant: manualLayoutContainer
                    Properties:
                      BorderColor: =RGBA(116, 116, 116, 0.1)
                      BorderThickness: =1
                      DropShadow: =DropShadow.None
                      Height: =28
                      PaddingRight: =0.00
                      PaddingTop: =0.00
                      RadiusBottomLeft: =12
                      RadiusBottomRight: =12
                      RadiusTopLeft: =12
                      RadiusTopRight: =12
                      Width: =180
                      X: =6
                    Children:
                    - cmbPriority:
                        Control: Classic/ComboBox
                        Properties:
                          DisplayFields: =["Value"]
                          InputTextPlaceholder: ="Select Status"
                          IsSearchable: =false
                          Items: =["Low", "Medium", "High", "Critical"]
                          SearchFields: =["Value"]
                          SelectMultiple: =false
                          BorderStyle: =BorderStyle.None
                          BorderThickness: =0
                          ChevronBackground: =RGBA(237, 237, 237, 237)
                          ChevronHoverBackground: =RGBA(237, 237, 237, 237)
                          Height: =Parent.Height
                          HoverBorderColor: =ColorFade(RGBA(237, 237, 237, 237), 15%)
                          PaddingRight: =4.34
                          PaddingTop: =4.34
                          PressedFill: =RGBA(237, 237, 237, 237)
                          Size: =10
                          Width: =Parent.Width
                          X: =0.00
        - Container_FilterbyPriorityMain_1:
            Control: GroupContainer
            Variant: verticalAutoLayoutContainer
            Properties:
              DropShadow: =DropShadow.None
              FillPortions: =0
              Height: =90
              LayoutDirection: =LayoutDirection.Vertical
              LayoutMinWidth: =200
              LayoutMode: =LayoutMode.Auto
              PaddingBottom: =5
              PaddingLeft: =5
              PaddingRight: =5
              PaddingTop: =5
              RadiusBottomLeft: =0
              RadiusBottomRight: =0
              RadiusTopLeft: =0
              RadiusTopRight: =0
            Children:
            - FilterByPriorityTitleContainer_1:
                Control: GroupContainer
                Variant: horizontalAutoLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =40
                  LayoutAlignItems: =LayoutAlignItems.Stretch
                  LayoutMinWidth: =200
                  LayoutMode: =LayoutMode.Auto
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Img_FilterbyPriority_1:
                    Control: Image
                    Properties:
                      Image: ="data:image/svg+xml;utf8,"&EncodeUrl(Substitute(CustomIcons.FilterbyPM,"",""))
                      LayoutMinHeight: =30
                      PaddingBottom: =5.5
                      PaddingTop: =5.5
                      Width: =30
                - Lbl_FilterbyPriority_1:
                    Control: Label
                    Properties:
                      Text: ="Filter by PM"
                      FillPortions: =1
                      Font: =Font.Lato
                      FontWeight: =FontWeight.Semibold
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =0
                      Size: =9
                - Btn_ClearPriority_1:
                    Control: Button
                    Properties:
                      OnSelect: =Reset(cmbFilterbyPM)
                      Appearance: ='ButtonCanvas.Appearance'.Transparent
                      FontSize: =12
                      Text: ="Clear"
                      Height: =0
                      LayoutMinHeight: =30
                      LayoutMinWidth: =50
                      Width: =50
            - FilterByPriorityContainer_1:
                Control: GroupContainer
                Variant: manualLayoutContainer
                Properties:
                  DropShadow: =DropShadow.None
                  FillPortions: =0
                  Height: =35
                  LayoutMinHeight: =35
                  LayoutMinWidth: =0
                  PaddingBottom: =5
                  PaddingLeft: =5
                  PaddingRight: =5
                  PaddingTop: =5
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                - Container_EdgeRounder_2:
                    Control: GroupContainer
                    Variant: manualLayoutContainer
                    Properties:
                      BorderColor: =RGBA(116, 116, 116, 0.1)
                      BorderThickness: =1
                      DropShadow: =DropShadow.None
                      Height: =28
                      PaddingRight: =0.00
                      PaddingTop: =0.00
                      RadiusBottomLeft: =12
                      RadiusBottomRight: =12
                      RadiusTopLeft: =12
                      RadiusTopRight: =12
                      Width: =180
                      X: =6
                    Children:
                    - cmbFilterbyPM:
                        Control: Classic/ComboBox
                        Properties:
                          DisplayFields: =["DisplayName","Mail"]
                          InputTextPlaceholder: ="Select Status"
                          Items: =Office365Users.SearchUserV2({searchTerm:Trim(cmbFilterbyPM.SearchText)}).value
                          SearchFields: =["DisplayName","Mail"]
                          SelectMultiple: =false
                          BorderStyle: =BorderStyle.None
                          BorderThickness: =0
                          ChevronBackground: =RGBA(237, 237, 237, 237)
                          ChevronHoverBackground: =RGBA(237, 237, 237, 237)
                          Height: =Parent.Height
                          HoverBorderColor: =ColorFade(RGBA(237, 237, 237, 237), 15%)
                          PaddingRight: =4.34
                          PaddingTop: =4.34
                          PressedFill: =RGBA(237, 237, 237, 237)
                          Size: =10
                          Width: =Parent.Width
                          X: =0.00

 
Categories:
  • Verified answer
    timl Profile Picture
    34,998 Super User 2025 Season 1 on 04 Nov 2024 at 12:06:23
    What are the main building blocks of a modern Filter Feature in Power Apps?
    Hi MelaninCoded
     
    Thanks for your post and for sharing your code.
     
    In response to the 'question' element of your post, adding your filter controls to containers is perfectly fine, particularly if you want to build UI that works responsively.
     
    If you want to re-use the controls on multiple screens or multiple apps, that would be great use-case scenario for adding the controls to a component.
     
    I would also add that containers and components are not mutually exclusive. You can create a component that includes containers. 
  • mmbr1606 Profile Picture
    12,192 Super User 2025 Season 1 on 04 Nov 2024 at 08:18:21
    What are the main building blocks of a modern Filter Feature in Power Apps?
    i wont suggest using any of the moder controls as of now because they are still in preview.
     
    cheers

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Apps - Building Power Apps

#1
MS.Ragavendar Profile Picture

MS.Ragavendar 32

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 19 Super User 2025 Season 1

#3
Rajkumar_M Profile Picture

Rajkumar_M 16 Super User 2025 Season 1

Overall leaderboard
Loading started