Archive

Archive for the ‘PowerApps’ Category

Power Apps component framework (PCF) – Beginner guide

March 21, 2020 6 comments

Off late, I have been receiving lot of requests to explain the nitty-gritty of Power Apps component framework aka PCF.

While there are tons of great articles and videos on PCF are already available, I decided to provide comprehensive PCF beginner guide along with steps to reuse the pre-built controls.

Topics to be covered in this article:

  • What is PCF?
  • How we survived Pre-PCF era?
  • Pre-requisites
  • Understand the file structure of PCF control
  • Get familiar with commands
  • Build a simple PCF control.
  • Run and Debug in Browser
  • Packaging PCF control to a Solution
  • How to download and use the sample pcf controls
  • Add components to Model Driven App

Lets get started and dive in to the details.

What is PCF?

  • With PCF we can provide enhanced user experience for the users to work with data on forms, views, and dashboards.
  • For example, a basic ‘Whole Number’ field can be turned in to a Slider control where user can slide to set the value rather than typing.
  • Couple of important points consider
    • PCF works only on Unified Interface and not on the web client.
    • PCF doesn’t work for on-premises instances.

How we survived Pre-PCF era?

  • As mentioned in previous section, with PCF we can achieve the enhanced user experience.
  • Before PCF, with the help of HTML web resource we could enhance the user experience. As an example, we can build a ‘Slider’ control in HTML page with .css and add as Web Resources to the form.
  • How PCF different from web resources?
    • Unlike HTML web resources, PCF code components are rendered as a part of the same context, load at the same time as any other components, providing a seamless experience for the users.

Pre-requisites:

Now lets see the pre-requisites to build our first PCF control.

  • Microsoft Power Apps CLI
    • Power Apps CLI enables developers to create code components quickly.
    • Download form here

PCF_1

  • Get TypeScript
    • PCF component uses TypeScript language. We need to get TypeScript before we get in to development.
    • Getting TypeScript is 2 step process.

Understand the file structure of PCF control:

Before we build our first PCF control, lets understand the structure of PCF component.

  • PCF components consist of three elements:
    • Manifest
      • Manifest is the XML metadata (i.e., Name, Properties, etc..) file that defines a PCF control.
    • Component implementation
      • Implementation is nothing but building your control using the TypeScript.
      • Each code component must have a index.ts file.
      • index.ts file contain following methods
        • init (Required) – When the Dynamics form is ready, it initializes the PCF component by calling the init method.
        • updateView (Required) – If the data changes, platform calls out the updateView method.
        • getOutputs (Optional)
        • destroy (Required)
    • Resources
      • If the PCF control requires styling(i.e., CSS) it has to be added as Resource.
      • Resource file has to be defined in the Manifest.

Get familiar with commands:

We have to be familiar with Power Apps CLI commands before building our first control. All these commands need to be triggered from Visual Studio Command Prompt.

  • Initialization
    • This is the first command which creates basic folder structure of PCF control project.
    • Syntax:
      • pac pcf init –namespace <specify your namespace here> –name <Name of the code component> –template <component type>

        • –namespace: Unique namespace of your control.
        • –name: Name of the control. Below is the command to create a control by name ‘HelloWorld’
        • –template: Two types of components: field and dataset for model-driven apps. For canvas apps, only the field type
      • Ex – pac pcf init –namespace RajeevPCF –name HelloWorld –template field
  • Install Dependencies
    • Once ‘init’ sets up the basic folder, as a next step install all the PCF control dependencies using ‘npm install’ command.
    • Syntax:
      • npm install

    • Note: If you are wondering what is npm, it stands for ‘Node Package Manager’. As we installed ‘Node.js’ already as part of Pre-requisites we are able to use this now.
  • Build PCF Component
    • Once you implement the PCF component, build the code for any syntax errors.
    • Syntax:
      • npm run build

  • Solution – Init
    • Once we done with PCF component code implementation, we need to package in to a Solution which can be imported to your CDS instance.
    • ‘Init’ creates basic solution folder structure.
    • Syntax:
      • pac solution init –publisher-name <enter your publisher name> –publisher-prefix <enter your publisher prefix>

        • –publisher-name : Name of the solution Publisher.
        • –publisher-prefix : Solution prefix name.
      • Ex – pac solution init –publisher-name SamplePCF –publisher-prefix samppcf
  • Solution – Add-Reference
    • Solution – Init, creates a basic solution folder structure.
    •  To link the PCF component, to the Solution trigger ‘Add-Reference’ command.
    • Syntax:
      • pac solution add-reference –path <path to your Power Apps component framework project>

        • –path : Path of PCF component project folder.
      • Ex – pac solution add-reference –path “D:\E\Practice\PCF\Controls\HelloWorld”
  • Solution – Package
    • This is the final solution packaging step which generates zip file.
    • Syntax:
      • msbuild /t:build /restore
  • Run the PCF control in browser
    • Use ‘npm start’ command to open the PCF control in browser.
    • This helps to debug and test before we import the PCF control to CDS.
    • Syntax:
      • npm start

