Archive
Canvas App | Add Copilot control
In this article, lets learn how to configure and use Copilot control in Canvas Studio.
What is AI Copilot (Preview):
- Copilot brings AI-powered experience for app users to get insights about the data in their apps through conversation in natural language.
- With Copilot you can build an app, including the data behind it, just by describing what you need through multiple steps of conversation.
Enable Copilot component in Canvas App studio:
Since its a preview feature, we first need to enable the feature.
- On the command bar, select Settings > Upcoming features.
- From the Preview tab, set the toggle for Copilot component to On.
- Once you enable, you should see the ‘Copilot (preview)’ control in the ‘Insert’ .
Configuring and using the Copilot component:
- Add the Copilot control to the form.
- Copilot control requires a data source to be chosen.
- Currently, only a single Dataverse table can be selected for the Copilot control. I’ve selected ‘Users’ table.
- Adjust the height and width of the control.
- Select the specific Fields and/or View that the Copilot control will answer questions for.
- We can also set the ‘Title’, ‘Data summary’ and ‘Placeholder text’ properties.
- Play the App and post your questions in a natural language.
🙂
Power Apps Studio | Authoring Version
Have you ever encountered a scenario where the most recent features are absent from your PowerApps Studio when developing a Canvas App?
The most possible reason for missing features is that “Power Apps is not available in all regions at once. Instead, each version is made available incrementally in different regions of the world”.
For example, I was looking for ‘AllItemsCount’ property of Gallery control which was introduced in 3.23051 version. If your Power Apps studio is on lower version, you would not get that property.
In this article, let’s explore ‘Authoring Version’, which determine the features accessible within the studio.
How do you know which version you are on?
- From your Canvas app, click on ‘Settings’.
- Under ‘Support’ tab, you will find the ‘Authoring Version’ section.
- To change the version, click on ‘Edit’ and choose the version you would want to go with.
- Click on ‘Reload + apply version’.
How to get list of features or fixes part of the version:
- You can find all Power Apps release versions from here.
- To get Power Apps Studio specific release versions, click here.
- Click on version link as highlighted below to know about features or fixes released part of the version.
- For example, clicking on 3.23051 link will take you to following screen.
🙂
Canvas App | Power automate | Read and preview Dataverse ‘File’ column content
In this article, I am going demonstrate how to read and preview the text content of Dataverse ‘File’ column by using Canvas App and Power automate flow.
Scenario:
To explain the read and previewing the Dataverse file column, I’ve taken following scenario.
Note : Approach in this article only works for plain text files but not for Doc,Docx,Pdf file types.
- Create a table ‘Preview Files’ in Dataverse
- Add a ‘File’ column by name ‘Preview Attachment‘ to upload text files.
- Build a Canvas App, to show the ‘Preview File’ records in a gallery and on selection of a record, read the content of the ‘Preview Attachment’ column’s file and display.
In this article, I will focus more on Power Automate side of things on how the flow can be used to retrieve the file content and pass it back to Canvas App. Lets get started.
Steps to create Canvas App:
I will not be explaining steps to create Canvas app from scratch. For our scenario, at the high-level.
- Create a new Canvas App and add a Vertical Gallery control by name galPreviewFiles.
- Add ‘Preview Files’ Dataverse table as Datasource of the galPreviewFiles.
- Add a Text Label control to show the preview of File content.
- Canvas App looks as below.
Steps to build Power automate flow to fetch the Dataverse file content:
As we will be triggering flow from Canvas app by passing parameters back and forth, create a new flow from Canvas app studio by
- From Canvas App studio, create a new flow from blank as shown below.
- In the flow editor, add Initialize a variable control and name it as ‘varPreviewFileId’.
- In the ‘Name’ parameter, provide name as previewField and in the ‘Value’ parameter, select ‘Ask in PowerApps’.
- From Canvas App we will pass the selected Preview Files table’s record id.
- We need ‘previewField ‘ variable to capture the passed id from the Canvas app.
- In the ‘Name’ parameter, provide name as previewField and in the ‘Value’ parameter, select ‘Ask in PowerApps’.
- Next add Download a file or an image control to download the content of ‘Preview Attachment‘ file column of the ‘Preview Files‘ table.
- Set ‘Row ID’ as previewField.
- Set ‘Column name’ as ‘Preview Attachment‘, which is the file column of the ‘Preview Files‘ Dataverse table.
- Download a file or an image control provides the Response as below.
- Response contains ‘$content-type’ and ‘$content’ parameters.
- ‘$content’ contains the Base64 format of ‘Preview Attachment‘ file column content.
- So in the next step, we need to convert the ‘$content’ value from Base64 to plain text.
- Add Compose action and in the ‘inputs’ parameter write following formula using base64ToString expression.
- base64ToString(outputs(‘DownloadPreviewFileAttachment’)?[‘body’]?[‘$content’])
- Here DownloadPreviewFileAttachment is the name of Download a file or an image control added in previous step.
- That’s it, we have the logic to read the ‘Preview Attachment‘ file column content and convert to string.
- As a last step, we will pass the ‘Preview Attachment‘ file column content back to Canvas app.
- Add Respond to a PowerApp or flow control to send the response back to Canvas app.
- Add an output parameter by name ‘FileContent’ and in the Value select the Outputs of ‘fileContent’ compose action added in previous step.
- Provide the name of the flow.
- I have named my flow as FetchDataverseFileColumn.
- Save the flow.
Trigger flow from Canvas App:
Now that we have Canvas App and Cloud flow, we simply need to trigger the flow from Canvas App.
- Use following formula to fetch the file content of selected galPreviewFiles gallery control item.
- Note that, I have a button ‘btnPreview’ in my galPreviewFiles gallery control. So I am triggering formula on ‘OnSelect’ of ‘btnPreview’ button.
UpdateContext({fileContent: FetchDataverseFileColumn.Run(galPreviewFiles.Selected.'Preview File').filecontent});
- In the formula,
- I am calling FetchDataverseFileColumn.Run() to call the FetchDataverseFileColumn flow and also passing the galPreviewFiles selected record’s Id.
- Capturing the Output of the FetchDataverseFileColumn flow in to fileContent variable.
- Set the fileContent variable to the Text Label control.
That’s all. Save and Publish your Canvas app.
Disclaimer :
- As mentioned in the Notes, approach in this article only works for plain text files but not for Doc,Docx,Pdf file types.
- Purpose of this article is to make aware of calling flows from Canvas app and usage of Download a file or an image control.
🙂
[Step by Step] Create and call Global Custom API from Canvas App using Power Automate with Error Handling
In this article, lets learn how to create a Custom API and trigger using Power Automate Cloud Flow along with Error Handling from a Canvas App.
What is a Custom API:
- Using Custom APIs we can create our own APIs in Dataverse.
- We can consolidate one or more operations into a Custom API which can called from either code or from Power Automate.
- For example, you can create a Custom API called “OnBoardNewCustomer’, where you can have following operations.
- Create a new ‘Account’ record.
- Create a new ‘Appointment’ record scheduled a week from now.
- Send an Email notification.
Now lets get started with Custom API creation. I am going to use ‘Onboard Customer’ scenario to explain the Custom API creation. I will be using 2 operation in my Custom API.
- Create an Account record by reading ‘Name’ as input parameter.
- Create an Appointment record for the newly created Account and schedule at 7 days from now.
Create a Custom API:
There are several ways you can create a custom API documented here. In this article, I will be taking 2 step approach.
- Write a C# plugin class file with logic and register using Plugin Registration Tool (PRT).
- Create a Custom API using forms from Power Apps Maker portal and link the plugin created in previous step.
Steps to create Custom API in plugin class and register using PRT:
- Open Visual Studio and create a plug-in project as detailed in this document here.
- Add an .snk file to the project.
- Create a new plugin class file with logic to create Account and Customer.
- Final code in the class file looks as below.
public void Execute(IServiceProvider serviceProvider)
{
var context = (IPluginExecutionContext)serviceProvider.GetService(typeof(IPluginExecutionContext));
if (context.MessageName.Equals("cat_onboardcustomer") && context.Stage.Equals(30))
{
try
{
// Read the input parameter
string inputParamCustomerName = (string)context.InputParameters["cat_customername"];
if (!string.IsNullOrEmpty(inputParamCustomerName))
{
IOrganizationServiceFactory serviceFactory = (IOrganizationServiceFactory)serviceProvider.GetService(typeof(IOrganizationServiceFactory));
IOrganizationService service = serviceFactory.CreateOrganizationService(context.UserId);
// Create Account Record
var entAccount = new Entity("account");
entAccount["name"] = inputParamCustomerName;
var accountId = service.Create(entAccount);
// Create Appointment Record
var entAppointment = new Entity("appointment");
entAppointment["subject"] = $"Meeting with Customer {inputParamCustomerName}";
// Set the start and end times for the entAppointment 7 days fro now
entAppointment["scheduledstart"] = DateTime.Now.AddDays(7).AddHours(1);
entAppointment["scheduledend"] = DateTime.Now.AddDays(7).AddHours(2);
// Set the related account for the entAppointment
entAppointment["regardingobjectid"] = new EntityReference("account", accountId);
var appointmentId = service.Create(entAppointment);
}
}
catch (Exception ex)
{
throw new InvalidPluginExecutionException("An error occurred in cat_onboardcustomer.", ex);
}
}
}
- Build the project and register the plugin assembly using PRT.
- Post registration it should look as below from PRT.
Now that we completed the step 1 of creating and registering plug-in class file. Lets proceed with step 2 where we will create a Custom API entry.
Create a Custom API using forms from Power Apps Maker portal:
- Connect to Power Apps maker portal.
- Create a new solution or open any existing solution.
- Click on New -> More -> Other -> Custom API
- It opens up a new ‘Custom API’ form and fill the details.
- To understand the columns in depth, refer here.
- What is important for this example are:
- Unique Name : Unique name for the custom API. (Its cat_onboardcustomer we used in our plug-in class)
- Name : The primary name of the custom API.
- Plugin Type : Plugin we registered in previous section.
- Save and Close.
- As we need to pass a parameter to our ‘Custom API’, next add a new ‘Custom API Request Parameter’.
- Fill the details by selecting ‘Custom API’ we created in previous step and ‘Unique Name’ as cat_customername, which we used in our plugin class.
- Save and Close.
With this we successfully created ‘Custom API’ along with an input parameter. Lets see how to trigger API using Power Automate Cloud Flow from a Canvas App.
Steps to trigger Custom API from Canvas App:
- Create a new Canvas App.
- Go to Flows tab and click on ‘Create new flow’ and choose ‘Create from blank’.
- In the flow designer, add ‘Initialize Variable’ action and rename to ‘varCustomerName’. In the ‘Value’ select ‘Ask in PowerApps’.
- Next add Dataverse ‘Perform an unbound action‘ action which helps us to trigger our ‘Global’ custom API.
- Select ‘Action Name’ as our Custom API name cat_onboardcustomer
- In the cat_customername pass ‘Customer Name’ which was the variable declared in above step.
- If you dont want exception handling, you can save the flow which can trigger the cat_onboardcustomer.
Exception Handling:
Lets learn a basic error handling. Please note that you can use ‘Scope’ for more complex scenarios but for basic exception handling following process should suffice.
- Add another ‘Initialize Variable’ action and rename it to ‘varExceptionDetails’ and set Type as ‘String’.
- Rename the ‘Perform an unbound action’ to ‘InvokeOnboardAPI’
- Add a ‘Set Variable’ action ‘setExceptionDetails’ to capture the exception.
- Select the Name as ‘ExceptionDetails‘ and click on ‘Configure run after’. (This is needed as we want this ‘setExceptionDetails’ to execute even the above ‘InvokeOnboardAPI’ action fails or timeout.
- Select following options.
- In the ‘Value’ select ‘Expression’ and paste following expression.
- actions(‘InvokeOnboardAPI’)?[‘outputs’]?[‘body’]?[‘error’]
- Finally to send the response from flow to Canvas app, add ‘Respond to a PowerApp of flow’ action and click on ‘Configure run after’, select following options and click ‘Done’.
- and define an output variable OnboardflowResponse and set the value as ExceptionDetails.
- Save the flow and you should see the flow in your Canvas App.
- To trigger the flow, add a button to the screen and OnSelect write following formula.
Notify("Triggering User Onboard...");
UpdateContext({ResponseOnBoardFlow: CustomerOnboardFlow.Run("Rajeev Pentyala").onboardflowresponse});
If(
ResponseOnBoardFlow = "Success",
Notify("Customer onboarded successfully."),
Notify("Error while onboarding. Details - " & ResponseOnBoardFlow)
)
- Run the App and click the button.
- Open Dataverse and you should see the new Account and Appointment records. You can also check the flow run history.
🙂
[Quick Tip] Canvas App | Add Emojis
Do you know that we can add Emojis to the controls and screens text properties in Canvas Apps. In this quick tip article lets learn how to add Emojis.
Adding Emojis:
- We can add Emoji to the ‘App name’ of the App. While creating a new Canvas App, in the ‘App name’, press Windows Key (🪟) + Dot (.) and pick the Emoji you wish and proceed with creation.
- On the screen, add a Label control and in the ‘Text’ property you can add Emojis simply by hitting Windows Key (🪟) + Dot (.) .
- Play the App and you should see as below.
🙂
[Beginners] Canvas Apps | Options to store configuration data
While building Canvas apps, its pretty common ask to store the configuration data or a Dictionary of key and value pairs. As an example, you might be sending an email from Canvas App and you would want the sender email DL (Distribution List) to be configurable. Think of these settings like an ASP.NET web.config file.
In this article, lets see what are the options to store configuration data.
Creating a hidden configuration screen :
An easy way of setting configuration values is just to create a hidden screen and put your configuration values in text input controls. In this way, you can change application settings without editing code.
- Create a ‘Settings Screen’ and make it as the last screen, so that it’s easily found.
- I’ve create a simple ‘Settings Screen’ with a text input control ‘txtEmailDL‘.
- We will restrict the ‘Settings Screen’ screen to the end users by making sure no logic/formula on the App takes Users to this screen. This way the screen accessible only when the app is edited, and Makers or Admin can go to this screen and configure values.
- Now, lets see how to read the configuration data and use it across the App.
- I’ve created a flow which expects ‘EmailDL’ parameter from the Canvas App.
- On my Canvas Apps ‘Main’ screen, I’ve a button which triggers the flow by passing the Email DL value. Here I am reading the txtEmailDL control value from my ‘Settings Screen’ and pass it to the flow.
- This way yo can read the txtEmailDL control value from ‘Settings Screen’ across all the screens of Canvas application.
Drawbacks of this approach:
- You must republish the app to change values and make them persist.
- Because values persist in the app, you must create a process that updates these values before you export the app in preparation for a move to another environment.
Store the configuration data in external source (Dataverse):
Keep in mind that Dataverse requires a premium connector and since you are using Dataverse you will need a premium license. To use this approach:
- Create a new Dataverse table to store configuration values. Because the values persist outside the app, they can be modified at any time without redeploying the app.
- As an example, create a table with a custom ‘Data’ column and keep configuration settings required for your Canvas app in json format.
- Every time you open Canvas App, read the configuration from Dataverse.
Drawbacks of this approach:
- This approach requires a call-back to Dataverse connector evertytime you open the Canvas Apps. Therefore, there will be a slight effect on performance.
Hope you got some beginner understanding of how to store configuration data and consume in Canvas Apps. If you are a beginner, I highly recommend go through coding standards.
🙂
Canvas App not updating post managed solution import
I’ve 2 environments Dev and Test. On my Dev I’ve built a Canvas App and deployed on Test environment by moving a Managed Solution.
Off late the Canvas App was not updating/refreshing post solution movement from Dev to Test.
Reason and Fix:
- There were changes directly made to the Canvas app on Test environment which created an unmanaged layer. This unmanaged layer will show in priority of any of the managed layers below.
- Hence the changes from Dev to Test via Managed solution is not reflecting on Test environment.
- To fix the issue, we need to delete the ‘unmanaged layer’ from Test environment.
- On your Test environment, open the Managed solution which has the Canvas App.
- Select the Canvas App and choose Advanced -> See solution layers.
- Select the ‘Unmanaged layer’ and click on ‘Remove active customizations’ button.
- Click on ‘Delete’ from the pop-up.
- Note: Removing active unmanaged customizations can’t be reversed or undone. All data associated with the unmanaged customization can be lost.
- Refresh and open the Canvas App and you should the latest changes part of your Managed solution.
Refer Solution Layers for more details.
Canvas App | Open msapp file with the new menu options
Assume that someone shared you a canvas app (i.e., .msapp file) and you would want to open the .msapp file in Canvas studio.
With the new menu options steps to open a .msapp file changed a bit. There is no ‘File’ tab option to open the .msapp file as shown below.
Lets see how to open an .msapp file with new menu options.
Steps to open .msapp file:
- Connect to Power Apps maker portal.
- Create a new Canvas app by selecting ‘Home -> Blank app’.
- Follow the steps shown below.
🙂
Canvas App | Edge Browser | Quick way to test the Apps Responsiveness
Its imperative to test the Canvas App’s responsiveness and on different devices to make sure the layout is responsive and intuitive. In this article, lets see how to test your Canvas App in different device orientations.
Steps to test the Canvas Apps Responsiveness:
- Open the App in Edge browser.
- Press F12 to open the ‘Dev Tools’ Pane.
- From ‘DevTools’ pane, click on ‘Toggle device emulator’ icon (Highlighted in screen below)
- Now you have the options to test the responsiveness using ‘Responsive’ option.
- Or pick any of the device option form the list. Use the ‘Rotate’ option, to test in Landscape orientation.
🙂
Canvas App | Display and Download large data sets of Images from Azure Blob Container with no delegation issues
In one of my previous articles, I detailed the steps to embed a Canvas app with upload image to Azure Blob feature.
In this article lets see, how to work with large data sets and achieve following:
- Displaying blob images in Gallery.
- Ability to Download the image.
Pre-requisites:
- Azure Storage Account and Container. Get free Azure subscription here
- Dynamics 365 account. Get 30 days trail here
Set up Azure Storage Account and Container
- Connect to your Azure portal.
- Create a new Storage Account and capture the Storage Account ‘Name’ and ‘Access Key’.
- I’ve named Storage Account name as ‘expmar’
- Create a new Container and copy the Name.
- I named my Container as ’employee’.
- Upload few images, which will be used to display in Canvas App.
Steps to create Canvas App and Connect to Azure Blob
Create Azure Blob Storage Connection:
- Connect to Power Apps Portal using your Dynamics 365 account.
- To connect to Azure Storage Account from Canvas App, we need a new ‘Azure Blob Storage’ Connection.
- Click on ‘Data -> Connections -> Azure Blob Storage’ and provide Azure Storage Account ‘Name’ and ‘Access Key’ captured in previous section and click ‘Create’.
- Up on successful creation, you should see the ‘Azure Blob Storage’ under ‘Connections’.
Steps to Create Canvas App and display blob images
- Create a new Canvas App.
- Add the ‘Azure Blob Storage’ connection created in previous step to the Canvas App from ‘Data -> Add a connection’.
- As we established connection to Azure Storage Account, next, connect to ‘Container’ (i.e., Employee) and read the images to a List.
- Use following formula on App’s ‘On Start’ event.
- This formula, reads the images from ’employee’ Container and store the images in ’employeePhotos’ Collection.
- Now we have the images in ’employeePhotos’ Collection, add a Gallery control and bind to ’employeePhotos’ Collection.
- To display images, In the Gallery, add an ‘Image’ control and in the ‘Image’ property add following formula.
- To display image name, add a ‘Label’ control and set Text as ‘ThisItem.DisplayName’.
- To check whether images are rendering click on ‘App -> Run OnStart’ and you should see the images upload to Azure Blob Container in the Gallery.
Steps to Build Download feature
- To download an image from Azure Container, we would need following 2 values:
- URL : Azure Storage Account URL.
- URL format would be “https://{Storage Account Name}.blob.core.windows.net“
- In my case, its “https://expmar.blob.core.windows.net”
- SasToken (Shared access signature Token):
- Generate the ‘Shared access signature’ as below from Azure portal.
- URL : Azure Storage Account URL.
- Set ‘URL’ to ‘bloburl’ and ‘Token’ to ‘sastoken’ variables ‘OnStart’ of the App.
- Complete ‘OnStart’ formula looks as below.
- Add a ‘Download’ icon to the Gallery.
- On ‘OnSelect’, use ‘Download(bloburl & ThisItem.Path & sastoken)’ formula.
Test the App
- Run the App and you should see Images and ‘Download’ icon as below.
- Click on ‘Download’ icon and image should get downloaded.
🙂