Archive

Posts Tagged ‘Canvas App’

[Beginners] Canvas Apps | Options to store configuration data

February 6, 2023 Leave a comment

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

October 21, 2022 Leave a comment

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.

🙂

Categories: PowerApps Tags: ,

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.
  • 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.

🙂

Categories: PowerApps Tags: , ,

Canvas App Import Failure | CanvasAppEnvironmentMismatch error

February 9, 2021 Leave a comment

We configured a new Dynamics Instance copied from another Instance using ‘Customizations and schema only’ option.

While importing a solution with a Canvas App, the solution import failed with CanvasAppEnvironmentMismatch error

CanvasApp import: FAILURE: Code: CanvasAppEnvironmentMismatch Message: The specified app ‘xxx-xx-xxxx-xx’ belongs to the environment ‘xxx-xx-xxxx-xx’ and not ‘xxx-xx-xxxx-xx’ which is the environment associated to instance ‘xxx-xx-xxxx-xx’

Its a strange because, the Instance is a copied one and there were no Canvas Apps exist, when checked in the PowerApps Portal -> Apps tab.

Reason:

  • Even though the PowerApps portal not showing up any Apps, when queried the ‘Canvasapps’ Data Verse entity using oData URL, there were Canvas App records pointing to a different Instance (i.e., The Source Instance which the current instance copied from).
    • Copy the name of the App from json collection. We would need it in next steps.
  • Solution import failed because of the matching Canvas App entry pointing to a different Instance in ‘Canvasapps’ entity.

Fix:

  • Write a C# console and delete the entry in ‘Canvasapps’ entity.
  • Following is the sample code.
 var queryCanvasApps = new QueryExpression("canvasapp")
                {
                    ColumnSet = new ColumnSet(true)
                };

                var filter = new FilterExpression(LogicalOperator.And);
                var cond1 = new ConditionExpression("name", ConditionOperator.Equal, "{App_Name copied in above section}");

                filter.Conditions.Add(cond1);
                queryCanvasApps.Criteria = filter;

                var apps = CrmService.RetrieveMultiple(queryCanvasApps);

                foreach (var app in apps.Entities)
                {
                    //Delete the App entry
                    CrmService.Delete("canvasapp", app.Id);
                }
  • Post deletion, reimport the solution and it should work.

🙂

[Step by Step] Debug Model Driven and Canvas Apps using ‘Monitor’ tool

January 26, 2021 Leave a comment

Monitor tool overview

Using Monitor tool,

  • Makers of canvas apps can view events while building a new app or to monitor published apps.
  • Makers of model-driven apps can monitor page navigation, command executions, form-related issues, and other major actions.

Using Monitor with Model Driven App

Lets see step by step to use Monitor with Model Driven App.

  • Connect to Power Apps Portal.
  • Select the Model Driven App from either from ‘Apps’ tab or from ‘Solutions’ and select the ‘Monitor’ option from Command bar.
  • A new Monitor session opens up as below in a browser tab.
  • Click on ‘Play model-driven app’ to start the diagnosis.
  • After the app is opened from Monitor, you’ll see a Join monitor debug session? dialog box. Select Join.
  • A notification shows up to denote monitor is in progress.
  • While you navigate through the Model driven app, events begin to flow to the Monitor session screen.
  • You can also ‘Invite’ other to monitor the session.
Events monitored

Following are few events we can track in Monitor tool.

  • FullLoad : Signifies the complete load of a page navigation, such as an edit form load. This event waits for certain network requests to complete and all rendering to finish, so the form can be ready before FullLoad completes.
  • Network : Reveal details about each request made from the app.
  • Page navigation, command executions, form saves, and other major actions will send key performance indicators and network events to Monitor.
  • Script errors: Monitor receives events from the app with more details about the script errors, so you can debug more quickly, and easily.

Using Monitor with Canvas App

Using Monitor, we can trace events as they occur in a canvas app during the build, or we can use Monitor to debug the published version of a canvas app.

Monitor Canvas app during the build
  • Open the Canvas app using ‘Edit’ option.
  • From the ‘Advanced Tools’, select Monitor -> Open monitor.
  • A new browser tab opens Monitor screen and connects it to your existing Power Apps Studio session. A notification appears as “Studio Session”, which denotes its Canvas app during build.
  • Run the ‘Canvas’ app and you would see the events logged as below.
Monitor Published Canvas app
  • Select the App and select ‘Monitor’ Or, you can select More Commands (), and then select Monitor.
  • A new browser tab opens Monitor screen. Click on ‘Play published app’.
  • This action opens the published app in a new browser tab and connects it to your current Monitor session.
  • You would notice a banner and record kind of icon at the top.
  • To view the source expressions in Monitor for the published app, you need to turn on the setting to publish the expressions with the app. 