Build a simple PCF control:

As we installed Pre-requisites and familiarized with commands, lets start building our first PCF control.

  • Create 2 folders (i.e., Controls, Solutions) in your drive.
    • Note: You can only have a single folder but 2 folders gives me flexibility to manage.
  • Under ‘Controls’ folder, create a sub folder with your PCF control name.
  • Open the ‘Developer Command Prompt for VS 2017/2019’ and point to the ‘Controls -> PCF Control name’ folder. In my case, my PCF control folder name is ‘HelloWorld’.

PCF_2

  • Run the ‘init’ command.

PCF_4

  • As we know, ‘Init’ creates a basic folder structure, if you go to the folder, you would see following files.

PCF_5

  • Now run the ‘install’ command to add all dependencies.

PCF_6

  • If you go to the folder, you would see a new ‘node_modules’ folder.

PCF_8

  • Now open the project folder in either Visual Studio or Visual Studio Code.
    • If you are using ‘VS Code’ editor, trigger ‘code‘ command from ‘Command Prompt’ which auto opens the ‘VS Code’ editor.
  • If you glance the files from explorer, you would see ‘Manifest’ file (ControlManifest.Input.xml) with metadata.

PCF_11

  • Also ‘index.ts’ file, which contains 4 methods as described in above sections.

PCF_12

    • ‘context’ parameter in ‘index.ts’ file
      • Contains the context of the form similar to plugincontext in plug-ins.
      • ‘context.parameters’  fetches the PCF control parameter defined in Manifest file. ‘sampleProperty’ is the default property name of PCF control parameter defined in Manifest.
  • I’ve added the following simple logic in both ‘init’ and ‘updateView’ methods, which reads the field value from ‘context’ and display the value in HTML DIV control.

PCF_14

  • Once complete the implementation, build the project by triggering ‘npm run build‘ command.

PCF_13

Run and Debug in Browser:

  • If no errors during build, use ‘npm start‘ command to open the PCF control in browser.
  • This is a handy option which allows to debug locally in browser before ported to CDS.

PCF_9

  • npm start’ opens the PCF control in a new browser tab as below.

PCF_10

  • Use ‘F12’ to debug the functions (i.e., init, updateView, etc.).

Packaging PCF control to a Solution:

Now that we built and tested the PCF control, lets package it in to a solution which enables us to transport the PCF control to CDS which can be further used in Forms, Dashboards.

  • In the ‘Solution’ folder which has been created in above steps, create another sub folder for the PCF control. In my case, I named the folder as ‘PCF_HelloWorld’.
  • Open the ‘Developer Command Prompt for VS 2017/2019’ and point to the ‘Solutions -> PCF_HelloWorld’ folder.
  • Trigger ‘solution init‘ command which creates folder structure.

PCF_15

  • Trigger ‘solution add-reference‘ command, which links our PCF control with Solution.

PCF_17

  • Finally, trigger ‘msbuild‘ command to zip the components.

PCF_18

  • msbuild‘ creates ‘bin/Debug’ folder along with solution zip file.

PCF_19

  • Once we have the solution zip file, we are good to use the PCF control by importing to CDS. This is explained in coming sections.

How to download and use the sample pcf controls:

As we learnt how to build our own PCF control, lets see how to use the pre-built PCF controls. I am going to leverage increment-control to from sample components.

  • Open the link and scroll to the end. Click on ‘Download sample components’ link, which prompts you to download a zip folder contain all the sample controls.

PCF_24

  • Save the zip to drive, extract and copy to our ‘Controls’ folder which we created in previous sections. It looks something as below.

