How to Develop PCF Controls Using Vanilla JavaScript#

Prerequisites#

• Node.js and npm installed
• PowerApps CLI installed

Setting Up Your Project#

To initialize a PCF Component project, execute the below command:

pac pcf init --namespace myNamespace --name PCFCustCtrl --template field

Update ControlManifest.Input.xml#

Add this configuration to define your control’s properties:

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="myNamespace" constructor="PCFCustCtrl" version="1.0.0" display-name-key="PCFCustCtrl" description-key="Simple Text Control" control-type="standard">
    <property name="SimpleTextControl" display-name-key="SimpleTextControl_Display_Key" description-key="SimpleTextControl_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
    <resources>
      <code path="index.ts" order="1" />
    <!--  <css path="css/PCFCustCtrl.css" order="1" /> -->
    </resources>
  </control>
</manifest>

Update Index.ts and create Control.js#

import {PCFCustCtrl} from "./control.js";
export {PCFCustCtrl};

/** This class represents your control. */
function PCFCustCtrl() {
  /**
   * Empty constructor.
   */
}
var _context,_notifyOutputChanged,_state,_container;
var _myTextBox;

/** This method is called when the control is to be initialized */
PCFCustCtrl.prototype.init = function init(context, notifyOutputChanged, state, container) {
  // Add control initialization code
  _context = context;
  _notifyOutputChanged = notifyOutputChanged;
  _state = state;
  _container = container;
  _myTextBox = document.createElement("input");
  _myTextBox.type = "text";
  _myTextBox.value = context.parameters.SimpleTextControl.raw || "";
  _container.appendChild(_myTextBox);
}

/** This method is called when the control is to be rendered */
PCFCustCtrl.prototype.updateView = function updateView(context) {
  _myTextBox.value = context.parameters.SimpleTextControl.raw || "";
  // Add code to update control view
}

/** This method is called when the output is changed */
PCFCustCtrl.prototype.getOutputs = function getOutputs() {
  return {
    // Add code to return outputs
  }
}

/** This method is called when the control is to be destroyed */
PCFCustCtrl.prototype.destroy = function destroy() {
  // Add code to cleanup control if necessary
}

/** export class */
module.exports = {PCFCustCtrl}

Update TypeScript Configuration#

Update tsconfig.json file as per below:

{
    "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
    "compilerOptions": {
        "typeRoots": ["node_modules/@types"],
        "allowJs": true
    }
}

Test Your Control#

To test your PCF control, execute the below command to test the control in your browser:

npm run start

Conclusion#

You have now created a basic PCF control using vanilla JavaScript. This control can be extended with more functionality and customized to meet your specific needs. PCF provides a powerful way to create rich, interactive components that can be used within PowerApps.

Feel free to experiment with the control and add more features as you learn more about PCF.