Use Icons from Power Apps Unified Interface in Power BI

As Power BI is used increasingly within Dynamics 365 or Model-Driven apps, 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 steal copy the icons from the Model-Driven Power App, or Dynamics 365 and add them to a Power BI report.

Here is the example. A Power BI table with activities, using the matching icons from the Power App.

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 right icon to display based on the entity name

Get the Icons

Finding the icons was a little tricky, but a tip from George Doubinsky led me in the right direction.

Apparently, all you need for most icons is to type this URL in your browser.

https://YOURORG.crm.dynamics.com/_imgs/svg_1.svg

Web browser is zoomed in so it easier to see the icon.

Replace YOURORG with your organization URL. The number “1” at the end is the entity number. In this case, that is the Account entity. 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

Now that we have the SVG icons we want, we need to add them to a JSON file in Power BI Theme format.

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 Unified Interface 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
• Email
• 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” -> “Browse 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 that the activity is regarding. 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.

See this post for more details on the Power Query Builder and the use of FetchXML.

In the Power Query Builder I used a View that included the main activity details, including the Regarding field.

To get the entity name of the regarding object, open the Expanded Column step and include the “lookuplogicalname” field for the regardingobjectid.

Click on the image to see a larger version.

Click on “Close and Apply” to close the Power Query window and return to the report editor in Power BI.

Add the columns to a table in the report designer so it easy to see the values.

Columns with Activity Type and Regarding Object highlighted. These columns will be replaced by the matching icon.

Add the Unified Interface Icons

Select the table we just created and:

1. Go to the Layout tab and the Conditional formatting section
2. Select the Subject column
3. 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, and 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.

Table in Power BI where the icon in Subject and Regarding matches the type.

Now we can remove Activity Type and Regarding Object columns. They no longer need to take up on any screen real-estate.

Finally, we can publish the report and add it to our Model-Driven Power App or Dynamics 365.

For a primer on using icons in Power BI, check out this blog post from Matt Allington.

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.

Thanks for reading. Please sign up for my newsletter and or follow me on Twitter Follow @CRMChartGuy