PCF_40

 

  • As we are going to use ‘TS_IncrementComponent’ control, we need to run the NPM commands to build and package ‘TS_IncrementComponent’ control to solution (i.e., zip file).
  • Open the ‘Developer Command Prompt for VS 2017/2019’ and point to the ‘Controls -> TS_IncrementComponent’ folder.
  • Note: We don’t need to run the ‘Init’ command as the folder structure is already formed from the download.
  • Run the ‘npm install‘ command to install all the required dependencies.

PCF_27

  • Note: We don’t need to run ‘build’ command as control was already built. So we can directly start solution packaging.
  • Create a new sub folder (i.e., ‘PCF_Increment’ is my folder name) under ‘Solutions’ folder and point the ”Developer Command Prompt for VS 2017/2019′ to this new folder.
  • Run ‘solution init’ command to start packaging.

PCF_28

  • Run ‘solution add-reference’ command to link PCF control to Solution.

PCF_29

  • Finally, run ‘msbuild’ command to create solution .zip folder.

PCF_30

  • Go to folder and you should see a new ‘bin/Debug’ folder as follow with the solution zip file.

PCF_31

  • As we got the solution zip file, lets see how to use the PCF control in our Dynamics forms.

Add components to Model Driven App

In this section, lets see how to transport the PCF control solution zip file created in above section to CDS.

PCF_31

Prerequisites:

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

Add PCF component solution to CDS:

  • To import the solution to CDS, first connect to the Power Apps maker portal
  • Go to ‘Solutions’ tab.
  • Click on ‘Import’ and browse the solution zip file (i.e., PCF_Increment.zip) and complete the import process.

PCF_33

  • Publish customizations.

Add PCF control to Entity:

As we imported ‘TS_IncrementComponent’ control, which works with ‘Whole Number’ field, create a ‘Whole Number’ field and configure the PCF control.

  • Create a new ‘Whole Number’ field in one of the entities.

PCF_35

  • Open the ‘Main’ customization form in legacy editor.
    • Note: At the time of writing this article, PCF controls can be configured only from legacy UI.
  • Click on field, go to ‘Controls’ tab and click on ‘Add Control…’.

PCF_36

  • Select the ‘IncrementControl’ from the list.

PCF_37

  • Save and Publish the form
  • Open the form in Model driven app and you should see the PCF control in the place of ‘Whole Number’ field as below.

PCF_38🙂

 

 

 

 

 

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: , ,

PL-900: Microsoft Power Platform Fundamentals – Prep Notes

February 25, 2020 Leave a comment

There was an ask form a Power Platform beginner in my blog about the preparation for the PL-900 exam.

As I attained the certification recently, I am going to share the topics I covered for my preparation in this article.

***This article is strictly for guidance purpose and by no means I intend to post the questions from the exam***

Areas I covered during my preparation:

  • Power Platform Environments
    • Types of Environments
    • Use of Default Environment
    • Built-in Roles – Admin Role, Maker Role
  • Canvas Apps vs Model Driven Apps
    • Understand that ‘Model Driven Apps’ can only consume CDS data.
    • You need Canvas app for other types of data.
  • Data Connectors
    • Tabular data and Functional-based data connectors
  • Power Automate Flow
    • How you post CDS data to SAP/Saleforce/etc
    • Integrate Flow with Canvas and Model Driven Apps.
    • How to test the Flow.
  • Power Apps Portals
    • Understand the basics of Web Page, Web Role, Web Templates.
  • AI Builder
    • Understand what you can achieve with the 4 models.

PL900_1

  • Power BI
    • Power BI Desktop vs Power BI Service : What can and can’t be done with each.
    • Data Modeling.
    • How to create and share Dashboards.

If any further questions or need guidance feel free to leave a comment.

🙂

 

Categories: CRM, PowerApps Tags:

Power Apps – Minimum privileges to run app

February 20, 2020 4 comments

To configure a security role with minimum privileges to run an app, a pre-packaged unmanaged solution is available in Microsoft download center and can be downloaded from here 

The solution contains a security role by name ‘min prv apps use‘.

MinPrivRole

Use ‘min prv apps use‘ security role as a reference and copy to a new role and configure additional privileges as per your business needs.

🙂

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.

🙂

 

 

 

