Archive

Archive for the ‘PowerApps’ Category

Power Apps Portal – Remove an Entity from Global Search

If you are not familiar with Portal ‘Global Search’, please refer my other article to learn the steps to configure global search for an entity.

In this article, how to remove global search for a configured entity.

Disable the ‘Search Index’:

  • Open the entity you would want to disable the ‘Global Search’ and navigate to ‘Views’ and open ‘Portal Search’ view.

GS_7

  • Rename the ‘Portal Search’ view and ensure the new name doesn’t have the Portal Search term.
  • Save & Publish.
  • This step will block the entity from getting indexed.
  • Connect to Portal and rebuild the ‘Search Index’ by navigating to ‘../_Services/about’ page and click on ‘Rebuild search index’.

GS_12

Remove the entity from search filters in ‘Site Settings’:

  • Open the ‘Portal Management’ Model-driven App and go to ‘Site Settings’.
  • Open the ‘search/filters’ site setting and remove the entry for the entity you would want to disable Global Search.
  • As an example, for Account the entry would be ”Accounts:account‘. Remove the entry.

GS_4

  • Save the ‘search/filters’ site setting.

🙂

 

 

[Step by Step] Power Apps Portal – Configure Global Search

In this article, lets learn how to configure global search in ‘Power Apps Portals’.

What is Global Search in Portals:

  • Global search of portals allows you to search for records across multiple entities.
  • Allows you to search across multiple columns and configure what columns of an entity would be searchable.
  • By default, few OOB portal entities are enabled for Global Search. To name a few ‘Knowledge Article, Blog, Blog Post, Forum, etc…’.

So lets see how to configure global search for other entities. I am taking ‘Account’ entity for this article and you can pick the entity of your choice.

Prerequisites:

  • PowerApps account. Refer here to get an account.
  • PowerApps Portal. Refer link for steps to enable portal.

Once you fulfill the Prerequisites, you would get the following two Apps in your PowerApps maker portal.

  • ‘Portal Management’ – Model-driven App which contain Portal related entities.
  • ‘Portal’ – Portal app. I named my Portal App as ‘ExpMay2020’.

GS_1

Following are the high level steps to enable global search for ‘Account’ entity.

  • Add/Update Portal ‘Site Settings’.
  • Create a ‘Portal Search’ view in Account entity
  • Add Portal ‘Web Page’ to display the search result.
  • Add ‘Site Marker’ for the ‘Web Page’
  • Grant permissions to Portal Users
  • Rebuild Search Index

Lets get started.

Add/Update Portal ‘Site Settings’:

  • Open the ‘Portal Management’ Model-driven App.
  • Go to ‘Site Settings’ and Add a new ‘Site Setting’ by Name ‘Search/EnableAdditionalEntities’ and  Value ‘true’.
    • Note: Name should be exact match. If you already have ‘Search/EnableAdditionalEntities’ site setting, make sure the Value is set to ‘true’.

GS_2

  • Also make sure the OOB Site Setting ‘Search/Enabled‘ is set to ‘true’.
  • Add a new site setting ‘search/filters’, if not exists already. Open the record, if already exists.

GS_3

  • Set the Value with following pattern {YourDesiredName:EntityLogicalname}.
  • In my case, its ‘Accounts:account‘.
    • Multiple entities must be separated by Comma(,) (i.e., Accounts:account,Contacts:contact)

GS_4

Create a ‘Portal Search’ view in Account entity:

Open the Solution and go to ‘Account’ entity.

  • Create a new View by name ‘Portal Search‘.

GS_5

  • Add the columns which you want to search to the view.

GS_6

  • Save & Publish.
  • Once saved, view shows as below.

GS_7

Add Portal ‘Web Page’ to display the search result:

To open and display the Account record from ‘Global Search’, we need a new ‘Web Page’ with ‘Account’ Entity Form.

  • Create a new ‘Entity Form’ by selecting ‘Account’ entity and map one of the Account form. I’ve named my ‘Entity Form’ as ‘Account’.

GS_21

  • Create a new blank ‘Web Page’.

GS_8

  • Add a ‘Form’ component to the ‘Web Page’ and map the ‘Account’ entity form created in previous step.

GS_22

Add ‘Site Marker’ for the ‘Web Page’:

  • From the ‘Portal Management’ Model-driven App go to ‘Site Markers’.
  • Create a new ‘Site Marker’
    • Name : {EntityName_SearchResultPage}. In my case, its ‘account_SearchResultPage’.
    • Page: Web Page which we created in previous section.

GS_18

Grant permissions to Portal Users:

Portal User must have a minimum ‘Global’ Read access on the entity you are configuring global search for. In my case it’s ‘Account’ entity.

  • Create a new ‘Entity Permission’ as below.

GS_13

  • Create a new ‘Web Role’ and map the ‘Entity Permission’.

GS_14

  • Grant the ‘Web Role’ to the ‘Portal User’.

GS_16

Rebuild Search Index:

We left with one last step before we test the Global Search. Its ‘Rebuild Search Index’

  • Connect to your portal. Navigate to ‘../_Services/about’ page.
  • Click ‘Rebuild search index’.

GS_12

Test the Global Search:

  • Connect to your Portal.
  • Click on ‘Magnifier’ symbol from the ribbon and type your Account to Search.
    • Note: You can Search only the columns available in your ‘Portal Search’ view added on ‘Account’ entity.

