Model-driven apps – Data first approach – more for backend end user with full form experience.

Canvas Apps – Design first approach – more for the field users with a mobile experience with simple to use and easily accessible apps being designed to serve specific purpose.

Traditionally these have been aligned as Model-driven apps for web experience with full support for pro-dev extensions and Canvas Apps for citizen developers to design using low-code expression language now branded as Power Fx.

Custom pages is the next big step in the journey to unify the app experience and enable the developers and designer to combine the best of both worlds to give a seamless user experience to the end users without they having to worry about the technology being used and wait a second… they do not have to worry about the licensing as well.

Read here, canvas apps designed as pages do not count towards app limits.

With one of the earlier updates, we are allowed to embed Canvas apps within a model-driven form. But with Custom pages we will now be able to take advantage of Canvas app designers to build quick ui solutions that we can surface within model driven apps as;

1.  Standalone pages in sitemap – app navigation in the new app designer now supports adding Custom Page to navigation.
2. Call them from the context of a form through client api like a popup dialog from a ribbon button on a form or home grid as an example.

Let us have a quick look at each of these options.

Standalone page in App navigation:

To add a custom page, we need to go through the new app designer experience that is currently in preview and choose the Custom option.

Next either choose an existing page if you have already designed one or create a new one.

Note: Since it talks Canvas apps I thought “use an existing custom page” would show me a list of all my existing canvas apps from my previous work and allow me to quickly add one of those and get going… BUT canvas apps are not custom pages – custom page is a new component type though it uses Canvas designer for designing it is not a canvas app and it won’t even be listed as an APP in your app listing.

Currently there seems no way to use existing canvas apps as is in this screen here. Check out the recommended way shared by the product team to get them migrated.

If you would like to include this as a standalone page in sitemap then check Show in navigation. Once you click Add, the very familiar Canvas App Designer shows up for you to go ahead and build your app.

For this exercise I added a gallery component with Contacts listed in there.

With very minimal effort, we are now able to add visually appealing listing with images. Before Custom pages, this would perhaps have to be a Power Apps Component Framework Control requiring substantial efforts to develop.

Save and publish this app from the canvas designer and click back to navigate back to the app designer to see this added to the navigation.

Make sure to publish the App to see the preview for the page.

And that is all it takes to converge a canvas app with a model driven app!

Have a look at your solution and you will see this listed as a Page and not a Canvas App.

Calling a custom page from a ribbon button

Note, you need to first have a page component created. You now have the option of adding a new page in the Add new option within a solution.

For this example, we will create an unbound screen to accept notification types from the user as shown below:

These controls have simply been arranged on the canvas. No further code is added to any control here.

Now let us modify the text for the record label to instead show the name of the record that this button was invoked for.

In the App -> OnStart event type the following code:

Set(RecordId, Param(“recordId”));
Set (selectedRecord, LookUp(Accounts, Account = GUID(RecordId)));
Notify(RecordId);

Param(“recordId”) is a parameter that we will pass to this page when invoking it from the ribbon button from model driven app. This will be the recordId of the selected record from the home grid.

LookUp(Accounts, Account = GUID(RecordId))
Here we search for an account in the database with same recordid as the parameter received.

Now modify the text property of the record label added to the canvas to show the name of the account retrieved using the recordId passed as parameter.

With this, page design is complete, let us save and publish this page and return to the solution explorer.

Note: Make sure to also publish the app each time you edit the page, I noticed the page throws an error until the app is published and then you re-open the app editor.

Go back to App designer and show the Edit in preview option to use the new designer interface.

Choose edit command bar for the account entity.

Here, choose main grid that’s where we will add the button.

Add + New Command.

 Since we would like this button to show up only when one record from the grid is selected we write Power Fx expression in the Visible property as shown above.

Next to show the page on the click of the button, we need to call a javascript function. Choose Run JavaScript for the Action property and select the javascript library with the code.

