Perform actions on the host model-driven form from embedded canvas app using ModelDrivenFormIntegration control in Dynamics 365

Let us continue our previous example of embedding the canvas app within the model-driven app and extend it to perform actions on the host form using ModelDrivenFormIntegration control.

This ModelDrivenFormIntegration control acts as a bridge and brings the contextual data from the host model-driven form to the embedded canvas app.

Here we will look at some of the pre-defined actions that can be performed using the ModelDrivenFormIntegration Control.

For this update our existing Canvas App and add the below buttons to the Form control in the canvas app

  • Save Form

For the Save Form button, first, create the flow (Power Automate) which will update the record.

https://nishantrana.me/2019/11/04/step-by-step-calling-flow-from-powerapps-dynamics-365-ce-crm/

 

Below we are calling the Flow from Save Form button and passing GUID of the record along with values of name, city and phone field.

Here we have used ModelDrivenFormIntegration’s Item property to retrieve the id of the account record in our formula that is being used to call the Flow (Power Automate)

Result

updating the address 1 city field by appending text “Redmond” in the embedded canvas app.

save

  • Refresh Form

The true and false parameter value of the RefershForm method specifies whether to show prompt or not before saving any unsaved data on the host form.


Result

refreshing the form, shows the address 1 city field of the form in the right section with the appended text “Redmond” as saved earlier.

refresh

  • Navigate to Main Form

NavigateToMainForm method’s parameters are entity name, form name, record id.


Result

Here we are opening the same record.

navigatemain

  • Navigate to View

NavigateToView method’s parameters are entity name and view name.


Result

Opens the view specified in the parameter

NavigateToView

  • Open Quick Create Form

NavigateToView method’s parameter is entity name.


Result

Opens the quick create form of the entity specified in the parameter.

Get all the details here 

Hope it helps..

Embedding a canvas app on a model-driven app in Dynamics 365

Let us start with some of the key points about the embedded canvas app

  • The embedded canvas app is now generally available. During preview.
  • The embedded canvas app supported sub grid control in preview, which is now no longer available.
  • The canvas app custom control is only supported for the Unified Interface Web client type. It doesn’t support Phone and Tablet client types.
  • We can only have 1 canvas app on the form. We can have multiple embedded canvas app but only 1 of them could be enabled.
  • It is recommended to have an embedded canvas app on a required field else it will not refresh on any change in the data on the host model-driven form.
  • The embedded app can only be created from the host model-driven form.
  • The existing canvas app cannot be used as an embedded canvas app.

To create the canvas app custom control, select the controls tab in the Field Properties dialog, and click on Add Control.

Select Canvas app in App Control dialog.

  • The Canvas app will have Web client selected as default and Phone and Tablet option will be greyed out.
  • Entity Name shows the name of the field that is associated with it.
  • App ID will be populated when the app is created.

Clicking on Customize opens the PowerApps Studio.

We can see the canvas app form control added to the canvas app.

We can see the fields for city, name, and phone already added to it.

ModelDrivenFormIntegration is a special control that is responsible for bringing the contextual data from the form to the embedded canvas app.

Using Edit Fields option, we can add, remove, edit, reorder the fields of the data source.

Just for the simplicity let us keep the app as it is.

Click on File à Save à The cloud (Save to PowerApps)

On a successful save, we can see the App ID generated.

Uncheck Display label on the form, save and publish the customization.

Changing the value in the Phone field in the form and saving the form changes the value inside the canvas app form control.

To Edit the canvas form control, we need to follow the same steps, open the field properties, controls tab and click on Customize

After making the changes inside PowerApps studio, save and publish the changes.

The other Dynamics CRM User say poweruser2 will get the below error message when they open the same form if the app is not shared with them.

The app can be shared with specific users, security groups or everyone within the organization. The users should have appropriate security roles to access the entities and also appropriate permissions on the cloud services that are being used as part of the canvas app.

There are no privileges specific to the canvas app within Dynamics 365 CE

To share the app, Navigate to File and select Share option

Here we searched for the user, made him Co-owner and assigned security roles which will give him access to Accounts entity.

We can see the embedded canvas app rendered properly in this case for the poweruser2

In this post, we covered some of the key points about the embedded canvas app along with steps to create, update and share it (although we just used the OOB generated app here),  I would recommend to check out the videos by Shane Young to learn about PowerApps and different scenarios that we could implement.

Hope it helps..

Step by Step – Calling Flow from PowerApps (Dynamics 365 CE/CRM)

Let us take a simple example of creating lead to understand how we can call Flow from PowerApps.

Log in to PowerApps Studio and create the form as below.

  • TextInput for entering the Last Name, First Name and Email ID.
  • Button to call Flow.
  • The label named GUID which will display the GUID of the created lead record.

Now select the button, go to Action menu and click on Flows to create a new flow.

Click on create a new flow.

Select Instant – from blank option

Select PowerApps as the trigger.

Add a new Step – Create a new Record (Dynamics 365)

To create a new record step, specify the Dynamics 365 Organization Name, select Leads as the entity name.

For the Last Name field, click Ask in PowerApps that will generate the parameter to which we will pass the value from our PowerApps.

The generated parameter.

Repeat the above step for the First Name and Email field.

