In this blog, we will walk you through how to integrate the Power BI Report with Canvas App. Microsoft has recently provided an integration of the Power BI report within the Canvas app, as the report will be handy for users working on the Mobile apps at Service Location.

Let’s consider a scenario, a Field Service Technician will work on the Work Order and generate the Work Order Report, and this report needs to be integrated within Canvas app.

We will need to follow the steps below to achieve this requirement.

Step 1: Navigate to the Power BI Service at https://app.powerbi.com and make sure you have Power BI Dashboard added to the Power BI workspace.

Below is a screenshot of the same.

Step 2: Now develop a Canvas app to embed this Power BI Report. Navigate to https://make.powerapps.com and, within the appropriate environment, create a Canvas app.

Step 3: Insert Power BI Tile on the screen as shown in the below screenshot.

Step 4: Now we need to choose the below setting to enable Power BI Report.

• Workspace: Select Power BI Workspace you created, in this case, we selected Power BI Workspace.
• Dashboard: Select the Power BI Dashboard, in this case, we selected Work Order Inspection.
• Tile: Select the Report to be displayed on the Canvas app. For example, select Work Order Report.

Please refer to the below screenshot.

Step 5: Save the app and publish the changes. This will display the app with a report, as shown in the below screenshot.

Conclusion

We can use Power BI within Canvas app to have an analytical view of mobile applications along with other operations.

The post Power BI Integration with Canvas App in Microsoft Dynamics 365 CRM first appeared on Microsoft Dynamics 365 CRM Tips and Tricks.

Please go to Source and follow them

The post Power BI Integration with Canvas App in Microsoft Dynamics 365 CRM appeared first on Microsoft Dynamics 365 Blog.

Currently everyone want mobile app for doing any work. To build a mobile app in Dynamics 365 CRM the Canvas App is the better option. Canvas App is a no-code/low code business app where you can design the app by dragging and dropping elements onto a canvas. To automate any process Power Automate is used. So to combine capabilities of Canvas app and Power Auotmate big is a advantage as it enables to build any app with rich functionalities.

Recently in Canvas app, the feature to show Power Automate pane so that we can easily access and use Power Automate in Canvas app was introtuced. In order to show Power Automate we need to first enable it from settings.

To enable Power Automate pane click on Settings from top menu. A window will open, in that select “Upcoming features” option from left navigation and then go to “Enable Power Automate pane” as shown below:

Once it is enabled the following message is displayed.

After the app is reopened, go to Action tab and then click on Power Automate. It will now open the Power Automate pane as shown below:

Using this new Power Automate pane we can easily create new flow and add existing flow to Canvas app and get overview of Power Automate.

To add Power Automate into Canvas app Click on “Add Flow”. Once we click on it then it will open the below window with list of Power Automate flows. Here, select the Power Automate flow that is to be added in Canvas app. If we wanted to create new flow then click on “Create new flow” button.

Also it will give overview of all Power Automate flows that was added to Canvas app. From here, we can easily navigate to the respective flows and edit it.

Conclusion

In this way, by using Power Automate pane we can easily and quickly perform action related to Power Automate.

Please Follow the Source

The post Power Automate pane in Canvas App appeared first on Microsoft Dynamics 365 Blog.

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.

While Model Driven apps allow for drag and drop interface for form design, they still do have a strict layout and you cannot really place controls wherever you want. This is where Canvas Apps come in handy where you can go ahead and design canvas apps.

These canvas apps can then be embedded or referenced within the other Power Platform family of applications like the Model Driven Apps, Portals and even within Power BI Dashboards.

Note: Though the app can be embedded in a variety of applications, the logged-in user should have appropriate Power Apps License assigned to them for the canvas to appear for them.

If they are not already logged in with appropriate user account that has license assigned to them, they will see the Sign-in screen instead of the app.

Canvas Apps with Model Driven Apps

Canvas Apps can be embedded within Model Driven Apps as PCF controls.

To add a canvas app, the first step would be to place a text field on the form.

Next add a control to this field and choose Canvas app.

Make sure to set this as the control to be used in web, phone and tablet view.

In the properties click customize to auto-create a canvas app that has the reference of the record passed over for use within the app.

Using ModelDrivenFormIntegration we now have access and reference to the parent record within which the canvas app has been embedded.

The datasource is set to [@Accounts], I had embedded this within an account form and the source of all the controls on the form is tied to this as well.

Adding a gallery here to show contact images.

And now when you navigate to your record in model driven app, you can see it shows the related contact images.

Any changes you make to the data in the model driven form is auto reflected in the canvas. Change the city and it would show the updated value in the canvas.

You can also communicate with the model driven form. Read more here.

Canvas Apps within Power BI Report

Canvas Apps now show up as a component that can be directly added to a Power BI report. For this example, I created a canvas app of the My Open Opportunities View.

Using the My Open Opportunities View ensures that the security roles are honored and the logged in user only sees the opportunities that they have access to, without requiring any additional code.

Once saved, we could now embed this within Power BI Report. You now have PowerApps as a component that could be added directly.

After adding the component, you need to add the data fields that would be the source data for your canvas app

Once added, you could create a new Power App from here. Doing so will provide you with the PowerBI contextual information similar to the one we had in case of embedding it in Model driven apps.

Once done save and publish and when you move back to Power BI report, you have the app displayed in there.

Canvas Apps within Power Apps Portal

Any canvas app can be accessed through a public facing app url that can be found in the app details screen.

Right click on your canvas app in the app listing at https://make.powerapps.com and choose Details.

You can set the url of an IFRAME to the url provided in the Web Link to have the canvas app display there.

https://apps.powerapps.com/play/[AppID]?source=iframe

You can pass parameters within the url and this could be used with the app to provide contextual information.

https://apps.powerapps.com/play/[AppID]?source=iframe&id=10&city=redmond

The canvas app could read the parameter values and incorporate it in the logic to perhaps read related data.

And when invoking the app by passing a parameter of region=Mumbai, it results in:

This way you could build efficient Canvas Apps and just reuse them across various applications!

To share the app with your users on Microsoft Teams read the next part here.

Please go to Source and follow them

The post Embedding Canvas Apps within Model Driven Apps, Power Apps Portal, Power BI and Custom Websites appeared first on Microsoft Dynamics 365 Blog.