Notes:

  • You can run a model-driven app and add “&monitor=true” to the end of the URL in the browser. Then, select Monitor on the command bar to start a monitoring session in a new tab.

🙂

[Step by Step] Canvas App | Dataverse | Filter, Patch, For All, Lookup

January 3, 2021 2 comments

In this article, lets understand the Filter, Patch, For All and more functions and formulas using following ‘Car and Customer’ scenario. I will be using Dataverse formerly CDS as Data Source.

  • Create a ‘Manufacturer’ table to store Car manufactures.
  • Use OOB ‘Contact’ table to store Customers.
  • Create a ‘Cars’ table to store Cars.
    • Configure ‘Contact’ and ‘Manufacturer’ look ups in ‘Cars’ table.

Lets proceed first by understanding ‘Data Model’ and then with creating ‘Canvas’ App.

Dataverse Data Model:

  • ‘Cars’ form with ‘Manufacturer’ and ‘Customers’ look up.
  • ‘Cars’ view.

Configuring Canvas App

Lets build the Canvas App, with following features:

  • Add “Manufacturers”, “Cars” and “Contact” (i.e., Customer) Data Sources.
  • Add ‘combManufacture’ Combo box to show ‘Active’ Manufacturers.
    • Select ‘Data source’ as ‘Manufacturers’.
    • Select ‘Active Manufacturers’ from the ‘Views’.
  • Add ‘combCustomers‘ Combo box to show ‘Active’ Customers (i.e., Contacts).
    • Select ‘Data source’ as ‘Contacts’.
    • Select ‘Active Contacts’ from the ‘Views’.
  • Filter the ‘Cars’ by selected ‘Manufacturer’ and set to ‘collCars’ collection variable.
    • Formula : ClearCollect(collCars,Filter(Cars,Manufacturer.Manufacturer=combManufacture.Selected.Manufacturer));
  • Add ‘galCars’ Gallery control and select the ‘Data Source’ as the collection variable from previous step.
  • In the Gallery, add a ‘Checkbox’ control to enable selection and a Label to show the ‘Customer’.
  • On check of ‘Checkbox’ add the selected ‘Car’ to ‘selCars’ collection variable, using ‘OnCheck’ event.
    • Formula : Collect(selCars, ThisItem);
  • On uncheck of ‘Checkbox’ remove the selected ‘Car’ from ‘selCars’ collection variable, using ‘OnUncheck’ event.
    • Formula: Remove(selCars, ThisItem);
  • Add ‘Set Owner’ button to map the selected Cars and Customer.
    • First move the selected ‘Cars’ from ‘selCars’ collection to ‘tempCollection‘ by renaming ‘Primary’ column to “ID” using RenameColumns function.
    • Use ForAll function to loop through ‘tempCollection‘ (i.e., Selected Cars) and update the ‘Contact’ lookup with ‘combCustomers‘ selected record using Patch function.
    • Reset the Cars Gallery(i.e., Reset(galCars)) to refresh.
    • Display the message using Notify function.
    • Clear the collection variables.
    • Formula: ClearCollect(tempCollection,RenameColumns(selCars,”crbb8_carid”,”ID”));ForAll(tempCollection,Patch(Cars,LookUp(Cars,Car=ID),{Contact:combCustomers.Selected}));Reset(galCars);Notify(“Update Successful..”,NotificationType.Success);Clear(tempCollection);Clear(selCars);
  • Add ‘Clear Owner’ button to unmap the selected Cars and Customer.
    • To unmap the Customer with Car, clear ‘Contact’ look up by setting ‘Blank()’ function (i.e., {Contact:Blank()}).
    • Use ‘For All’ and ‘Patch’ functions as above to update the record.
    • Formula : ClearCollect(tempCollection,RenameColumns(selCars,”crbb8_carid”,”ID”));ForAll(tempCollection,Patch(Cars,LookUp(Cars,Car=ID),{Contact:Blank()}));Reset(galCars);Notify(“Update Successful..”,NotificationType.Success);
  • Now run the App and you should see screen as below.

Refer this article for PowerApps functions and formulas.

🙂

Categories: PowerApps Tags: , ,

Canvas App -Working with Bing Maps connector

In this article lets understand the basics of ‘Bing Maps‘ connector to locate the addresses in Canvas App.

Prerequisites:

  • Subscribe to Dynamics 30 days trial and get Office 365 account.
  • Connect to Power Apps maker portal using Office 365 account to build the Canvas App.
  • Bing Map API Key

How to get Bing Map API Key:

  • Connect to Bing Maps Portal
  • ‘Sign In’ using either ‘Microsoft Account’ or ‘Enterprise Azure Active Directory account’.

bm_1

  • Go to ‘My account -> My Keys’ and create a new key. (Steps to create new key)
  • Copy the Key which we gonna use in next steps.