*for Topic field we have passed a hardcoded value.

Save the create step and add a new step “Respond to a PowerApp or flow

Here we have selected output of type Text

We have added the output parameter as varLeadId and selected leadid as the unique identifier.

Save the Flow and navigate back to PowerApp and select the flow created for our button.

After adding the Flow, the next step is to update the formula to send the field’s value to the flow and also to receive the output from it.

Below will be our formula to pass the text to the flow.

But as we are expecting the GUID in return, we need to update it.

We are using the Set function to set the variable varResponseFromFlow with varleadid output.

Also, we have updated the label field for GUID with the variable

Now let us save the changes and run the PowerApp.

On clicking the button, we can see the GUID updated on the label on the form.

Back in our Dynamics 365 CE, we can see the lead created.

Thus we saw how easy it is to write a PowerApp which interacts with Dynamic 365 CE using Flow. We took a very basic example to understand how things glue, but we can clearly see the potential here to implement complex real-world scenarios with ease.

Hope it helps..

Using PCF Custom Control Builder (XrmToolBox Plugin) to update existing control in Dynamics 365 / PowerApps

A couple of months back I had written my first PCF Control to display GUID of the record, it was more of a hello world kind of thing.

https://pcf.gallery/guid-control/

Well, the code was using Xrm.Page client API which as we know is deprecated.

So, it was time to update it to use context instead.

More on context

So, thought of using the wonderful PCF Custom Control Builder tool to do that by Danish (which got a new update today – 22- Oct-2019)

Connect to the organization, select Edit existing PCF Control option

Specify the Control Location and VS Command Prompt Location (VsDevCmd.bat)

And click on Reload Details which will list down the details of the component and the solution as shown above.

Click on Open in VS Code to open the project in Visual Studio Code and start making the required update.

It opens the project in Visual Studio Code.

i.e.

Here let us update the index.ts file to use context to fetch the GUID.

Save the changes. And click on Build

i.e.

Now click on Test to see it in action or to debug.

We can see it populating the GUID

To debug it à we can use the developer tools (F12) and put the breakpoint in the index.ts file.

Now let us deploy it to our organization

Deployment in action

After successful deployment, we can see the solution added to our organization

Now let us use it for the single line of the text control.

Publish the changes.

Create the new lead record and we can see the GUID of the record created in the control

Thus, the wonderful PCF Custom Control Builder plugin of XrmToolBox makes it so easy to update the existing PCF Control and also to create new PCF Control.

Hope it helps..

Out of preview – New Model-Driven form designer (WYSIWYG) in PowerApps

Finally the new model-driven designer is out of preview and available for general use

https://powerapps.microsoft.com/en-us/blog/announcing-the-general-availability-of-the-new-model-driven-form-designer/

Since I wrote about it last the few changes that we can see are

  •  New Field button that allows adding Lookup Fields. However I still don’t see the option of Option Set fields there.

Form

  • Grouping of Components Section

Form

  • Preview for the components

Form

Looking forward to see all the remaining features that are part of our classic Form Designer like addition of Business Rules, Show Dependencies, Enable Security Roles etc. to be part of the new designer.

Below are the previous blog posts that I wrote about the new model driven apps while it was still in preview –

https://nishantrana.me/2019/08/19/subgrid-quickview-linear-gauge-arc-knob-linear-slider-controls-added-in-new-model-driven-form-designer-wysiwyg-in-powerapps/

https://nishantrana.me/2019/08/05/sub-grid-added-to-the-new-model-driven-form-designer-wysisyg-in-powerapps/

https://nishantrana.me/2019/05/27/few-improvements-in-new-model-driven-form-designer-wysisyg-preview-in-powerapps/

https://nishantrana.me/2018/12/24/the-new-model-driven-form-designer-wysisyg-in-powerapps-for-model-driven-apps-dynamics-365-ce-preview/

Hope it helps..

Subgrid, QuickView, Linear Gauge, Arc Knob, Linear Slider controls added in new model-driven form designer (WYSIWYG) in PowerApps

Recently we were trying out the model-driven form designer and noticed the option of adding new input control to the form in it.


Few days back only I wrote about the addition of Subgrid control, however the limitation was that we couldn’t add new subgrid control. But with the new updates, we can now add new subgrid control along with Quick View and other controls also as shown below.

The other option to configure these controls is from the Controls tab of the field properties dialog box.

https://docs.microsoft.com/en-us/dynamics365/customer-engagement/customize/use-custom-controls-data-visualizations

Hope it helps..

Sub-Grid added to the new model-driven form designer (WYSISYG) in PowerApps

Hi,

Microsoft is steadily adding all the essential features to the new model-driven form designer (preview) making it more and more usable and intuitive.

Latest addition is the support for sub-grid as shown below

The properties window for the sub-grid

`

We can select the view from either the related entities or view from any of the un-related entity (uncheck Related Records check box).

Similarly, we can enable view selectors and can show all the views or selected view as shown below.

We still can’t add new sub-grid to the form in the new form designer, for that we still need to go back to our classic form designer.

Check out below articles for more details –

https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/form-designer-overview

The new model-driven form designer WYSISYG Editor

Few improvements in the new model-driven form designer.

Hope it helps..