{"id":219,"date":"2022-01-07T11:18:59","date_gmt":"2022-01-07T11:18:59","guid":{"rendered":"https:\/\/blog.citrus-lime.com\/crmc\/?p=219"},"modified":"2022-01-07T11:19:00","modified_gmt":"2022-01-07T11:19:00","slug":"pcf-custom-controls","status":"publish","type":"post","link":"https:\/\/blog.citrus-lime.com\/crmc\/pcf-custom-controls\/","title":{"rendered":"PCF Custom Controls"},"content":{"rendered":"\n

Even as a long standing Dynamics Developer and Architect I\u2019d held back slightly from getting into Custom PCF Development as one look at the steps involved gave me pause.<\/p>\n\n\n\n

This is because the initial steps looked like a decent barrier to entry \u2013 as the initial start is heavily dependent on compiling via command line\u00a0and\u00a0npm<\/a>.\u00a0<\/p>\n\n\n\n

The best technologies that people accustomed to \u2018bog-standard\u2019 TypeScript, Plugin Development and .Net might not be used to.<\/p>\n\n\n\n

But like all new technologies, its only really off-putting until you\u2019ve got stuck in and done your first Hello World style control.<\/p>\n\n\n\n

Prep your Control folder<\/h3>\n\n\n\n

We can start building a Custom Control by creating a new Folder and then calling the following command from the Developer Powershell:<\/p>\n\n\n\n

pac pcf init <\/strong>–namespace CRMCS.PCF.CustomControls –name ExampleControl –template field<\/p><\/blockquote>\n\n\n\n

This preps the Folder Structure with the right template files.<\/p>\n\n\n\n

As a 2nd step, we can then \u2018npm install\u2019 to setup the node_modules in the Project Folder with the relevant script files.<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n

Building the Custom Control<\/h3>\n\n\n\n

With our Developer PowerShell for VS2017 or VS2019 connected to the Folder for our Custom Control \u2013 we can then \u2018npm run build<\/strong>\u2019<\/p>\n\n\n\n

This will build our control and in doing so, find and report on any exceptions the compiler finds in our Xml Manifest or TypeScript JS.<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n

Unit Testing the Custom Control<\/h3>\n\n\n\n

The default position would be compiling the Control, packaging into a Solution ZIP, and the importing into Dynamics 365 to test our control.<\/p>\n\n\n\n

However this would give us a slow and cumbersome way of testing our code as it develops.<\/p>\n\n\n\n

Thankfully there is a better way as we can deploy our Control into a Test Harness and sample our logic before using in Dynamics 365.<\/p>\n\n\n\n

We can do this from our Developer Powershell by running \u2018npm start<\/strong>\u2019.<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n

Note that our Control will likely fail initially until we have supplied the right Parameters for our Control in the Data Inputs<\/strong> section of the Test Harness.<\/p>\n\n\n\n

https:\/\/docs.microsoft.com\/en-us\/powerapps\/developer\/component-framework\/debugging-custom-controls<\/a><\/p><\/blockquote>\n\n\n\n

One point when using the Test Harness is that the \u2018page\u2019 object part of the context may not have your CDS\u2019s Url available via the .getClientUrl().<\/p>\n\n\n\n

This will be a way to supply the Test Harness with a stubby Url to mimic how the Control will be used \u2013 but until we determine how best to do this, we can use a Conditional Statement or a blunt try\/catch block to instead supply a fixed URL to our Dynamics 365 Environment during Testing with the Test Harness.<\/p>\n\n\n\n

try {<\/strong><\/p>

  this.baseUrl = (<any>context).page.getClientUrl();<\/strong><\/p>

}<\/strong><\/p>

catch (ex) {<\/strong><\/p>

  this.baseUrl = “https:\/\/[mycrm].crm11.dynamics.com”;<\/strong><\/p>

}<\/strong><\/p><\/blockquote>\n\n\n\n

When testing my PCF Control in the Test Harness \u2013 I would receive a 401 unauthorised error when attempting to call the Dynamics v9.1 REST API, despite the Browser being used for the Test Harness being authenticated and so passing the correct headers into the Harness.  This will be an area to come back to see if we can have calls to Dynamics enabled within the Test Harness to run these without deploying fully to Dynamics 365.<\/p>\n\n\n\n

Functional Testing the Control in Dynamics 365<\/h3>\n\n\n\n

We first must connect our development of the PCF Control to a target build of Dynamics 365 \u2013 ideally a Sandbox or Dev Environment where we can work with the Control.<\/p>\n\n\n\n

pac auth create<\/strong> –url https:\/\/[mycrm].crm11.dynamics.com<\/a><\/p><\/blockquote>\n\n\n\n

We can push our control into Dynamics via the following command.<\/p>\n\n\n\n

pac pcf push<\/strong> –publisher-prefix crmcs<\/p><\/blockquote>\n\n\n\n

This will install the Control into Dynamics so we can start connecting to the Fields on Forms and have our Control presented as the UI for a Field over the typical Text Box or standard UI.<\/p>\n\n\n\n

\"image\"<\/a><\/figure>\n\n\n\n

Build \u2013> Test \u2013> Rework<\/h3>\n\n\n\n

As with any development (particularly when learning the ropes) we will hit our main loop:<\/p>\n\n\n\n