Tuesday, November 26, 2019

Dynamic Icons

This is pretty simple and is mainly just a place to dump this code for others to use.  If you're wanting to programmatically change icons on your page and populate/change them based upon inputs from "somewhere else", then you'll need a collection of icons that you can perform a LookUp() against.

For example, say you want a generic toolbar to use in all of your apps and to control that based upon some settings you might import from Excel or retrieve from SharePoint.  This would allow you to have a Collection of Icons displayed that would be populated with only what you need.

 



Copy/paste the following into your App | OnStart event:

ClearCollect(
    allIcons,
    {
        iconName: "Add",
        icon: Icon.Add
    },
    {
        iconName: "Cancel",
        icon: Icon.Cancel
    },
    {
        iconName: "Edit",
        icon: Icon.Edit
    },
    {
        iconName: "Check",
        icon: Icon.Check
    },
    {
        iconName: "Search",
        icon: Icon.Search
    },
    {
        iconName: "Filter",
        icon: Icon.Filter
    },
    {
        iconName: "sort",
        icon: Icon.Sort
    },
    {
        iconName: "Reload",
        icon: Icon.Reload
    },
    {
        iconName: "Trash",
        icon: Icon.Trash
    },
    {
        iconName: "Save",
        icon: Icon.Save
    },
    {
        iconName: "Download",
        icon: Icon.Download
    },
    {
        iconName: "Copy",
        icon: Icon.Copy
    },
    {
        iconName: "Like/Dislike",
        icon: Icon.LikeDislike
    },
    {
        iconName: "Crop",
        icon: Icon.Crop
    },
    {
        iconName: "Pin",
        icon: Icon.Pin
    },
    {
        iconName: "Clear drawing",
        icon: Icon.ClearDrawing
    },
    {
        iconName: "Expand view",
        icon: Icon.ExpandView
    },
    {
        iconName: "Collapse view",
        icon: Icon.CollapseView
    },
    {
        iconName: "Draw",
        icon: Icon.Draw
    },
    {
        iconName: "Compose",
        icon: Icon.Compose
    },
    {
        iconName: "Erase",
        icon: Icon.Erase
    },
    {
        iconName: "Message",
        icon: Icon.Message
    },
    {
        iconName: "Post",
        icon: Icon.Post
    },
    {
        iconName: "Add document",
        icon: Icon.AddDocument
    },
    {
        iconName: "Add library",
        icon: Icon.AddLibrary
    },
    {
        iconName: "Home",
        icon: Icon.Home
    },
    {
        iconName: "Hamburger menu",
        icon: Icon.Hamburger
    },
    {
        iconName: "Settings",
        icon: Icon.Settings
    },
    {
        iconName: "More",
        icon: Icon.More
    },
    {
        iconName: "Waffle menu",
        icon: Icon.Waffle
    },
    {
        iconName: "Left",
        icon: Icon.ChevronLeft
    },
    {
        iconName: "Right",
        icon: Icon.ChevronRight
    },
    {
        iconName: "Up",
        icon: Icon.ChevronUp
    },
    {
        iconName: "Download",
        icon: Icon.ChevronDown
    },
    {
        iconName: "Next",
        icon: Icon.NextArrow
    },
    {
        iconName: "Back",
        icon: Icon.BackArrow
    },
    {
        iconName: "Arrow down",
        icon: Icon.ArrowDown
    },
    {
        iconName: "Arrow up",
        icon: Icon.ArrowUp
    },
    {
        iconName: "Arrow left",
        icon: Icon.ArrowLeft
    },
    {
        iconName: "Arrow right",
        icon: Icon.ArrowRight
    },
    {
        iconName: "Camera",
        icon: Icon.Camera
    },
    {
        iconName: "Document",
        icon: Icon.Document
    },
    {
        iconName: "Document checkmark",
        icon: Icon.DockCheckProperties
    },
    {
        iconName: "Folder",
        icon: Icon.Folder
    },
    {
        iconName: "Journal",
        icon: Icon.Journal
    },
    {
        iconName: "Food",
        icon: Icon.ForkKnife
    },
    {
        iconName: "Transportation",
        icon: Icon.Transportation
    },
    {
        iconName: "Airplane",
        icon: Icon.Airplane
    },
    {
        iconName: "Bus",
        icon: Icon.Bus
    },
    {
        iconName: "Cars",
        icon: Icon.Cars
    },
    {
        iconName: "Money",
        icon: Icon.Money
    },
    {
        iconName: "Currency",
        icon: Icon.Currency
    },
    {
        iconName: "Add to calendar",
        icon: Icon.AddToCalendar
    },
    {
        iconName: "Calendar blank",
        icon: Icon.CalendarBlank
    },
    {
        iconName: "Office building",
        icon: Icon.OfficeBuilding
    },
    {
        iconName: "Paper clip",
        icon: Icon.PaperClip
    },
    {
        iconName: "Newspaper",
        icon: Icon.Newspaper
    },
    {
        iconName: "Lock",
        icon: Icon.Lock
    },
    {
        iconName: "Waypoint",
        icon: Icon.Waypoint
    },
    {
        iconName: "Location",
        icon: Icon.Location
    },
    {
        iconName: "PDF document",
        icon: Icon.DocumentPDF
    },
    {
        iconName: "Bell",
        icon: Icon.Bell
    },
    {
        iconName: "Shopping cart",
        icon: Icon.ShoppingCart
    },
    {
        iconName: "Phone",
        icon: Icon.Phone
    },
    {
        iconName: "End call",
        icon: Icon.PhoneHangUp
    },
    {
        iconName: "Mobile",
        icon: Icon.Mobile
    },
    {
        iconName: "Laptop",
        icon: Icon.Laptop
    },
    {
        iconName: "Computer desktop",
        icon: Icon.ComputerDesktop
    },
    {
        iconName: "Devices",
        icon: Icon.Devices
    },
    {
        iconName: "Controller",
        icon: Icon.Controller
    },
    {
        iconName: "Tools",
        icon: Icon.Tools
    },
    {
        iconName: "Tools wrench",
        icon: Icon.ToolsWrench
    },
    {
        iconName: "Mail",
        icon: Icon.Mail
    },
    {
        iconName: "Send",
        icon: Icon.Send
    },
    {
        iconName: "Clock",
        icon: Icon.Clock
    },
    {
        iconName: "List reminder",
        icon: Icon.ListWatchlistRemind
    },
    {
        iconName: "Log journal",
        icon: Icon.LogJournal
    },
    {
        iconName: "Note",
        icon: Icon.Note
    },
    {
        iconName: "Picture frames",
        icon: Icon.PhotosPictures
    },
    {
        iconName: "Radar",
        icon: Icon.RadarActivityMonitor
    },
    {
        iconName: "Tablet",
        icon: Icon.Tablet
    },
    {
        iconName: "Tag",
        icon: Icon.Tag
    },
    {
        iconName: "Camera aperture focus",
        icon: Icon.CameraAperture
    },
    {
        iconName: "Color picker",
        icon: Icon.ColorPicker
    },
    {
        iconName: "Detail list",
        icon: Icon.DetailList
    },
    {
        iconName: "Document with content",
        icon: Icon.DocumentWithContent
    },
    {
        iconName: "List scroll empty",
        icon: Icon.ListScrollEmpty
    },
    {
        iconName: "List scroll watchlist",
        icon: Icon.ListScrollWatchlist
    },
    {
        iconName: "Options list",
        icon: Icon.OptionsList
    },
    {
        iconName: "People",
        icon: Icon.People
    },
    {
        iconName: "Person",
        icon: Icon.Person
    },
    {
        iconName: "Emoji - Frown",
        icon: Icon.EmojiFrown
    },
    {
        iconName: "Emoji - Smile",
        icon: Icon.EmojiSmile
    },
    {
        iconName: "Emoji - Sad",
        icon: Icon.EmojiSad
    },
    {
        iconName: "Emoji - Neutral",
        icon: Icon.EmojiNeutral
    },
    {
        iconName: "Warning",
        icon: Icon.Warning
    },
    {
        iconName: "Information",
        icon: Icon.Information
    },
    {
        iconName: "Data",
        icon: Icon.Database
    },
    {
        iconName: "Weather",
        icon: Icon.Weather
    },
    {
        iconName: "Hashtag",
        icon: Icon.TrendingHashtag
    },
    {
        iconName: "Trending upward",
        icon: Icon.TrendingUpwards
    },
    {
        iconName: "Items",
        icon: Icon.Items
    },
    {
        iconName: "Layers",
        icon: Icon.LevelsLayersItems
    },
    {
        iconName: "Trending upward",
        icon: Icon.Trending
    },
    {
        iconName: "Line weight",
        icon: Icon.LineWeight
    },
    {
        iconName: "3D printing",
        icon: Icon.Printing3D
    }
)

