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