PowerApps Portal – Enable Maintenance mode

February 13, 2020 Leave a comment

During a scheduled maintenance or due to a temporary outage, If you want to bring down your portal and display a proper message to users, PowerApps portal has “Enable Maintenance mode” option.

In this article lets see how to use ‘Enable Maintenance mode’ option.

Prerequisites:

  • Subscribe to 30 days trial and procure an Office 365 account.

Steps to navigate to Portals admin center:

  • Connect to Power Apps maker portal using Office 365 account.
  • Create a new PowerApps portal app, if you don’t have already.

PPortal_Maintainence_6

  • Now from the ‘Apps’ tab, select your portal and go to ‘Settings’.

PPortal_Maintainence_2

  • From the ‘Portal settings’ pane, click on ‘Administration’ link.

PPortal_Maintainence_1

  • You will be redirected to ‘PowerApps Portals admin center’.

PPortal_Maintainence_3

Enable/disable Maintenance mode:

  • Select ‘Portal Actions’ tab and click on ‘Enable maintenance mode’

PPortal_Maintainence_4

  • You get the ‘Enable maintenance mode’ popup.

PPortal_Maintainence_5

  • Under Select page to be used when maintenance mode is enabled: Select one of the following values:
    • Default page: Select this value if you want the default page to be displayed. By default, this option is selected.
    • Custom page: Select this value if you want a custom HTML page to be displayed.
      • Custom page URL: You must ensure that the page URL you provide is publicly accessible. 
  • I opted ‘Default page’ option and clicked on ‘Enable’.
  • If you browse the portal, you would get following screen:

PPortal_Maintainence_7

Notes:

  • When the maintenance mode is enabled, the customers are restricted from browsing any webpages except the <portal URL>/_services/about page.
  • If you opt for ‘Custom page’ option, make sure, the custom page you provided should not contain the x-frame-options:SAMEORIGIN response header, else the page will not load.

🙂

 

Power Platform – Pass external API collection from Power Automate to Canvas App

February 9, 2020 1 comment

In this article, lets see how to pass an external API’s json collection from Power Automate(Formerly ‘Microsoft Flow’) to a Canvas application.

For this example, I am going to use ESRI  mapping service API, in my Power Automate Flow. Refer here to know more about ESRI. You may also use other APIs as per your convenience.

ESRI API is url based and returns the ‘Address Suggestions’ in json format.

Flow_Json_3

Before we start lets make sure to meet all the prerequisites.

Prerequisites:

  • Subscribe to 30 days trial and get Office 365 account.
  • Connect to Power Automate portal using Office 365 account to build Power Automate flow.
  • Connect to Power Apps maker portal using Office 365 account to build the Canvas App.
  • ESRI api URL – Refer my previous article on the usage of ESRI or you can simply use this url

Once all prerequisites are met, here is the high level design:

  • Create a new Power Automate flow and call ESRI API to fetch Address Suggestions.
    • You can take any open API which returns json collection.
  • Parse the ESRI API Response to json collection.
  • Create a new Canvas app
  • Trigger Power automate flow from Canvas App and read the collection.

Lets get started.

Steps to configure the Power Automate Flow:

  • Connect to Power Automate portal
  • Create a new ‘Instant flow’ by selecting the right Environment.

Flow_Json_1

  • Provide a name ‘GetAddressSuggestions’ and select trigger as ‘PowerApps’

Flow_Json_2

  • To call ESRI api, add a new ‘HTTP’ action.

Flow_Json_4

  • Choose Method as ‘GET’ and in URI paste the ESRI url as mentioned in prerequisite section.

Flow_Json_5

  • Next, we need to parse the response from ESRI api. As the ESRI results would be in json format, add ‘Parse JSON’ action.

Flow_Json_6

  • In ‘Parse JSON’ action,
    • set Content as ‘Body’ from HTTP action.
    • Next we need to provide the json schema of ESRI response. To do that, click on ‘Generate from sample’.
    • Flow_Json_9
    • Now copy the response from ESRI API (Copy the browser’s output using ctrl+a+copy)
    • Flow_Json_7
    • Paste in the ‘Insert a sample JSON Payload’ window and click ‘Done’.
    • Flow_Json_8
    • If no warnings, your ‘Parse JSON’ pane should look as below.
    • Flow_Json_10
  • As we completed the ESRI response capture and parsing to json, now we need to pass the captured json response to Power App.
  • To pass the json response to Power App, add a new ‘Response’ action.

