import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class PCFInput implements ComponentFramework.StandardControl {
    private _context: ComponentFramework.Context;
    private _input: HTMLInputElement;

    constructor() { }

    public init(context: ComponentFramework.Context, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement) {
        // Store the context for later use
        this._context = context;

        // Create an input element
        this._input = document.createElement("input");

        // Add the input to the container element
        container.appendChild(this._input);

        // Add a change event listener to the input
        this._input.addEventListener("change", (event) => {
            // Get the new value
            let newValue = this._input.value;

            // Update the record using the Web API
            let entityName = this._context.parameters.entityName.raw || "";
            let recordId = this._context.parameters.recordId.raw || "";
            let fieldName = this._context.parameters.fieldName.raw || "";

            let entity = {};
            entity[fieldName] = newValue;

            let request = new XMLHttpRequest();
            request.open("PATCH", encodeURI(`/${entityName}s(${recordId})`), true);
            request.setRequestHeader("OData-MaxVersion", "4.0");
            request.setRequestHeader("OData-Version", "4.0");
            request.setRequestHeader("Accept", "application/json");
            request.setRequestHeader("Content-Type", "application/json; charset=utf-8");
            request.onreadystatechange = () => {
                if (request.readyState === 4 && request.status === 204) {
                    // The update was successful
                    // ...
                }
                else if (request.readyState === 4) {
                    // There was an error
                    // ...
                }
            };
            request.send(JSON.stringify(entity));

            // Notify the platform that the value has changed
            notifyOutputChanged();
        });

        // Set the initial value
        this._input.value = this._context.parameters.fieldValue.raw || "";
    }

    // ...
}

In this code, we create an input element and add it to the container element. We also add a change event listener to the input using the addEventListener method. In the event listener, we get the new value using the value property and update the record using the Web API. The entityName, recordId, and fieldName parameters are passed to the control from the platform and used to determine which record and field to update. Finally, we call the notifyOutputChanged function to notify the platform that the value has changed.

The post Update record in PCF Microsoft dynamics CE , Patch a record in PCF control, Code to update field in PCF , Code to update Field using WEBAPI PCF javascript appeared first on Microsoft Dynamics 365 Blog.