The user experience of Dynamics 365 can be hindered by its model-driven nature, in that only one record type can be edited at a time from a single page. Say, for example, you’ve just had a phone call with a client about a sales opportunity. The client also tells you that they have moved offices. You now want to update the Account and Opportunity records in Dynamics 365 and this is going to involve opening two different records. Wouldn’t it be nice if you could do it in one?
Expanding on my previous blog, I am going to explain how you can use PowerApps embedded in Dynamics 365 to give users the ability to edit different related records from a single page. In this example I will enable the Primary Contact to be editable from its Parent Account record.
Configure the Embedded PowerApp
The high level process for embedding this type of app inside Dynamics 365 is as follows.
- Create a canvas PowerApp connected to your Dynamics 365 data source.
- Set up the PowerApp to accept an input parameter which is the Account Id and display the data of the account’s Primary Contact.
- Get the PowerApp URL.
- Add an iFrame control to the Account form in Dynamics 365 and set the URL to be the PowerApp URL.
Build the PowerApp
- Create a new PowerApp using a blank canvas and the tablet layout.
The tablet layout is crucial as it enables you to customize the size of the app. PowerApps currently do not include Responsive Design so you need to consider the size of your screen. Easier said than done in a world where screen sizes differ so much. Responsive Design is on the roadmap but no release date yet. Please vote for Responsive Design here.
2. In App Settings, set the size of your app to fit your screen and space where you want it to be embedded into Dynamics 365. In this example I’ve got a 20 inch screen and I want the app to sit in the right hand column of the Account screen – this works out to be about 495px wide.
3. Add data to your PowerApp by connecting to your Dynamics 365 connection and selecting the Contact and Account entities.
4. Add an Edit Form control to your screen and connect it to the Contacts data source.
5. Add, remove and arrange the Contact fields that you wish to display and be edited through your PowerApp.
6. On the Edit Form set the Item value to be…
LookUp(Contacts,Lower(_parentcustomerid_value) = Lower(Param("id")))
This formula enables the PowerApp to access the account record’s ID and then lookup the corresponding Primary Contact.
7. Add a Save icon to the form and set OnSelect to be…
This enables the data to be saved back to Dynamics 365 once saved.
8. Save the PowerApp. You have configured a functioning app ready for embedding into Dynamics 365 (although it is very ugly!).
Embed in Dynamics 365
- Create the PowerApp URL for embedding into Dynamics 365 using the instructions here.
2. In Dynamics 365, open the Account form editor and add a new iFrame control.
3. Set the URL to the PowerApp URL and make sure you tick the Pass record object-type code and unique identifiers as parameters box so that the Account’s ID will be passed to the PowerApp. Also extend the number of rows for the iFrame control on the Formatting tab.
4. Publish your changes in Dynamics 365 and test it out!
A More Finished Product
Go back to your PowerApp and add some styling to make it look like Dynamics 365 and you can get something that looks seamless like this…
The embedded canvas PowerApp is not perfect and you need to consider some limitations before implementing.
Saving records in Dynamics 365 is done automatically and the user does not need to do anything. This is not the same in canvas PowerApps. You will have noticed that I added a Save button to the PowerApp to save the data back to the database. This is not a great user experience and you’ll probably find that users forget to click it and lose data. An enhancement to the PowerApp to achieve the same auto-saving functionality would be a good idea.
As discussed above, the size of the app is important to consider based on the devices you are using and where you want to embed it in Dynamics 365. Hopefully this won’t be for too long and Microsoft will come to the party on this one soon.