How to Use Microsoft Unified Interface Icons in Power BI
As Power BI is used increasingly within model-driven apps and Microsoft Dynamics 365 apps such as Dynamics 365 Sales, attention to detail in the user experience is increasingly important. Users should be able to seamlessly navigate between the two technologies, and the visual cues should match between them for a coherent user experience.
Visual cues, for example, can be the icons used in the report to represent Opportunities, Accounts, Emails, Tasks, etc. In this blog post, I will show how to copy the icons from a model-driven Power App or Dynamics 365 and add them to a Power BI report.
The following image is the completed example of what I will create, a Power BI table with activities, using the icons from Power Apps.
Using the same icons makes it easier for the user to decode what they are seeing on the screen.
To create this, I will need to:
Get the SVG icons for the entities I need
Create a Power BI theme JSON file and import it to Power BI
Create a table which has the entity name in one of the columns
Set the icons to display instead of the entity name
Get the Icons
Finding the icons was a little tricky, but all you need for most icons is to type this URL in your browser.
https://YOURORG.crm.dynamics.com/_imgs/svg_1.svg
Replace YOURORG with your organization URL. The number 1 at the end is the entity number – it’s the Account entity in this case. Phone Call, for example, is 4210. Right click on the image to download the SVG file. Repeat that for all the entity icons you need and possibly use the XrmToolBox metadatabrowser to help you find the right numbers.
Create a Power BI Theme file
For complete details on theme files and icons check out this post from PowerBi.tips
Or just download the JSON theme file I have created with the most common entity icons here: Download Unified Interface Icons for Power BI Theme.
The theme includes icons for these entities:
Account
Activity
Appointment
Business Unit
Case/Incident
Competitor
Contact
Invoice
Lead
Note
Opportunity
Order
Phone Call
Position
Queue
Quote
SharePoint Document
Social Profile
Task
Team
User
Add the theme file by clicking on View -> Themes -> Browser for themes and upload the file.
Query Table with Entity Name in one column
For my example, I queried a list of activities from CDS. In this case I used the Power Query builder and FetchXML. This method allows me to get the “regardingobject logical name” or the entity name. The standard CDS connector does not include this piece of information. The entity name is relevant as that is the column that will determine what icon to show.
To get the entity name of the regarding object, open the Expanded Column step and include the “lookuplogicalname” field for the regardingobjectid.
Click on Close and Apply to return to the report editor.
Add the columns to a table so it easy to see the values.
Columns with Activity Type and Regarding Object highlighted will be replaced by the matching icon.
How to add Icons
Select the table we just created and:
Go to the Layout tab and the Conditional formatting section
Select the Subject column
Click on Icons
Wait for the Advanced controls dialog to appear
Adjust the settings to look like this.
The field value selected in “Based on field” is what is being used to display the icon. In this case the field has values like “phonecall”, “task”, and “appointment”, and the theme file we uploaded has icons named “phonecall”, “task”, and “appointment”.
For comparison, you can open the JSON file in Notepad or similar and look at the descriptions of the icons, then add more icons if you like using the same format.
Repeat the process for adding an icon with the Regarding field, but this time select the Regarding Object field that we pulled in.
Now we can remove Activity Type and Regarding Object columns as they are no longer needed.
Finally, we can publish the report and add it to our Model-Driven Power App or Dynamics 365.
This concept can be taken further by including color codes for completed or high priority activities etc.
In my example I had the icon in the same column as the Subject and Regarding field, but you can include the type column separate and use the “Icon only” setting. That will include an extra column, but the standard tooltip will show you the name in case users are new and need to familiarize themselves with the icons.
Tags: