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:

<property name="WebResource" display-name-key="JS File" description-key="JS File that contains the code you want to run" of-type="SingleLine.Text" usage="input" required="true" />
<property name="MethodName" display-name-key="Method Name" description-key="Name of the function you want to run on click of the button" of-type="SingleLine.Text" usage="input" required="true" />

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

const scriptUrl = context.parameters.WebResource.raw!;

let scriptNode = document.createElement("script");
scriptNode.setAttribute("type", "text/javascript");
scriptNode.setAttribute("src", scriptUrl);
scriptNode.onload = () => {
	//Add code that will be executed once the external code is loaded
};
scriptNode.onerror = (error) => {
	//Add code that will handle an error
};

document.head.appendChild(scriptNode);

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:

const callBackName = context.parameters.MethodName.raw!;

const dynamicFunctionCall = new Function(callBackName + "()");

try {
	dynamicFunctionCall();
} catch (error) {
	console.error(error);
}

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:

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { CustomButton } from './CustomButton';

export class PCFCustomHandler implements ComponentFramework.StandardControl<IInputs, IOutputs> {

	private container: HTMLDivElement;

	constructor() {

	}

	public init(context: ComponentFramework.Context<IInputs>,
		notifyOutputChanged: () => void,
		state: ComponentFramework.Dictionary,
		container: HTMLDivElement) {
		this.container = container;

		const scriptUrl = context.parameters.WebResource.raw!;
		const callBackName = context.parameters.MethodName.raw!;

		let scriptNode = document.createElement("script");
		scriptNode.setAttribute("type", "text/javascript");
		scriptNode.setAttribute("src", scriptUrl);
		scriptNode.onload = () => {
			//Add code that will be executed once the external code is loaded
			const btnControl = React.createElement(CustomButton, {
				label: context.parameters.ButtonLabel.raw!,
				clickHandler: () => {
					const dynamicFunctionCall = new Function(callBackName + "()");
	
					try {
						dynamicFunctionCall();
					} catch (error) {
						console.error(error);
					}
				}
			});

			ReactDOM.render(btnControl, this.container);
		};
		scriptNode.onerror = (error) => {
			container.innerText = "Can't load referenced script";
		};

		document.head.appendChild(scriptNode);
	}

	public updateView(context: ComponentFramework.Context<IInputs>): void {
	}

	public getOutputs(): IOutputs {
		return {};
	}

	public destroy(): void {
		ReactDOM.unmountComponentAtNode(this.container);
	}
}

Here is the code of the React component:

import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/components/Button';
import { Stack } from "office-ui-fabric-react/lib/components/Stack";

export interface ICustomButtonProps{
	label: string;
	clickHandler: () => void;
}

export class CustomButton extends React.Component<ICustomButtonProps, {}> {
	render(){
		return (<>
			<Stack>
				<PrimaryButton 
					text={this.props.label}
					onClick={this.props.clickHandler}
				/>
			</Stack>
			</>);
	}	
}

The code called on click is really simple:

function onCustomButtonClick(){
	alert("Called from custom JS");
}

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 – https://github.com/AndrewButenko/CustomButtonControl