bm_2

Adding ‘Bing Maps’ connector to Canvas App:

  • Create a new Canvas App.
  • Add a ‘Bing Maps’ connector.
  • Provide the ‘API Key’ captured previously.

bm_3

Locate address using ‘Bings Maps’ connector:

  • For better understanding, I added below controls to my Canvas app’s screen.
    • 3 Text box controls to capture address
    • An Image control which loads the map
    • A Button to load the map.
  • On Button ‘OnSelect’, Declare a global variable ‘varAddress‘ and use BingMaps.GetLocationByAddress API to convert the address to coordinates (i.e., Latitude and Longitude).
    • Set(
      varAddress,
      BingMaps.GetLocationByAddress(
      {
      addressLine: txtAddress1.Text,
      locality: txtAddress2.Text,
      postalCode: txtZip.Text
      }
      )
      );

bm_4

  • Now use the coordinates from ‘varAddress‘ variable and load the map in Image control.
  • Set ‘Image’ property to BingMaps.GetMap() by setting coordinates from ‘varAddress’.
    • BingMaps.GetMap(
      “AerialWithLabels”,
      15,
      varAddress.point.coordinates.latitude,
      varAddress.point.coordinates.longitude)

bm_5

  • Run the App and you should see the address located in Map.

bm_6

  • You can also show a ‘Push Pin’ using ‘pushpin’ property. You need to pass coordinates as below.
    • BingMaps.GetMap(
      “AerialWithLabels”,
      15,
      varAddress.point.coordinates.latitude,
      varAddress.point.coordinates.longitude,{pushpin:varAddress.point.coordinates.latitude&”,”&varAddress.point.coordinates.longitude}
      )

bm_7

🙂

Categories: PowerApps Tags: , ,

Power Apps – ‘Environment Variables’ and their usage in Canvas Apps

February 18, 2020 Leave a comment

Lets take a scenario, where you would want to pass a 3rd party API URL to your plug-in which changes every quarter. Couple of options to pass the URL to plug-in are either pass the URL as ‘Secured/Unsecured parameters’ or Create an entity and store the API URL and fetch from plug-in using Query Expression.

Using ‘Environment variables’, which is Power Apps preview feature currently, we can configure the input parameters allow management of data separately compared to hard-coding values.

Up on creating ‘Environment variable’, a new record gets added to both OOB ‘Environment Variable Definition’ entity and ‘Environment Variable Values’ entities.

‘Environment Variable Values’ is child to the ‘Environment Variable Definition’ entity.

We can refer records from these OOB entities in plug-ins or Canvas Apps or Power Automate just like any other entities.

In this article, lets see how to create ‘Environment Variables’ and use them in Canvas App.

Prerequisites:

  • Subscribe to 30 days trial and get Office 365 account.
  • Connect to Power Apps maker portal using Office 365 account.

Create a new ‘Environment variable’:

  • From Power Apps maker portal go to ‘Solutions’ tab.
  • Either create a new solution/Open Existing solution.
  • From ribbon, click on New -> Environment variable
    • In the ‘New environment variable’ pane, provide ‘Display Name’ and choose ‘Data Type’.
    • Provide either ‘Default Value’ or ‘Current Value’

EV_1

  • Save. I’ve created a ‘Text’ variable with an environment URL as ‘Current Value’.

EV_2

  • I’ve configured a Model driven app with ‘Environment Variable Definition’ entity added to the ‘Site Map’ to check the created ‘Environment variable’ record.

EV_3

  • Open the Model driven app and go to ‘Environment Variable Definition’ and you will see the record.

EV_4

Using ‘Environment variable’ in Canvas app:

As the ‘Environment variable’ stores in ‘Environment Variable Definition’ and ‘Environment Variable Values’ entities, we can add these entities from ‘Data sources’.

  • Create a new Canvas App.
  • Add ‘Environment Variable Definitions’ and ‘Environment Variable Values’ entities as Data sources.

EV_6

  • Add a Label to display the ‘Environment variable’ value.
  • Use ‘LookUp’ function to get the specific ‘Environment variable’ filtered by ‘Display Name’.
    • LookUp(‘Environment Variable Values’,’Environment Variable Definition’.’Display Name’=”AppURL”).Value
    • In the above formula, ‘AppURL’ is my ‘Environment Variable’ display name.
  • The value would be fetched and set to the Label text.

EV_7

Managing ‘Environment variables’:

  • Environment variables can be created and managed through the modern solution interface or by using code.
  • A separate JSON file is created within your solution package for the values, which can also be managed in source control and modified in a build pipeline.
  • When you export the solution, a json file ‘environment_variable_values’ will be available.

EV_8

  • Open the file and the ‘Environment Variables’ render as json records.

EV_9

  • Export to and import from Excel is also supported.

🙂