Canvas PowerApps can be used to build applications that give a great user experience.  How can we take advantage of these to give a better user experience to Dynamics 365 Customer Engagement?

The Background

Over the years I have had a few customers comment that the Dynamics CRM \ 365 user interface is clunky to use and is not as configurable and as flexible as they thought it was going to be.

The way that the data model is set up dictates a lot of the user interface and experience. A form page covers only one entity which means that users have to click through different screens to update information on different records e.g a user wanting to update Account, Contact and Opportunity at the same time – there are a lot of clicks!  End users that need to enter lots of data or want to enter data quickly are restricted by the model driven user interface of Dynamics 365. This is the trade-off for being able to quickly build feature rich apps with the Dynamics 365 platform.

In the Dynamics CRM 2013 – 2016 days there was huge amounts of white space making the fields hard to find and identify, and being able to change colours etc. on forms to give contrast was not possible.  If you wanted to add extra controls or components to make Dynamics CRM easier to interact with then you needed to develop HTML web resources and form scripting. These are expensive to create and can be prone to issues when upgrading.

Microsoft have made a huge effort with Dynamics 365 and the new Unified Interface, the timeline control, interactive dashboards, custom controls, editable grids, business process flow, and themes are a big improvement.  But more can still be done…

Improving the UX for Dynamics 365 further with PowerApps

What if the UX enhancements that Microsoft has made are still not enough?  And you don’t have the money and skills to do custom development?

One answer is to embed PowerApps into Dynamics 365.

The picture below demonstrates how this might look in the Dynamics 365 Sales Hub.

Embedded PowerApp

And this is how it is done…

  1. Build your PowerApp
  2. Generate your PowerApp URL following these instructions
  3. Add a new iFrame control to your Dynamics 365 form and configure using the PowerApp URL

iframe-properties

This is the simplest version of the steps but is actually that simple and it can all be done without code.  The most complex part is building the PowerApp.

You will most likely want to pass parameters from Dynamics 365 to your PowerApp so that it has some context.  This can be achieved by ticking the Pass record object-type code and unique identifiers as parameters box, in step 3, which will pass certain values of the Dynamics 365 record as listed here.  When you build your PowerApp URL you factor those parameters into the URL.

If the out-of-the-box parameters that Dynamics 365 can pass are not enough then you can always dive into some JavaScript to get the parameters you need and update the URL of the iFrame control.  I’ll stop here as this is starting to get complicated for a Citizen Developer but I will look to dive deeper into this in a future blog post.

You can embed a PowerApp, but what does this really mean?

The following list contains a few practical examples of PowerApps that would be advantageous to embed into Dynamics 365 Customer Engagement forms to improve user experience and productivity.

  • Quote calculator on the Opportunity or Quote entity
  • Ability to edit a related record e.g. edit the Account details from related Opportunity form
  • Custom controls and edit screens for quick data entry
  • Real time integration with external data using the PowerApps connectors e.g. a news feed

What Next?

Dynamics 365 for Finance and Operations already has a much easier way to embed PowerApps through a few clicks which automates the iFrame configuration step above.  Fingers crossed this is on the roadmap for future releases of Dynamics 365 Customer Engagement.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s