Sonoma Partners Microsoft CRM and Salesforce Blog

Making Your Entities Pop: How to Efficiently Create and Maintain Entity Icons

Today's blog post was written by Mike Dearing, Principal Developer at Sonoma Partners.

Before recently, I had never put much thought into the image choice for a custom entity. As long as the end result of a long day of customizations wasn’t an ode to cog wheels, I figured things were good enough. I’d pop open a local fileshare, find an image that somewhat related to what my entity represented, associate the web resource, and call it a day. Although this wasn’t necessarily a bad practice, as long as I stayed fairly consistent with my own changes, once others would start doing their own customizations noticeable differences started to arise. It could be something as simple as the padding around the image being a couple of pixels different or something as drastic as an image that didn’t look like a CRM icon at all.

I knew that if there was any chance to rectify this, I had to answer two questions:

  1. What constitutes an acceptable entity icon?
  2. What is an efficient method to find or create these icons?

What constitutes an acceptable entity icon?

To answer this question, I looked to Dynamics. At the end of the day, if our icons look as close as possible to native Dynamics entity icons, we’ll be in good shape. Dynamics requires you to specify 2 entity icons, one that is 16x16, and one that is 32x32.

16x16

  • Used in several places throughout the system, such as lookups and grids
  • Some are still colored, but mainly gray
  • No padding
  • Transparent background

32x32

  • Used in the sitemap
  • White
  • ~3 pixels of padding
  • Transparent background

What is an efficient method to find or create these icons?

Now that we’ve established what is acceptable, we need to determine how to easily enforce these standards. Several coworkers had been using SyncFusion Metro Studio, a free icon manager (both to use, and to distribute the resulting icons) for their icon needs, so I decided to look into it further. The tool itself is straight forward: search for an icon by name, or sift through categories. As an added bonus, the images are also tagged by similar words or concepts, so searching for ‘person’ or ‘people’ has a chance to pull up the same image.

Everything noted so far isn’t all that different from just grabbing your image out of a local fileshare. However, Metro Studio comes with the nifty ability to drag icons into a grouping called ‘projects’. In my case, I went ahead and made a 16 project, and a 32 project. Each time I found a suitable image, I’d drag it once into the 16 project, and once into the 32 project.

Mike dearing 1_800

Within the 16 project, I’ve sized each of my images to 16x16 pixels, set the padding to 0 pixels, set the background to transparent, and grayscaled them to the same value. I chose #FF666666, though most gray variants look decent for these images.

Mike dearing 2_800

Within the 32 project, I’ve sized each of my images to 32x32 pixels, set the padding to 3 pixels, set the background to transparent, and left the images white.

Mike dearing 3_800

Once I’ve finished selecting my images, I can choose the export option from each project, and mass export all to an icons folder which can be source controlled (the method is up to you here – we use Git, but any repository or fileshare will do) along with the Metro Studio project files, and brought up Dynamics via a web resource uploader of your choosing.

You are now able to maintain consistent styling throughout your icons and can quickly react the next time Dynamics has an icon style change by being able to mass update, export, and reupload your entire icon library within minutes.

Topics: Microsoft Dynamics 365