GS_23

  • You would get the matching Accounts as below.

GS_19

  • Click on the one of the Accounts link and you would be redirected to that ‘Account’.

GS_20

Note:

  • Refer this PG’s article for more details.
  • To remove the entity from Global Search refer this article.

🙂

 

 

 

Embed Canvas App Error – Environment doesn’t have any CDS database

If you encountered following exception while embedding Canvas app in Model Driven App, then this article is for you.

Canv_4

Reason:

  • You must have a CDS database in your environment to configure Embed Canvas App, as the Canvas App metadata gets stored in CDS database.

Fix:

  • Connect to PowerApps Admin Center
  • Open the ‘default’ environment.
  • Click on ‘Add database’.

PAPPS_1

  • Give it sometime to complete the database setup.
  • Once done, you would get ‘Database version’ rendered as below:

Canv_5

  • Retry embedding Canvas app.

Refer article for step by step details to embed Canvas app in Model driven app.

🙂

 

[Step by Step] Embed “Azure Blob” connector Canvas App in Model Driven App

In this article, lets learn

  • Building a Canvas App with the functionality to upload and display images to/from Azure Blob.
  • Embed the Canvas App in Model Driven App.

Before we start, make sure you have the following prerequisites met.

Prerequisites:

  • PowerApps account. Refer here to procure an account.
  • Azure Storage Account and Container. Refer here for steps to create Azure Storage account.

Now that we know pre-requisites, lets understand the high level design:

  • Configure an Azure Container
  • Configure a ‘Model Driven’ App with OOB ‘Account’ entity.
  • ‘Embed’ Canvas app to ‘Account’ form.
  • Configure Canvas App with ‘Upload’ and ‘Display’ files to Azure Blob feature.
  • Save & Publish the Canvas App

Configure an Azure Container and capture ‘Access Keys’:

  • Add a new Container in Azure Storage Account.

Canv_8

  • Copy the ‘Storage account name’ and ‘Key1’ under ‘Access Keys’ tab of storage account, which would be needed in next steps.

Canv_9

Configure a ‘Model Driven’ App with ‘Account’ entity:

  • Configure a new ‘Model Driven’ App with OOB ‘Account’ entity.

Canv_22

‘Embed’ Canvas app to ‘Account’ form

When adding an embedded canvas app to a form always use a required field. Refer article for detailed steps.

  • Open the ‘Account’ entity’s Main customization form.
  • Add a new ‘Tab’ to the form and place ‘Account Rating’ field.
  • Go to ‘Field Properties -> Controls’ tab of ‘Account Rating’ field.
  • Click on ‘Add Control’ and choose ‘Canvas app’ and click on ‘Add’

Canv_2

  • Click on ‘Customize’ which opens up a new ‘Canvas App’ with ‘ModelDrivenFormIntegration’ component and few fields.

Canv_3

Configure Canvas App with ‘Upload’ and ‘Display’ files to Azure Blob:

As we are building ‘Upload’ to Blob functionality we would’t need the default fields.

  • Delete the auto populated fields and ‘Form1’.
  • Add a ‘Add picture’ control to the form.

Canv_7

  • Add an ‘Azure Blob Storage’ connector and provide ‘Storage Account Name’ and ‘Account Access Key’ captured in previous steps.

Canv_10

Now that we established connectivity between our Canvas app and Azure Blob container. Lets add the Upload functionality.

  • Add ‘Upload’ button and ‘OnSelect’ add following statement to upload the file to blob
    • AzureBlobStorage.CreateFile(“canvasimages”,AddMediaButton1.FileName,AddMediaButton1.Media);
      • “canvasimages” is the Container Name.

Canv_11

  • Run the ‘Canvas App’ and browse and ‘Upload’ image.

Canv_12

  • Make sure the file gets saved to ‘Blob’ container.

Canv_13

Steps to display images in Gallery:

  • Add a Gallery and set the ‘items’ property as below
    • AzureBlobStorage.ListFolderV2(“JTJmY2FudmFzaW1hZ2Vz”).value
    • “JTJmY2FudmFzaW1hZ2Vz” is the Azure Container ID.

Canv_23

  • Now set the ‘Image’ property of image control as below
    • AzureBlobStorage.GetFileContent(ThisItem.Id)

Canv_16

Save & Publish the Canvas App:

  • Save the Canvas App.

Canv_17

  • Navigate to Model Driven app’s ‘Field Properties’ window.
  • You should see the ‘App Id’ populated.

Canv_18

  • Click ‘Ok’ and publish the customization’s.

Test the Embedded Canvas App:

  • Open the existing Account record.
  • Navigate to ‘Upload’ tab and you would get the Canvas App loaded.

Canv_21

  • Click on ‘Tap or click to add a picture’ to browse the image you would want to upload.
  • Click on ‘Upload’ button to upload image.
  • We can also add ‘Reset’ option using ‘Reset(AddMediaButton1)=true;‘ statement.
    • Also add “ModelDrivenFormIntegration.RefreshForm(“true”);” which refreshes the data on the host model-driven form.

Canv_24

Notes:

  • Refer guidelines while working with embedded canvas apps.

🙂

 

 

Power Apps component framework (PCF) – Beginner guide

March 21, 2020 5 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: