Re: Screen Header with Search Box and Icons V2

SpoTechGeek · ‎08-25-2022

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.

Note: The latest update addresses the "One or more component behavior properties, event or action, have a mismatched return type" error.

New version has generic icons where you can define the image and be able to change the image in the app on the fly in a table (see below).
You can now add labels below the icons and the hover tooltip will match the labels.

Image & Label Table

// Set the icon label text & image
// Use in-app variables for IconImage or IconText if needed
Table(
    {
        IconText: "Menu",
        IconID: "Icon_01",
        IconImage: Icon.Hamburger
    },
    {
        IconText: "Home",
        IconID: "Icon_02",
        IconImage: Icon.Home
    },
    {
        IconText: "Back",
        IconID: "Icon_03",
        IconImage: Icon.BackArrow
    },
    {
        IconText: "New",
        IconID: "Icon_04",
        IconImage: Icon.Add
    },
    {
        IconText: "Edit",
        IconID: "Icon_05",
        IconImage: Icon.Edit
    },
    {
        IconText: "Submit",
        IconID: "Icon_06",
        IconImage: Icon.Save
    },
    {
        IconText: "Delete",
        IconID: "Icon_07",
        IconImage: Icon.Trash
    },
    {
        IconText: "Cancel",
        IconID: "Icon_08",
        IconImage: Icon.CancelBadge
    },
    {
        IconText: "Filter",
        IconID: "Icon_09",
        IconImage: Icon.FilterFlat
    },
    {
        IconText: "Refresh",
        IconID: "Icon_10",
        IconImage: Icon.Reload
    }
)

Custom Properties

Get latest version on GitHub!

Juilan · ‎09-21-2022

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 · ‎09-21-2022

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 · ‎02-15-2023

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

saumya · ‎05-18-2023

Hi,

How I can change the screenName and make it dynamic?

SpoTechGeek · ‎05-18-2023

@saumya Use the "Title Text" property. You can add static or dynamic (variable) text there.