Flow_Json_11

  • In the ‘Response’ pane,
    • Set the ‘Body’ to ‘Body’ from ‘Parse JSON’.
    • Flow_Json_12
    • Expand ‘Show advanced options’ and click on ‘Generate from sample’.
    • Copy the response from ESRI API and paste in the ‘Insert a sample JSON Payload’ window and click ‘Done’. (Same step like we did in ‘Parse JSON’ pane).
    • ‘Response’ pane should look as below with no warnings.
    • Flow_Json_13
  • Run the flow and make sure it ran successfully.

Flow_Json_18

Steps to configure the Canvas App:

As we completed the Power Auto Flow, now its time to consume the Power Automate flow response from Canvas App by following the steps below

  • Connect to Power Apps maker portal using the same Office 365 account.
  • Create a new Canvas App.
    • Note: Make sure the same Environment used for Power Automate is selected.
  • Add a new button.
  • Select the button, from the ribbon menu, click on ‘Action -> Power Automate’.
  • From the pane select the ‘GetAddressSuggestions’ Power app flow.

Flow_Json_14

  • After few seconds, you would see the Run() command auto populated as below.

Flow_Json_15

  • As we going to get json collection from flow, lets capture the json collection to a collection variable ‘collAddress’ using ‘ClearCollect()’. Refer article to know more about ‘ClearCollect()’.
  • With the ClearCollect() and Run() functions, the final ‘OnSelect’ statement should look as below.

Flow_Json_16

  • Lets run the App and click on the button. Application takes couple of minutes to complete the run.

Flow_Json_17

  • Post run, check the collection returned from flow by going to ‘File -> Collections’ tab.

Flow_Json_19

  • You can also add a ‘Data table’ control and display the results returned from flow as below

Flow_Json_20

🙂

 

Power Platform – Pass json collection from Canvas App to Power Automate

February 9, 2020 1 comment

Refer my previous article for steps to pass json collection from Power Automate to Canvas App.

Now lets see how to pass json collection from a Canvas app to Power Automate flow.

Before we start lets make sure to meet all the prerequisites.

Prerequisites:

  • Subscribe to 30 days trial and get Office 365 account.
  • Connect to Power Automate portal using Office 365 account to build Power Automate flow.
  • Connect to Power Apps maker portal using Office 365 account to build the Canvas App.

Once all prerequisites are met, here is the high level design:

  • Create a new Canvas app.
  • Prepare a json collection.
  • Create a new Power Automate flow.
  • Trigger Power automate flow from Canvas App by passing the collection as parameter.
  • Read the json collection from Power Automate flow.
  • Create ‘Contact’ records in CDS.

Lets get started.

Steps to configure Canvas App:

  • Connect to Power Apps maker portal using the Office 365 account.
  • Create a new Canvas App.
    • Note: Make sure the same Environment used for Power Automate is selected.
  • Add a new button ‘Generate Sample Collection’.
  • On button’s ‘OnSelect’ prepare a json collection using ‘ClearCollect’ function as below.

Flow_Json_21

  • Once your run the App and click ‘Generate Sample Collection’ button, you should see the collection from ‘File -> Collections’ tab.

Flow_Json_22

Steps to configure the Power Automate Flow:

  • Connect to Power Automate portal using the same office 365 credentials used to connect to Power App portal.
  • Create a new ‘Instant flow’ by selecting the right Environment.

Flow_Json_1

  • Provide a name ‘GetCollectionFromPowerApp’ and select trigger as ‘PowerApps’.
  • Now, we need to read the collection passed from Canvas app to a variable. Lets add a new ‘Initialize Variable’ action.
  • In the ‘Initialize Variable’ action,
    • Provide variable name by setting ‘Name’ field. I set it as ‘collPersons’.
    • Type: String
    • Select ‘Value’ and click on ‘Ask in PowerApps’. A auto generated name would appear and select the same.
    • Flow_Json_25
  • Once we receive the collection and stored in a string variable ‘collPersons’, next we need to parse in to json collection.
  • Add a new ‘Parse JSON’ action.
  • In ‘Parse JSON’ action,
    • set Content as ‘collPersons’ from ‘Initialize Variable’ action.
    • Next we need to provide the json schema coming from Canvas app. To do that, click on ‘Generate from sample’.
    • Copy the json collection formed in Canvas app using ClearCollect function and paste as below.
    • Flow_Json_27
    • If no warnings, your ‘Parse JSON’ pane should look as below.
    • Flow_Json_28
  • Now we got json collection parsed and we are good start final step, creating records to CDS.
  • Add ‘Create a new record’ CDS action and select the ‘Environment’ and ‘Entity Name’

