Microsoft Articles

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.

  1. Create the connection to D365
  2. Browse to Apps and Create a new blank Canvas app
  3. Insert a new Form (Edit)
  4. Select [Data Source] and Add new, select your connection to D365 from earlier
  5. Choose the appropriate D365 environment
  6. 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]

  1. 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”))
  2. 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;
    • SubmitForm(AccountForm)
  3. Save and Publish the app
  4. 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.

  1. Browse to https://web.powerapps.com/environments/ then Select [Apps] from the left menu

  1. 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.
  2. 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.

  1. 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
  2. Save and Publish
  3. It should look like this once it’s finished

 

Avatar

4

peter@bournemouth.ws


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.