Collecter les îcones
Tagged: best practices, Dataverse for Teams, powerapps, tables, Teams
-
Collecter les îcones
Posté par Charly GEORGES sur 5 mai 2022 at 15h58Hello PPCF 🙂
Voici mon délire du moment :
J’aimerais pouvoir laisser la possibilité à l’utilisateur (en lecture d’une app) de choisir un icone Power Apps comme nous les avons dans l’éditeur.
J’ai pensé mettre simplement Icon dans une table mais cela semble plus compliqué que prévu.
Une idée ?
PostID=1f1IfStDhuNA7GC
Alexandre a répondu 11 months, 3 weeks ago 1 Membre · 11 Réponses -
11 Réponses
-
@Charly dans les semaines à venir je vais faire évoluer mon composant Office UI Fabric Icon Generator afin de permettre de sélectionner plusieurs icônes pour les mettre dans une collection Power Apps dont le code serait juste à copier/coller du composant vers le OnStart de ton appli.
En attendant tu peux le faire toi-même en construisant une collection comme ceci :
ClearCollect(n colIcons;n { Icon1: "<icon data>" };n { Icon2: "<icon data>" };n ....n)
Où tu remplace “<icon data>” avec le code produit par le composant Office UI Fabric Icon Generator.
Du coup, ça ressemblerait à quelque chose comme ceci :
Et ensuite tu branches ta collection sur une galerie avec une image dedans qui récupère le code de l’icône.
N’hésite pas si tu as besoin de plus d’aide…
CommentID=wx0dIozf0xL2ZuU, PostID=1f1IfStDhuNA7GC
-
Merci R3dKap
C’est ce que je craignait de devoir faire. Je voulais faire quelque chose de plus dynamique 😢CommentID=EFpAKQYYxI3Nblj, PostID=1f1IfStDhuNA7GC
-
Que veux-tu dire par dynamique ?
CommentID=246oSka6K6c91pi, PostID=1f1IfStDhuNA7GC
-
Plutôt que de faire un truc comme ça nnClearCollect(colIcon;n {IconValue:Icon.Add};n {IconValue:Icon.AddDocument};n {IconValue:Icon.AddLibrary};n {IconValue:Icon.AddToCalendar};n {IconValue:Icon.AddUser};n {IconValue:Icon.Airplane};n {IconValue:Icon.Alarm};n {IconValue:Icon.ArrowDown};n {IconValue:Icon.ArrowLeft};n {IconValue:Icon.ArrowRight};n {IconValue:Icon.ArrowUp};n {IconValue:Icon.BackArrow};n {IconValue:Icon.Bell};n {IconValue:Icon.Blocked};n {IconValue:Icon.Bookmark};n {IconValue:Icon.BookmarkFilled}n)nnFaire çanClearCollect(colIcon;n Iconn)nnEt utiliser cette collection dans une gallery qui aurait un îcone avec ThisItem.IconValue(par exemple)
CommentID=HDb6vt38OrSMiaM, PostID=1f1IfStDhuNA7GC
-
C’est la première fois que je trouve qu’il y a trop d’icone 😁
CommentID=x7BbxmWEB6Imtci, PostID=1f1IfStDhuNA7GC
-
ClearCollect(colIcon;n {IconValue:Icon.Add};n {IconValue:Icon.AddDocument};n {IconValue:Icon.AddLibrary};n {IconValue:Icon.AddToCalendar};n {IconValue:Icon.AddUser};n {IconValue:Icon.Airplane};n {IconValue:Icon.Alarm};n {IconValue:Icon.ArrowDown};n {IconValue:Icon.ArrowLeft};n {IconValue:Icon.ArrowRight};n {IconValue:Icon.ArrowUp};n {IconValue:Icon.BackArrow};n {IconValue:Icon.Bell};n {IconValue:Icon.Blocked};n {IconValue:Icon.Bookmark};n {IconValue:Icon.BookmarkFilled};n {IconValue:Icon.Bug};n {IconValue:Icon.Bus};n {IconValue:Icon.Calculator};n {IconValue:Icon.CalendarBlank};n {IconValue:Icon.Camera};n {IconValue:Icon.CameraAperture};n {IconValue:Icon.Cancel};n {IconValue:Icon.CancelBadge};n {IconValue:Icon.Cars};n {IconValue:Icon.Check};n {IconValue:Icon.CheckBadge};n {IconValue:Icon.ChevronDown};n {IconValue:Icon.ChevronLeft};n {IconValue:Icon.ChevronRight};n {IconValue:Icon.ChevronUp};n {IconValue:Icon.ClearDrawing};n {IconValue:Icon.Clock};n {IconValue:Icon.CollapseView};n {IconValue:Icon.ColorPicker};n {IconValue:Icon.Compose};n {IconValue:Icon.ComputerDesktop};n {IconValue:Icon.Controller};n {IconValue:Icon.Copy};n {IconValue:Icon.Crop};n {IconValue:Icon.Currency};n {IconValue:Icon.Cut};n {IconValue:Icon.Database};n {IconValue:Icon.DetailList};n {IconValue:Icon.Devices};n {IconValue:Icon.Diamond};n {IconValue:Icon.DockCheckProperties};n {IconValue:Icon.DockLeft};n {IconValue:Icon.DockRight};n {IconValue:Icon.Document};n {IconValue:Icon.DocumentPDF};n {IconValue:Icon.DocumentWithContent};n {IconValue:Icon.Download};n {IconValue:Icon.Draw};n {IconValue:Icon.Edit};n {IconValue:Icon.EmojiFrown};n {IconValue:Icon.EmojiHappy};n {IconValue:Icon.EmojiNeutral};n {IconValue:Icon.EmojiSad};n {IconValue:Icon.EmojiSmile};n {IconValue:Icon.Enhance};n {IconValue:Icon.Erase};n {IconValue:Icon.Error};n {IconValue:Icon.ExpandView};n {IconValue:Icon.Export};n {IconValue:Icon.Filter};n {IconValue:Icon.FilterFlat};n {IconValue:Icon.FilterFlatFilled};n {IconValue:Icon.Flag};n {IconValue:Icon.Folder};n {IconValue:Icon.ForkKnife};n {IconValue:Icon.HalfFilledCircle};n {IconValue:Icon.Hamburger};n {IconValue:Icon.Health};n {IconValue:Icon.Heart};n {IconValue:Icon.Help};n {IconValue:Icon.Hide};n {IconValue:Icon.History};n {IconValue:Icon.Home};n {IconValue:Icon.HorizontalLine};n {IconValue:Icon.Hospital};n {IconValue:Icon.Import};n {IconValue:Icon.Information};n {IconValue:Icon.Items};n {IconValue:Icon.Journal};n {IconValue:Icon.Key};n {IconValue:Icon.Laptop};n {IconValue:Icon.Leave};n {IconValue:Icon.LevelsLayersItems};n {IconValue:Icon.Lightbulb};n {IconValue:Icon.LightningBolt};n {IconValue:Icon.LikeDislike};n {IconValue:Icon.LineWeight};n {IconValue:Icon.Link};n {IconValue:Icon.ListScrollEmpty};n {IconValue:Icon.ListWatchlistRemind};n {IconValue:Icon.Location};n {IconValue:Icon.Lock};n {IconValue:Icon.LogJournal};n {IconValue:Icon.Mail};n {IconValue:Icon.Manufacture};n {IconValue:Icon.Medical};n {IconValue:Icon.Message};n {IconValue:Icon.Microphone};n {IconValue:Icon.Mobile};n {IconValue:Icon.Money};n {IconValue:Icon.More};n {IconValue:Icon.Newspaper};n {IconValue:Icon.NextArrow};n {IconValue:Icon.Note};n {IconValue:Icon.Notebook};n {IconValue:Icon.OfficeBuilding};n {IconValue:Icon.OpenInNewWindow};n {IconValue:Icon.OptionsList};n {IconValue:Icon.PaperClip};n {IconValue:Icon.Paste};n {IconValue:Icon.People};n {IconValue:Icon.Person};n {IconValue:Icon.Phone};n {IconValue:Icon.Phonebook};n {IconValue:Icon.PhoneHangUp};n {IconValue:Icon.PhotosPictures};n {IconValue:Icon.Pin};n {IconValue:Icon.Post};n {IconValue:Icon.Print};n {IconValue:Icon.Printing3D};n {IconValue:Icon.Publish};n {IconValue:Icon.QuestionMark};n {IconValue:Icon.RadarActivityMonitor};n {IconValue:Icon.Redo};n {IconValue:Icon.Reload};n {IconValue:Icon.Reset};n {IconValue:Icon.Ribbon};n {IconValue:Icon.Save};n {IconValue:Icon.Scan};n {IconValue:Icon.Search};n {IconValue:Icon.Send};n {IconValue:Icon.Settings};n {IconValue:Icon.Share};n {IconValue:Icon.Shirt};n {IconValue:Icon.Shop};n {IconValue:Icon.ShoppingCart};n {IconValue:Icon.Signal};n {IconValue:Icon.Sort};n {IconValue:Icon.Support};n {IconValue:Icon.Sync};n {IconValue:Icon.Tablet};n {IconValue:Icon.Tag};n {IconValue:Icon.Text};n {IconValue:Icon.ThumbsDown};n {IconValue:Icon.ThumbsDownFilled};n {IconValue:Icon.ThumbsUp};n {IconValue:Icon.ThumbsUpFilled};n {IconValue:Icon.Tools};n {IconValue:Icon.ToolsWrench};n {IconValue:Icon.Train};n {IconValue:Icon.Transportation};n {IconValue:Icon.Trash};n {IconValue:Icon.Tray};n {IconValue:Icon.Trending};n {IconValue:Icon.TrendingHashtag};n {IconValue:Icon.TrendingUpwards};n {IconValue:Icon.Undo};n {IconValue:Icon.Unlock};n {IconValue:Icon.VerticalLine};n {IconValue:Icon.Video};n {IconValue:Icon.View};n {IconValue:Icon.Waffle};n {IconValue:Icon.Warning};n {IconValue:Icon.Waypoint};n {IconValue:Icon.Weather};n {IconValue:Icon.ZoomIn};n {IconValue:Icon.ZoomOut} n)
CommentID=YMDWw3hXDYxt71C, PostID=1f1IfStDhuNA7GC
-
Salut, j’avais besoin aussi de ca, du coup le fait de ne pas être le seul, j’ai voulu apporter un coup de main.
Vous savez tous que powerFX est opensource ? Du coup un saut sur le github de powerfx et on trouve les énumérations, dont celle des icons (et bien sur on doit y trouver les fonts etc…)
https://github.com/microsoft/Power-Fx/blob/dc9a3621d16bcc93e7ef764af9477d9c0f1df4ec/src/libraries/Microsoft.PowerFx.Core/Types/Enums/EnumStoreBuilder.cs#:~:text=EnumConstants.IconEnumString,builtinicon%3APaste%5C%22%2C%20Leave%3A%5C%22builtinicon%3ALeave%5C%22%5D%22Du coup on fait une petite powerapps rapidos en collant le code source (uniquement la partie des icons) dans un label par exemple (ou une variable c’est comme on veut, puisque je vais juste générer une liste pour vous)
Ensuite une petite expression régulière pour récupérer le nom de l’icon tel qu’utilisée dans powerapps (builtin:***) et un matchall qu’on glisse en propriété ‘item’ d’une gallerie pour voir ce que ca donne :MatchAll(Label1.Text;”(?<iconname>builtinicon:.*?)\\”)
Finalement une petite concaténation pour vous fournir la liste prête à copier coller dans votre app :
"["&Char(10)&Concat(MatchAll(Label1.Text;"(?<icon>builtinicon:(?<name>.*?))\\");"{icon:"""& icon &""";name:"""&name&"""}";";"&Char(10))&Char(10)&"]"
Ca donne une liste de 175 records mais vous pourrez modifier pour vos propres besoins :
[n{icon:"builtinicon:Add";name:"Add"};n{icon:"builtinicon:Cancel";name:"Cancel"};n{icon:"builtinicon:CancelBadge";name:"CancelBadge"};n{icon:"builtinicon:Edit";name:"Edit"};n{icon:"builtinicon:Check";name:"Check"};n{icon:"builtinicon:CheckBadge";name:"CheckBadge"};n{icon:"builtinicon:Search";name:"Search"};n{icon:"builtinicon:Filter";name:"Filter"};n{icon:"builtinicon:FilterFlat";name:"FilterFlat"};n{icon:"builtinicon:FilterFlatFilled";name:"FilterFlatFilled"};n{icon:"builtinicon:Sort";name:"Sort"};n{icon:"builtinicon:Reload";name:"Reload"};n{icon:"builtinicon:Trash";name:"Trash"};n{icon:"builtinicon:Save";name:"Save"};n{icon:"builtinicon:Download";name:"Download"};n{icon:"builtinicon:Copy";name:"Copy"};n{icon:"builtinicon:LikeDislike";name:"LikeDislike"};n{icon:"builtinicon:Crop";name:"Crop"};n{icon:"builtinicon:Pin";name:"Pin"};n{icon:"builtinicon:ClearDrawing";name:"ClearDrawing"};n{icon:"builtinicon:ExpandView";name:"ExpandView"};n{icon:"builtinicon:CollapseView";name:"CollapseView"};n{icon:"builtinicon:Draw";name:"Draw"};n{icon:"builtinicon:Compose";name:"Compose"};n{icon:"builtinicon:Erase";name:"Erase"};n{icon:"builtinicon:Message";name:"Message"};n{icon:"builtinicon:Post";name:"Post"};n{icon:"builtinicon:AddDocument";name:"AddDocument"};n{icon:"builtinicon:AddLibrary";name:"AddLibrary"};n{icon:"builtinicon:Home";name:"Home"};n{icon:"builtinicon:Hamburger";name:"Hamburger"};n{icon:"builtinicon:Settings";name:"Settings"};n{icon:"builtinicon:More";name:"More"};n{icon:"builtinicon:Waffle";name:"Waffle"};n{icon:"builtinicon:ChevronLeft";name:"ChevronLeft"};n{icon:"builtinicon:ChevronRight";name:"ChevronRight"};n{icon:"builtinicon:ChevronUp";name:"ChevronUp"};n{icon:"builtinicon:ChevronDown";name:"ChevronDown"};n{icon:"builtinicon:NextArrow";name:"NextArrow"};n{icon:"builtinicon:BackArrow";name:"BackArrow"};n{icon:"builtinicon:ArrowDown";name:"ArrowDown"};n{icon:"builtinicon:ArrowUp";name:"ArrowUp"};n{icon:"builtinicon:ArrowLeft";name:"ArrowLeft"};n{icon:"builtinicon:ArrowRight";name:"ArrowRight"};n{icon:"builtinicon:Camera";name:"Camera"};n{icon:"builtinicon:Document";name:"Document"};n{icon:"builtinicon:DockCheckProperties";name:"DockCheckProperties"};n{icon:"builtinicon:Folder";name:"Folder"};n{icon:"builtinicon:Journal";name:"Journal"};n{icon:"builtinicon:ForkKnife";name:"ForkKnife"};n{icon:"builtinicon:Transportation";name:"Transportation"};n{icon:"builtinicon:Airplane";name:"Airplane"};n{icon:"builtinicon:Bus";name:"Bus"};n{icon:"builtinicon:Cars";name:"Cars"};n{icon:"builtinicon:Money";name:"Money"};n{icon:"builtinicon:Currency";name:"Currency"};n{icon:"builtinicon:AddToCalendar";name:"AddToCalendar"};n{icon:"builtinicon:CalendarBlank";name:"CalendarBlank"};n{icon:"builtinicon:OfficeBuilding";name:"OfficeBuilding"};n{icon:"builtinicon:PaperClip";name:"PaperClip"};n{icon:"builtinicon:Newspaper";name:"Newspaper"};n{icon:"builtinicon:Lock";name:"Lock"};n{icon:"builtinicon:Waypoint";name:"Waypoint"};n{icon:"builtinicon:Location";name:"Location"};n{icon:"builtinicon:DocumentPDF";name:"DocumentPDF"};n{icon:"builtinicon:Bell";name:"Bell"};n{icon:"builtinicon:ShoppingCart";name:"ShoppingCart"};n{icon:"builtinicon:Phone";name:"Phone"};n{icon:"builtinicon:PhoneHangUp";name:"PhoneHangUp"};n{icon:"builtinicon:Mobile";name:"Mobile"};n{icon:"builtinicon:Laptop";name:"Laptop"};n{icon:"builtinicon:ComputerDesktop";name:"ComputerDesktop"};n{icon:"builtinicon:Devices";name:"Devices"};n{icon:"builtinicon:Controller";name:"Controller"};n{icon:"builtinicon:Tools";name:"Tools"};n{icon:"builtinicon:ToolsWrench";name:"ToolsWrench"};n{icon:"builtinicon:Mail";name:"Mail"};n{icon:"builtinicon:Send";name:"Send"};n{icon:"builtinicon:Clock";name:"Clock"};n{icon:"builtinicon:ListWatchlistRemind";name:"ListWatchlistRemind"};n{icon:"builtinicon:LogJournal";name:"LogJournal"};n{icon:"builtinicon:Note";name:"Note"};n{icon:"builtinicon:PhotosPictures";name:"PhotosPictures"};n{icon:"builtinicon:RadarActivityMonitor";name:"RadarActivityMonitor"};n{icon:"builtinicon:Tablet";name:"Tablet"};n{icon:"builtinicon:Tag";name:"Tag"};n{icon:"builtinicon:CameraAperture";name:"CameraAperture"};n{icon:"builtinicon:ColorPicker";name:"ColorPicker"};n{icon:"builtinicon:DetailList";name:"DetailList"};n{icon:"builtinicon:DocumentWithContent";name:"DocumentWithContent"};n{icon:"builtinicon:ListScrollEmpty";name:"ListScrollEmpty"};n{icon:"builtinicon:ListScrollWatchlist";name:"ListScrollWatchlist"};n{icon:"builtinicon:OptionsList";name:"OptionsList"};n{icon:"builtinicon:People";name:"People"};n{icon:"builtinicon:Person";name:"Person"};n{icon:"builtinicon:EmojiFrown";name:"EmojiFrown"};n{icon:"builtinicon:EmojiSmile";name:"EmojiSmile"};n{icon:"builtinicon:EmojiSad";name:"EmojiSad"};n{icon:"builtinicon:EmojiNeutral";name:"EmojiNeutral"};n{icon:"builtinicon:EmojiHappy";name:"EmojiHappy"};n{icon:"builtinicon:Warning";name:"Warning"};n{icon:"builtinicon:Information";name:"Information"};n{icon:"builtinicon:Database";name:"Database"};n{icon:"builtinicon:Weather";name:"Weather"};n{icon:"builtinicon:TrendingHashtag";name:"TrendingHashtag"};n{icon:"builtinicon:TrendingUpwards";name:"TrendingUpwards"};n{icon:"builtinicon:Items";name:"Items"};n{icon:"builtinicon:LevelsLayersItems";name:"LevelsLayersItems"};n{icon:"builtinicon:Trending";name:"Trending"};n{icon:"builtinicon:LineWeight";name:"LineWeight"};n{icon:"builtinicon:Printing3D";name:"Printing3D"};n{icon:"builtinicon:Import";name:"Import"};n{icon:"builtinicon:Export";name:"Export"};n{icon:"builtinicon:QuestionMark";name:"QuestionMark"};n{icon:"builtinicon:Help";name:"Help"};n{icon:"builtinicon:ThumbsDown";name:"ThumbsDown"};n{icon:"builtinicon:ThumbsUp";name:"ThumbsUp"};n{icon:"builtinicon:ThumbsDownFilled";name:"ThumbsDownFilled"};n{icon:"builtinicon:ThumbsUpFilled";name:"ThumbsUpFilled"};n{icon:"builtinicon:Undo";name:"Undo"};n{icon:"builtinicon:Redo";name:"Redo"};n{icon:"builtinicon:ZoomIn";name:"ZoomIn"};n{icon:"builtinicon:ZoomOut";name:"ZoomOut"};n{icon:"builtinicon:OpenInNewWindow";name:"OpenInNewWindow"};n{icon:"builtinicon:Share";name:"Share"};n{icon:"builtinicon:Publish";name:"Publish"};n{icon:"builtinicon:Link";name:"Link"};n{icon:"builtinicon:Sync";name:"Sync"};n{icon:"builtinicon:View";name:"View"};n{icon:"builtinicon:Hide";name:"Hide"};n{icon:"builtinicon:Bookmark";name:"Bookmark"};n{icon:"builtinicon:BookmarkFilled";name:"BookmarkFilled"};n{icon:"builtinicon:Reset";name:"Reset"};n{icon:"builtinicon:Blocked";name:"Blocked"};n{icon:"builtinicon:DockLeft";name:"DockLeft"};n{icon:"builtinicon:DockRight";name:"DockRight"};n{icon:"builtinicon:LightningBolt";name:"LightningBolt"};n{icon:"builtinicon:HorizontalLine";name:"HorizontalLine"};n{icon:"builtinicon:VerticalLine";name:"VerticalLine"};n{icon:"builtinicon:Ribbon";name:"Ribbon"};n{icon:"builtinicon:Diamond";name:"Diamond"};n{icon:"builtinicon:Alarm";name:"Alarm"};n{icon:"builtinicon:History";name:"History"};n{icon:"builtinicon:Heart";name:"Heart"};n{icon:"builtinicon:Print";name:"Print"};n{icon:"builtinicon:Error";name:"Error"};n{icon:"builtinicon:Flag";name:"Flag"};n{icon:"builtinicon:Notebook";name:"Notebook"};n{icon:"builtinicon:Bug";name:"Bug"};n{icon:"builtinicon:Microphone";name:"Microphone"};n{icon:"builtinicon:Video";name:"Video"};n{icon:"builtinicon:Shop";name:"Shop"};n{icon:"builtinicon:Phonebook";name:"Phonebook"};n{icon:"builtinicon:Enhance";name:"Enhance"};n{icon:"builtinicon:Unlock";name:"Unlock"};n{icon:"builtinicon:Calculator";name:"Calculator"};n{icon:"builtinicon:Support";name:"Support"};n{icon:"builtinicon:Lightbulb";name:"Lightbulb"};n{icon:"builtinicon:Key";name:"Key"};n{icon:"builtinicon:Scan";name:"Scan"};n{icon:"builtinicon:Hospital";name:"Hospital"};n{icon:"builtinicon:Health";name:"Health"};n{icon:"builtinicon:Medical";name:"Medical"};n{icon:"builtinicon:Manufacture";name:"Manufacture"};n{icon:"builtinicon:Train";name:"Train"};n{icon:"builtinicon:Globe";name:"Globe"};n{icon:"builtinicon:HalfFilledCircle";name:"HalfFilledCircle"};n{icon:"builtinicon:Tray";name:"Tray"};n{icon:"builtinicon:AddUser";name:"AddUser"};n{icon:"builtinicon:Text";name:"Text"};n{icon:"builtinicon:Shirt";name:"Shirt"};n{icon:"builtinicon:Signal";name:"Signal"};n{icon:"builtinicon:Cut";name:"Cut"};n{icon:"builtinicon:Paste";name:"Paste"};n{icon:"builtinicon:Leave";name:"Leave"}n]
CommentID=vt0GvtvGKYz7Rtl, PostID=1f1IfStDhuNA7GC
-
Top !
C’est ce que j’ai fini par faire à la main. Je prend note de toutes ces astuces ! Merci beaucoup !CommentID=DcGWXmNLSdm6KmQ, PostID=1f1IfStDhuNA7GC
-
Top astuce @Alexandre !!! 😍👍
CommentID=LPp4xxxZlEfms8T, PostID=1f1IfStDhuNA7GC
-
Je m’apprêtais à aller plus loin en vous fournissant la liste des icones avec les noms en Français. Malheureusement, ma session a expiré (pourquoi ? à 23h pétante ma session expire d’un coup d’un seul en plein travail ?) et j’ai tout perdu 🙂
Du coup je vous laisse un exercice pour appliquer ma démo 🙂
Dans les sources github de powerfx on a aussi les traductions dans le fichier ici :https://github.com/microsoft/Power-Fx/blob/dc9a3621d16bcc93e7ef764af9477d9c0f1df4ec/src/strings/fr-FR/PowerFxResources.resw
L’exercice consiste donc à appliquer le même processus (ou similaire) pour parser le code source, et obtenir les traductions. Le schéma des traductions est le suivant :
<data name="Icon_Import_DisplayName" xml:space="preserve">n <value>Importer</value>n </data>
Pour recoller les morceaux avec la liste des icones, il suffit de joindre en remplaçant dans Icon_****_Displayname les étoiles par le nom de l’icone. Ensuite la traduction se situe dans la balise <value>.
Bon courage 🙂
CommentID=31pCpCaVIo4sKQQ, PostID=1f1IfStDhuNA7GC
Connectez-vous pour répondre.