PCF: Adding external handlers to controls

After I published the initial version of my PCF Control Toolkit I was asked how I was able to use external JS files possible in one of the controls. In this post, I decided to provide follow along steps to enable the same possibility in controls you develop and demonstrate the approach on the example control.

In order to configure the control, I added 2 additional inputs to pass the reference to the JavaScript file and the name of the function to be executed:

In order to load the content from external file, I add the following code to init method of the control:

Once this step is completed and code becomes available for executing, the next step to consider is how the external function can be dynamically called from the code of the PCF control. In this case I use the “new Function” to instantiate the function and call it afterwards. Here is an example of the code that can be used:

As an example, I decided to create a PCF control that will show the button instead of the field and allows custom JavaScript to be called when the button is clicked. Here is the code of the PCF control:

Here is the code of the React component:

The code called on click is really simple:

Once PCF control is built and deployed to CDS here is how it can be configured:

Any text field can be used as a placeholder for the control, enter the reference pointing to the JS File to the “JS File” input, name of the function to be called on click to “Method Name” and the label to be shown on the button to “Button Label” input.

Here is the demonstration on how it works:

Source code of this PCF is available by the following URL –

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.