Model-Driven Power Apps Icons
Improve the user experience of your model-driven apps on the Microsoft Power Platform
A picture’s worth a thousand words…………….
This is what visual learners have been trying to communicate to word people like myself, for centuries and they’re finally getting the upper hand. Everywhere it seems except in model-driven Power Apps on the Power Platform where a jigsaw piece is used to represent custom tables. As opposed to the well thought out icons that accompany out of the box tables, visually cueing the user to its purpose
If you’ve got a handful of custom tables this may seem like no big deal, but what if you’re building a completely custom model-driven app in Power Apps for customers? Wouldn’t it be nice to give them something that’s visually aesthetic as well as useful, indicating the custom table’s purpose?
Sure Nathan, who doesn’t, but the budgets and timelines on my project are tight. Custom table icons would take too much time and money to develop. If I asked my customer they’d tell me that it’s waaaaaaaay down the list of priorities.
But what if there was a way to do this quickly, easily, and did I mention my favourite price ……FREE!
Go on word guy, you’ve got me.
Model-driven Power App Icon Tools
First things first you’re going to need to download a few tools:
1/ Syncfusion Metro Studio (download here)
2/ Xrm Toolbox, specifically the Iconator plugin (download here)
Ok now that the preliminaries are out of the way let’s have some fun.
How to easily add icons to model-driven Power Apps
To Start:
Open Syncfusion Metro Studio and start searching for possible images for your entities. There’s a list of categories down the right-hand side or you can use the search function
Categories:
Search Function:
Once you’ve found a suitable icon, hover over it and click the ‘edit’ button.
This brings up the canvas that lets you set the size, background and colour for your icon.
You must set the following:
Size (Height x Width): 32
Padding: 0
Background Shape: Transparent
Icon Colour: FF00000 (that’s ‘design-ese’ for black)
Quick note: you may have seen references to 16- or 32-pixel sizing in other blogs on this topic. These are exclusively used by the since-deprecated web client.
Next, save your image file.
And export it.
In the save dialogue select file type SVG so your icon is compatible with the Power Apps Unified UI in the Power Platform.
Once that’s done, exit Metro Studio and open the Xrm Toolbox. Select the Iconator tool (make sure you connect to your model-driven app’s Power Platform environment).
Next Click ‘Load Entities and Images’ and select your solution.
Add the SVG images you created in Metro Studio.
The Icon should appear in the toolbox.
Map the Icon to the entity.
Apply and publish the Web resource.
Access your solution on Power Apps Maker Portal You’ll see the web resource you’ve created.
Do a refresh (Ctrl+F5) in your model-driven app. The new icon should appear:
Congratulations, you’ve just taken your first steps towards making your Power Apps model-driven app that much more user friendly!
What do you do to make your model driven apps more user friendly? Leave your comments below.
Thanks for reading!
