Screen Header with Search Box and Icons
Like
Share
Report
Posted
by
SpoTechGeek
32
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
Comments
-
-
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
-
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
*This post is locked for comments