Commonly used sample codes for Power Apps Code Component Framework (PCF)

PCF Commands
==========================================================

pac pcf init --namespace "$NAMESPACE" --name "$CONTROL_NAME" --template "$TEMPLATE"

npm install

npm run build

pac solution init --publisher-name "$PUBLISHER_NAME" --publisher-prefix "$PUBLISHER_PREFIX"

pac solution add-reference --path "$PCF_PROJECT_PATH"

pac solution build  or msbuild /t:build /restore in dev command promot


pac auth create --url "$ENVIRONMENT_URL"
pac auth list 
pac auth select --index <index of the active profile>
pac pcf push --publisher-prefix <your publisher prefix>


Extra
--------------------
pac pcf init -n <control name> -ns <namespace> -t field -npm
pac pcf init -n <control name> -ns <namespace> -t field -fw react -npm
pac pcf init -n <control name> -ns <namespace> -t dataset -npm
pac pcf init -n <control name> -ns <namespace> -t dataset -fw react -npm
npm run build
npm start watch
pac solution init --publisher-name developer --publisher-prefix dev
pac solution add-reference --path <path to base control folder>
msbuild /t:build /restore
msbuild /p:configuration=release
pac auth create -u <URL to Dynamics or Power Apps organization>
pac auth list
pac auth select -i <index>
pac pcf push --publisher-prefix <publisher prefix>

export class MyPCFControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    private container: HTMLDivElement;

    // Called when the control is initialized
    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement
    ): void {
        this.container = container;
        this.renderControl(context);
    }
}

private renderControl(context: ComponentFramework.Context<IInputs>): void {
    const label = document.createElement("label");
    label.textContent = "Enter your value:";
    
    const input = document.createElement("input");
    input.type = "text";
    input.value = context.parameters.myInputProperty.raw || "";

    this.container.appendChild(label);
    this.container.appendChild(input);
}

input.addEventListener("input", (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    notifyOutputChanged();
});

public updateView(context: ComponentFramework.Context<IInputs>): void {
    const currentValue = context.parameters.myInputProperty.raw || "";
    // Update the control based on Dataverse parameter values
}

private notifyOutputChanged: () => void;

// Notify when data changes
public getOutputs(): IOutputs {
    return {
        myInputProperty: this.currentValue
    };
}

public resizeCanvas(width: number, height: number): void {
    // Adjust the control's size dynamically
    this.container.style.width = `${width}px`;
    this.container.style.height = `${height}px`;
}

const style = document.createElement("style");
style.textContent = `
    input {
        width: 100%;
        padding: 8px;
        margin-top: 5px;
    }
`;
this.container.appendChild(style);

const webApi = context.webAPI;

// Retrieve records
webApi.retrieveMultipleRecords("account", "?$select=name,accountnumber").then(
    (response) => {
        console.log(response.entities);
    }
);

public destroy(): void {
    while (this.container.firstChild) {
        this.container.removeChild(this.container.firstChild);
    }
}