How to embed a Canvas app into a CE form, pass the record id and update the CE record.
The requirement: Allow a CE user to update marketing consent and to provide guidance and logic around the process, this app is the basis for the latter.
Solution: This could be achieved using a custom webpage, or possibly a Dialog (deprecated soon), but the latest recommended approach is to use a canvas app embedded within CE, so here are the steps to achieve this;
Note: this screenshot/app was to prove the process works so has some random fields in it, ultimately there would be a lot more to it with extra logic.
- Create the connection to D365
- Browse to https://web.powerapps.com/environments/ then [Data], then [Connections], then [New Connection]
- Select [Dynamics 365], login with your credentials and hit [Create]
- Browse to Apps and Create a new blank Canvas app
- Insert a new Form (Edit)
- Select [Data Source] and Add new, select your connection to D365 from earlier
- Choose the appropriate D365 environment
- Select the [Accounts] table and [Connect]
- This will add some fields to the Form for you and is where you can select the ones you want/don’t want, format them/rename them, change the colours etc.
- The blue header/footers in my example is a [Label], white text, blue background, the colour code is #3B79B7 which matches the CE UI theme
- Rename the Form in the left panel from Form1 to [AccountForm]
- Next, you need to update Form to take an input parameter with the ID of the CE record which we will pass in further on, on the Form, select [Advanced], then [Item] and enter
- LookUp(Accounts, accountid= Param(“ID”))
- Next insert an Icon – [Check] so that we can Submit the changed data back to CE, go into Advanced on the Icon and Update the OnSelect to;
- Save and Publish the app
- It should now look something like this, depending on the field types you select, I added a footer with the CE ID value displayed to check what was passed through.
- Browse to https://web.powerapps.com/environments/ then Select [Apps] from the left menu
- Click on the ellipsis of the App, and make a note of the Web Link from the [Details] Tab. It will look like this – https://web.powerapps.com/apps/<AppID> make a note of this APPID for the steps below.
- Next is the CE components, add a new HTML Webresource and paste in the following code replacing the <AppId> with the one you recorded previously.
- Set the width and height to your App sizes, taken from the App settings page.
- Open the [Account] entity form, Add a new Tab, Insert a new Web Resource onto it, select the web resource that you created in the previous step and set the following parameters;
- Display Label on Form= false
- Number of rows = adjust depending on the size of the App
- Scrolling = As necessary
- Display Border = false
- Save and Publish
- It should look like this once it’s finished