Now you can dynamically change what icon is displayed by altering the Icon setting for an icon to be similar to:

LookUp(allIcons,iconName="Items").icon

This will let you dynamically populate a toolbar or similarly based on external lists, internal events, etc.

Why can't I just import this from Excel like everything else?

This would be notably easier if we could just put all of this into an Excel sheet like other items and have this work.  However, the way in which values are imported from Excel won't allow this to work properly.  If you notice the second value for each item (e.g. icon) is not a STRING.  It is a reference actually to an object inside of PowerApps (the specific icon in question).  So if we try to dump all of this into an Excel table and import it, then the values would be:

... {
        iconName: "Add",
        icon: "Icon.Add"
    },
    {
        iconName: "Cancel",
        icon: "Icon.Cancel"

    },...

Note the extra quotes around the icon value.  That means it is a literal string vs. referencing the object inside of PowerApps.  So this just wouldn't work.  

If the "Icon" object in PowerApps was something that had some other values associated to it like other Objects then we could potentially do a LookUp() directly against it.  However, it appears that none of this is exposed via the interface.  So you'll need to manually build a Collection of this inside of PowerApps as I've shown above to make this work for you.

No comments:

Post a Comment

Because some d-bag is throwing 'bot posts at my blog I've turned on full Moderation. If your comment doesn't show up immediately then that's why.