Creating Entity Icons for D365 with XRM ToolBox
When navigating Microsoft Dynamics CE, adding icons can make a significant difference to help distinguish a list of entities from one another. An icon can be used as a visual identifier for navigating forms. Icons clear up confusion for the user, especially when navigating forms with multiple lookups to other entities (see image below). The purpose of this article is to show how to add icons to entities using the XRM ToolBox so identifying entities is easy and efficient.
Getting Started
Before starting, you’ll want to make sure you have the following items downloaded and installed:
XRM ToolBox
Download here: https://www.xrmtoolbox.com/
- Search for Plugin called “Iconator” in XRM ToolBox
Icon Selector
1. Download: https://www.syncfusion.com/downloads/metrostudio
2. Another option is: https://flaticons.net/
Choosing your icons will be the most important part of the process. You want the icons to be intuitive to the general user and correspond with the entity name. If you decide at a later time that the icon does not fit well with the entity name, you can always update your icons by following these steps again.
Creating Your Icons
Note: These steps are for Metro Studio
D365 requires three image sizes for displaying entity icons throughout different areas of CE. The three entity image sizes that you will need to accommodate for are SVG (Scalable Vector Graphics), 32 x 32, and 16 x 16. You will need to create three projects within Metro Studio, each with different dimensions to keep consistent formatting for the icons. This will keep your work organized and alleviate confusion when working with a wide variety of icons and different sizes.
Metro Studio has an array of icons to choose from. On the left hand side of the screen, you have the option to choose from an “Icon Category” to narrow down your search. I suggest using the search box in the top right corner if you want to use a keyword to search for icons. Metro Studio is a great choice for finding icons due to its extensive selection of all different types of icons.
Within Metro Studio you can drag and drop icons into each project and then export to your computer. Create a new folder on your desktop to save your icon images, so you can easily retrieve them when mapping to entities in the XRM ToolBox.
You always have the option to delete an image within Metro Studio and replace it with another. As a reminder, if you use the same name, it will ask if you would like to replace the old image with the new one.
Step 1
Create three separate projects titled SVG, 32, and 16 in Metro Studio by hovering over the bottom left corner in the red box.
Search Metro Studio by keyword of the icon you are looking for in the search box in the top right corner. You can also search using the “Icon Category” on the left hand side.
Once you have decided on an icon, drag and drop the icon into each project.
Step 2
Hover over the SVG project and click Edit.
Move the height and width to 128 with Padding at 0px.
You’ll want the color of the icons to be a dark grey or black to see them clearly in the solution. I recommend #FF353535.
Once you have created the dimensions, make sure to title your icon to something that makes sense for your solution: (prefix_name of entity_ size of image) (i.e. hsl_booking_svg). To change the name, double click on the name underneath the image.
Click Save & Export.
Repeat these steps for Projects 32 and 16.
You’ll need to change the Height/Width on Projects 32 and 16. Everything else should stay the same as the SVG project (Padding, Icon Color, Background Shapes).
32: Set Height/Width to 32.
16: Set Height/Width to 16.
Adding your Icons to XRM ToolBox
The XRM ToolBox makes it easy for you to customize your solution without working directly in the solution itself. Before you get started, make sure you have the plugin called “Iconator” added to XRM ToolBox.
Once you are connected to your environment, you can use the Iconator to map the icons you have created in Metro Studio to your entities and publish in your solution.
Step 1
Open XRM ToolBox. Click on the Iconator plug-in.
Click Connect to connect to the environment you will be publishing to.
Click Load Entities and Images. Entities will load in the box on the left (Image 3 below).
Step 2
Click Add Images. Browse your computer for the icon images saved from Metro Studio.
Make sure to uncheck the checkbox to change the prefix, if needed.
Click Create Web Resources with Selected Images. The images will automatically go to correct tab regarding size of the image.
Step 3
Select the desired entity and Select the image you want to map to that entity.
Click Map. The mappings will appear the bottom right box (refer to “Image 3” above).
Do this for each image size (i.e. 16 x 16, 32 x 32, and SVG).
To remove a mapping, click Remove Mapping.
Click Apply and Publish.
The Iconator plugin in XRM ToolBox speeds up the process of entity and image mapping by adding multiple mappings at one time. Since XRM ToolBox is connected directly to your environment, it makes bulk changes extremely simple.
Navigate back to the app to confirm new icons have appeared. Do a hard refresh (F5) to validate that all new changes appear in the solution.
Replacing Icons
Replacing icons is very simple. If the icon you mapped does not fit well with the entity, you can always replace it with another. To do this, follow the same steps in this article and map the new image to the desired entity.
If the icons did not come out the way you intended or you would like to change any of the icons you created, repeat the above steps and replace the mapping with the new image.
