Skip to main content

Notifications

Screen Header with Search Box and Icons

SpoTechGeek Profile Picture Posted 20 May 2024 by SpoTechGeek 32

ScreenHeaderWithIcons.png

 

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

 

HeaderWithIconsProps1.pngHeaderWithIconsProps2.pngHeaderWithIconsProps3.png

 

 

Get latest version on GitHub!

Categories:

Comments

  • SpoTechGeek Profile Picture SpoTechGeek 32
    Posted 18 May 2023 at 13:47:35
    Screen Header with Search Box and Icons V2

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

  • saumya Profile Picture saumya
    Posted 18 May 2023 at 12:51:30
    Screen Header with Search Box and Icons V2

    Hi,

    How I can change the screenName and make it dynamic?

    saumya_0-1684414282099.png

     

  • SpoTechGeek Profile Picture SpoTechGeek 32
    Posted 16 Feb 2023 at 01:10:50
    Screen Header With Search Box & Icons

    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
  • SpoTechGeek Profile Picture SpoTechGeek 32
    Posted 21 Sep 2022 at 17:30:59
    Screen Header With Search Box & Icons

    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
  • Juilan Profile Picture Juilan
    Posted 21 Sep 2022 at 15:46:26
    Screen Header With Search Box & Icons

    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