Flow_Json_33

  • Set the attributes (Last Name and Email) from ‘Parse JSON’ action.

Flow_Json_34

  • Once you set variables in ‘Create a new record’ CDS action, flow would automatically wrap the action in ‘Apply to each’.

Flow_Json_29

Trigger the Power automate flow from Canvas App:

Now we have Power automate flow with the logic to read and parse the json collection and add them to CDS as Contact records, lets trigger the flow from Canvas App.

  • Open the Canvas app created in above sections.
  • Add a new button ‘Share Collection To Flow’
  • Select the button, from the ribbon menu, click on ‘Action -> Power Automate’.
  • From the pane select the ‘GetCollectionFromPowerApp’ Power app flow.
  • After few seconds, you would see the Run() command auto populated. Now pass the ‘collPersonalInfo’ collection wrapped in JSON() function.
    • JSON() function is required to convert the ‘collPersonalInfo’ collection to JSON string as the Power Automate flow expects ‘String’ variable as first action.
  • Finally ‘OnSelect’ should look as below.

 

Flow_Json_30

  • Now run the App and click ‘Share Collection To Flow’ button, post run, go to Power automate flow’s history and you should see it ran successfully.

Flow_Json_31

🙂

Categories: CRM, PowerApps Tags: ,

‘Failed during http send request’ error – Triggering Power automate from Canvas App

February 9, 2020 Leave a comment

While configuring Canvas app for my previous article ,I encountered following error while selecting ‘Power Automate’ from Canvas app.

Flow_Json_23

Reason:

  • In my ‘Power Automate’, I was reading collection received from Canvas app to ‘Array’ type variable.

Flow_Json_24

  • There seems to be issue with ‘Array’ datatype when triggering ‘Power Automate’ flow Canvas App.

Fix:

  • In the Power Automate, changed the Type from ‘Array’ to ‘String’ and used ‘Parse JSON’ action to convert String to json collection.

Flow_Json_25

  • In Canvas App, used JSON() function to convert the Collection to json string.

Flow_Json_30

🙂

Power platform 2020 release wave 1 – Plan and features list

February 7, 2020 Leave a comment

The Power Platform release plan (formerly release notes) for the 2020 release wave 1 has been published with great new features.

Refer here for the details and download from here for the full list of features.

Following are the standout features for me:

  • Canvas apps:
    • Monitor tool – Allow makers to diagnose and troubleshoot their applications quicker
    • Create an app from data in a landscape format instead of just a phone layout.
  • Model Driven Apps:
    • Edit/Create related records without navigating away – Users do not have to navigate away from a form to create or edit a related record

PAPP_Wave2020_2

  • Power app Portal:
    • Web APIs for CRUD operations on Common Data Service entitiesThis is much awaited feature as former portal versions would only allow Read outside of ‘Entity Forms’ using Liquid script.
    • Power BI Embedded component in portal designerPortal provides the first party integration with Power BI by using the liquid tags
    • Simplified themes in portals Studio
    • Support for additional entities in global searchNow you can enable Global Search on Custom entities as well using a ‘Site Setting’ configuration.

PAPP_Wave2020_1

  • Power Automate:
    • Solutioning support for UI flowsWith this feature, you can create your UI flows in solutions, easily export them into a package, and then import them across different environments for your ALM needs.
    • Azure integration with Power AutomateOption to create flows by using a template from the Azure portal
    • Copy and paste in Power AutomateIf you want to duplicate actions in the Power Automate designer, you can now copy and paste them.
    • UI FlowsWith UI flows in Power Automate, you can record mouse clicks, keyboard use, and data entry to automate manual, repetitive, and time-consuming tasks to improve workplace productivity
  • Power Virtual Agent:
    • Add a Power Virtual Agents bot into Power Apps canvas app.
    • Add images and videos to topics.

🙂