Type in the function name to execute from the library and in our case, we also pass the parameter which is id of selected records from the grid.

Here is what the showCanvas function looks like;

function showCanvas(id)
{
alert(“in here”);
alert(“text ” + id);

//set the pageType as custom, to call a custom page that we just created
// name is the logical name of the page you can pick this up from solution explorer

var pageInput = {
pageType: “custom”,
name: “rooh_querydialog_bd7bb”,
entityName: “account”,
recordId: id
};

//target = 2 is for dialog
//position = 1 is for center dialog
var navigationOptions = {
target: 2,
position: 1,
title: “Notification”
};

Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success() {
// Run code on success
alert(“loaded”);
},
function error() {
// Handle errors
alert(“error”);
})

}

Here is where you can pick up the logical name of the page you just created.

It doesn’t allow you to copy the name so be careful when typing out the name.

Save and publish the command bar and click Play to preview.

Note that while we can pass context information as parameters from the model driven app to the custom page, we are not able to pass any information back to the model driven app from the custom page. In the above example, there isn’t a way to return information of the selection made by the user on the custom page.

Alternate method could certainly be to update a field of the record using the Patch() from within the custom page on the OK or Cancel button click.

Being a canvas app, you can now also invoke a flow from the buttons on the custom page to process the selection further.

Conclusion: Custom pages would certainly help with many of the UI scenarios that have traditionally required developing custom web resources or pcf controls and with license considerations out of the picture, it would make adoption of this one a lot easier.

Please visit the Source and support them

The post Custom Pages: A step towards disappearing lines between Canvas Apps and Model Driven Apps in Power Platform / Dynamics 365 CRM appeared first on Microsoft Dynamics 365 Blog.

It is well-known that Power Automate is a low-code, no-code solution to automation with various triggers that it supports including Event driven, HTTP request, Timer/Scheduled and Manual flows.

Manual/Button flows help in designing powerful Canvas Apps that can offload complex logic executions to flow while focusing on user experience of the app. In this article we will discuss an example to call a flow and pass user inputs received in Canvas Apps to the flow – have the logic execute there and return resulting value to the Canvas Apps for display.

In this example, we have a canvas app that accepts requested meeting time, the app then calls the flow to check availability for the said time, if the time slot is unavailable, it will return false to app to notify the user accordingly.

I have shared the key settings to achieve this by using Case entity from Dynamics 365 CRM. A quick design of the entry form is given below:

Note the customer field when placed on form does not show up the field on Canvas for data entry. Lookup fields are not currently supported. Here is how I got this to work:

Select the Data card created for Customer when you include that field on the form from tree view and then choose Insert Drop Down.

Set the properties of the drop-down as shown below:

Items = Sort(Accounts,’Account Name’) – This will show the list of accounts sorted by name.

With the Customer_DataCard3 still selected in the tree view add a Label and set the name to ‘Customer’.

With this done, we now get the drop down of accounts listed. However, the value selected in the drop-down will not be submitted as the value for Customer Card and therefore will not be saved in database when we submit the form.

To be able to edit the property to the Card, we need to first Unlock it by clicking on lock icon.

Next, we edit the Update property of card to set the value as Dropdown1.Selected as shown below:

With this done, any change in the value of dropdown will bind the selected value to the customer property.

Next let’s work on designing the Power Automate Flow that need to call to check availability.

For this, choose the OnSelect property of Request button and choose Action à Power Automate to bring up the following screen.

As we do not have our flow already designed, we choose ‘Create a new flow’ which navigates us to the flow designer.

Type PowerApps in the connector search bar and select the PowerApps trigger.

This would be the trigger to be used to invoke the flow from Canvas Apps. Do note that only flows that are based on PowerApps trigger would show up in the Power Automate action list for selection.

Here is a screenshot of a very simple flow designed for this blog.

In order to generate a parameter for the flow, choose the ‘Ask in PowerApps’ option from Dynamic content. This will auto generate a parameter for you for the base time field as shown below.

