Screen Header With Search Box & Icons 09-21-2022 10:30 AM

[SpoTechGeek]

Header with Search text box and screen/app title label.

Common editing and navigation icons. Most colors are editable. Icons such as Add New, Save, Delete, Back, etc. You can show/hide most controls and use behavior properties such as OnSelect.

Brief explanations on usage are in the comments of properties.

• New version adds an Optional icon where you can define the image and be able to change the image in the app on the fly.
• You can now add labels below the icons and the hover text will match the labels. See sample code in comments.

[Juilan]

This looks to be a sleek menu system. Do you have an example please that I can look at? I can see the explanations in the properties, but am too new to PowerApps to fully understand what to do. Thanks

[SpoTechGeek]

Hi @Juilan 

To use the search box, add a gallery and set the Items property to the below
Use various search/filter strategies. the "in" might create delegation issues on large data sets. try "=" or StartsWith, etc.

Filter(
       CustomGallerySample, //Your data source name
       HeaderWSearchIcons_1.SearchValue in SampleHeading Or
       HeaderWSearchIcons_1.SearchValue in SampleText
)

To dynamically hide icons, you could create context variables on the OnSelect properties. For example, say you want to show the Cancel icon only when the Edit icon is selected -

• On the EditOnSelect property of the component create a context variable:

UpdateContext({locIsEditSelected: !locIsEditSelected})​

• Set the Cancel icon's Visible property to locIsEditSelected

[SpoTechGeek]

Hi @Juilan 

To use the search box, add a gallery and set the Items property to the below
Use various search/filter strategies. the "in" might create delegation issues on large data sets. try "=" or StartsWith, etc.

Filter(
       CustomGallerySample, //Your data source name
       HeaderWSearchIcons_1.SearchValue in SampleHeading Or
       HeaderWSearchIcons_1.SearchValue in SampleText
)

To dynamically hide icons, you could create context variables on the OnSelect properties. For example, say you want to show the Cancel icon only when the Edit icon is selected -

1. On the EditOnSelect property of the component create a context variable:

UpdateContext({locIsEditSelected: !locIsEditSelected})​

• Set the Cancel icon's Visible property to locIsEditSelected