Enhance your Dynamics 365 Customer Engagement system by adding your own icons to custom entities to help users with visual navigation. We walk through how to create and manage entity icons in this blog.
In the world of Dynamics 365 Customer Engagement (CE), it’s crucial to customize the user interface to match your organization’s brand and requirements.
One aspect of customization involves creating icons for custom entities, which not only enhances the visual appeal but also improves the user experience. Before customization, custom entities all use the same default icon (black puzzle piece), which can make things confusing for users if you have multiple custom entities.
In this blog post, we will explore the process of creating icons as web resources for custom entities in Dynamics 365 CE.
This guide will show system administrators and customizers how to create a custom icon in a Model Driven App. We will walk through how to:
- Design the icon.
- Prepare the icon.
- Create the web resource.
- Associate the icon with an entity.
Understanding Web Resources in Dynamics 365 CE
Step 1: Design the icon.
The first step in creating a custom icon is designing it. Consider the purpose of the entity and your organization’s brand guidelines. Icons should be simple, intuitive and visually appealing. You can use graphic design tools such as Adobe Photoshop and Illustrator or online platforms like Canva to create icons. Icons should easily identify what area of the system the user is navigating to, as these will still show when the site map is collapsed (see below image).
Step 2: Prepare the icon.
To ensure compatibility and optimal performance, follow these guidelines when preparing the icon:
- Use a transparent background.
- Keep the dimensions square (16×16 pixels for web application, 32×32 pixels for entity forms).
- Save the icon in a common image format like PNG or SVG (for web applications) and ICO (for entity forms).
- Keep the file smaller than 10 kilobytes.
- Use a scalable vector graphic (SVG) with transparency enabled for the best results.
Step 3: Creating the Web Resource.
To create a web resource in Dynamics 365 CE:
- Navigate to the Power Apps Portal.
- Open the desired solution or create a new one.
- Click on “Web Resources” and select “New” to create a new web resource.
- Provide a name and display name, and select the appropriate image type (PNG or SVG for icons).
- When designing the icon, you can save it as PNG, SVG or GIF.
- Open advanced options to set language and enable for mobile.
- Upload the icon file and save the web resource.
Step 4: Associate the Icon with Entity.
Now that you have created the web resource, you need to associate it with a custom entity:
- Open the desired entity or create a new one.
- Click on the “Form Properties” button in the entity form.
- Open “Advanced Options” to display more options.
- Select the web resource you created in the “Choose table image” field.
- Save and publish the changes to make the icon visible.
If you are a system administrator or customizer, there are a few other points to consider about entity icons in D365 CE.
After associating the icon with the entity, thoroughly test it in different contexts to ensure its visibility and correct rendering. If necessary, refine the design, dimensions, or file format of the icon to meet your requirements.
When you customize the user interface in Dynamics 365 CE, it can greatly enhance the user experience and align the system with your organization’s brand. Follow the steps outlined in this guide to create and associate custom icons as web resources for your custom entities.
Remember to keep the design simple, follow best practices for web resources, and thoroughly test your icons to ensure a seamless user experience. With well-designed icons, you can make your Dynamics 365 CE implementation visually appealing and user-friendly.