In order to return a value back to the calling App use the action ‘Respond to a PowerApp or flow’.

Now set the value you need to return. Define the data type that you want to return by clicking on ‘Add an output’.

Note that you could return more than one value back to the calling App. It is received in the calling app in the form of a record with each output parameter name as a field in that record.

Save the flow and now let’s move back to the canvas app to call this in our app.

On the Request button in canvas app, we pass the date value selected in the First Response By field and send it to the flow as a parameter for evaluating availability. The flow returns a Boolean value based on its evaluation.

Set the following on the OnSelect property of Request button.

Set(Available, ‘PowerApp->Performanunboundaction,RespondtoaPowerApporflow’.Run(‘First Response By_DataCard1’.Update));If(Available.result,SubmitForm(Form1);NewForm(Form1), Notify(“Invalid date entered”));

Using Set() function we are storing the return value from the Flow to the variable named Available.

‘PowerApp->Performanunboundaction,RespondtoaPowerApporflow’.Run(‘First Response By_DataCard1’.Update))

In the above statement, we make a call to the Power Automate Flow and pass the value of the First Response By field.

Notice, we access the output parameter returned from flow as

Available.result – where result is name of the output parameter defined.

This now completes the canvas app, and you are ready to test it by entering values in the app.

Notes:

1. Begin designing the canvas app and flow from within the context of a solution
2. Work with the Common Data Service (Current) connector.
3. When Perform Unbound Action action is added, we are unable to invoke the flow from the Canvas Apps, this problem could be solved using Child Flows!!

Conclusion

In this way, we would be able to design a Canvas App (no-code) and have the business logic execute written as a Custom Action (pro-dev) by using a (no-code/low-code) Flow – The no-cliff solution to building powerful apps.

Please visit the Source and support them

The post Interacting with Power Automate Flows from Power Apps – Canvas Apps appeared first on Microsoft Dynamics 365 Blog.

In the previous blog, we obtained the response from the Relevance Search API request through Power Automate Flow. In this blog, we will use that response in the Canvas app. We will see how we can leverage the potential of Relevance search in the Canvas app.

If you are not familiar with how to create Canvas app then you can refer the following article,

https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/get-started-test-drive

Let us start with creating a new canvas app,

• Sign in to https://make.powerapps.com and create a new Canvas app.

• As we are going to create Canvas app for Dynamics 365 app, we will select the Common Data Service Phone Layout,

• In the next screen, we will first add the connection then add the table.

• This will create a canvas app with default Browse, Detail and Edit screen. As we are going to work with Contact and lead, we added the screens for Lead and Contact.

• We will now add a new screen for the Relevance Search, like shown below

• We will call Power Automate Flow that we have created in the previous blog upon OnSelect of the Search button and upon OnChange of the textbox.

We will use below expression OnSelect of the button and on OnChange of the textbox.

This expression will run the ‘RelevanceSearchAPIFlow’ and will pass the text entered in the TextBox. After successful run, it will store the response in the Collection called “SearchCollection”.

• Save and run the App. Enter some text in the Textbox and either click enter or click on the Search Button. In the background, a Power Automate Flow should run successfully and response should get stored in the ‘SearchCollection’ collection.

• To check the collection, click on View -> Collections

You should see the response added in the collection.

• Now we will use this collection to bind to the List control. Select the List control and add the below expression to the Items property,

Here we are assigning non-empty items from the SearchCollection collection to the List control.

• After this, select the List control and add below expression OnSelect property of the control.

Here we are extracting and setting the GUID of the record that we have in the collection to the ‘SelectedItemID’ variable.

• We will now bind the record values to the list item. Select the first label and add below expression,

Here we are binding the primary field value of the record.

Similarly, select the second label and add below expression,

Here we are binding the Entity logical name to understand the entity type of the record,

• Select the ‘NextArrow’ button and add below expression upon OnSelect property,

Here we are first setting the GUID of the record to the SelectedItemID variable and then switching the Detail screen based on the Entity logical name. For example, if the entity is Contact, we are navigating the screen to DetailsScreenContact_1 and if the entity is lead, we are navigating to the DetailsScreenLead_1 screen.

• Now select the Detail screen where we will see the details of the record. Add below expression to Item property of the DetailScreen,

This expression is for the contact screen,

Similarly, add expression for other details screen,

This expression is for the Lead screen,

• Here we have setup the detail screens of lead and contact to show up the record details on click of the Search Results item from Relevance Search Screen.

Relevance Search screen,

On click of the next arrow button, it will open the appropriate entity record.

• You can add entities that you need and you can add fields to show up in the detail screen or the search result.

This way we can execute the Relevance search API from Canvas App and represent the Search results using List control.

Conclusion

You can use the logic explained in this blog to add Relevance search into your Canvas app.

Below is the small clip of the working Relevance Search screen,

Please visit the Source and support them

The post Use Relevance Search API in Power Automate & Canvas App – Part 2 appeared first on Microsoft Dynamics 365 Blog.

Recently Microsoft has released the preview of the new horizontal and vertical container in the Canvas apps layout. While building the apps it is essential that apps are uniform and responsive within any type of device or different screen sizes for an optimized user experience. These layout containers improve the creation of responsive apps with less effort.

Let’s see how we can use this layout container in our apps.

To enable this feature:

1. Go to the respective app and navigate to the File > Settings > Advanced Settings > Enable Layout containers as shown below:

Note: The Horizontal and Vertical Container feature is in preview.

2. Also, make sure to disable the below setting and click on the Apply button:

Then, go to the Home screen > Insert > Layout > Horizontal container and add it to the canvas. This will add the blank layout on the canvas and we can add containers inside this layout.

Or, we also get three new screen templates as Split-screen, Sidebar / Header, Main Section, and Footer with the prebuilt responsive capabilities as shown in the below screenshot. To get the screen template, go to New Screen, select the required screen, and add it to the canvas.

For instance, I have selected the Sidebar screen, it will automatically add multiple containers on the canvas. I have designed my app by adding the Account entity as a data source. When we select any container, it opens the Properties window where we get the options to properly align the controls.

So whenever we resize the browser, the app automatically gets aligned according to the size. See the below screenshot for reference:

Conclusion

Using these new horizontal and vertical containers in the Canvas apps layout, users can create responsive apps to ensure a great user experience.

Please visit the Source and support them

The post How to Build Responsive Canvas Apps appeared first on Microsoft Dynamics 365 Blog.

To enable please follow the steps given below:

• First, click on File in Canvas App.
• Then go to Settings >Upcoming features.
• Then go to Enhanced component properties and enable it.

Once you enable the “Enhanced component properties”, we will be able to see the Behavior property when we add new custom property from the customer properties section as shown below:

As to achieve our requirement to show message to sale rep when they select appointment date to reconfirm appointment date; we have added a custom property with name changeDate of type as Behavior.

To send the selected appointment date, we added parameter to behavior custom property.

After clicking on New parameter, the below window opened where we mentioned name and data type.

Next, select the date control from a component that we created and pass custom behavior property with parameter in onChange event to appointment date control.

Finally when we select the component, we will see the “changeDate” along with “OnReset” event. To show the message then select “changeDate” and define notify function as shown below:

When the sales rep opens the Canvas App and tries to book an appointment and select the appointment date then the message will be shown that you have selected an appointment date. For example “06/21/2021”.

Conclusion:

With help of Behavior property, we can create custom properties to achieve more functionalities.

Reference Source – https://powerapps.microsoft.com/es-es/blog/enhanced-component-properties/

Please visit the Source and support them

The post Behavior Properties in Canvas Power App appeared first on Microsoft Dynamics 365 Blog.