Rajeev Pentyala – Technical Blog on Power Platform, Azure and AI

pac pcf init -ns pcfdv -n pcfdvcrud -t field -npm

export const fetchAccountRecord = async (
    webAPI: ComponentFramework.WebApi,
    accountName: string,
    accountNumber: string
): Promise<{ name: string; accountnumber: string; accountid: string } | null> => {
    console.log(`Fetching Account record for Name: ${accountName}, Account Number: ${accountNumber}`);

    try {
        // Construct the OData filter query
        const filterQuery = `?$filter=name eq '${accountName}' and accountnumber eq '${accountNumber}'`;
        
        console.log("filter query : ",filterQuery);

        // Fetch the data from Dataverse
        const response = await webAPI.retrieveMultipleRecords("account", filterQuery);

        if (response.entities.length > 0) {
            const account = response.entities[0]; // Retrieve the first matching record
            console.log("Matching Account record found:", account);

            // Return the mapped result
            return {
                name: account.name,
                accountnumber: account.accountnumber,
                accountid: account.accountid,
            };
        } else {
            console.log("No matching Account record found.");
            return null; // No record found
        }
    } catch (error) {
        console.error("Error fetching Account record:", error);
        throw new Error("Failed to fetch Account record. See console for details.");
    }
};

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

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

export class pcfdvcrud implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    private container: HTMLDivElement;
    private accountNameInput: HTMLInputElement;
    private accountNumberInput: HTMLInputElement;
    private fetchAccountButton: HTMLButtonElement;
    private resultContainer: HTMLDivElement;
    private context: ComponentFramework.Context<IInputs>;

    /**
     * Empty constructor.
     */
    constructor() {}

    /**
     * Initializes the control instance.
     */
    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement
    ): void {
        console.log("Initializing PCF control for Account CRUD operations.");
        this.context = context;
        this.container = container;

        // Initialize UI components
        this.initializeUIComponents();
    }

    /**
     * Called when any value in the property bag has changed.
     */
    public updateView(context: ComponentFramework.Context<IInputs>): void {}

    /**
     * Returns object[s] for property marked as "bound" or "output."
     */
    public getOutputs(): IOutputs {
        return {};
    }

    /**
     * Called when the control is to be removed from the DOM tree.
     */
    public destroy(): void {}

    /**
     * Initializes the UI components for the control.
     */
    private initializeUIComponents(): void {
        // Create input field for Account Name
        this.accountNameInput = this.createInputField("Enter Account Name");
        this.container.appendChild(this.accountNameInput);

        // Create input field for Account Number
        this.accountNumberInput = this.createInputField("Enter Account Number");
        this.container.appendChild(this.accountNumberInput);

        // Create a button for fetching account
        this.fetchAccountButton = this.createButton("Fetch Account", this.handleFetchAccount.bind(this));
        this.container.appendChild(this.fetchAccountButton);

        // Result container
        this.resultContainer = document.createElement("div");
        this.resultContainer.style.marginTop = "10px";
        this.container.appendChild(this.resultContainer);
    }

    /**
     * Creates an input field with the specified placeholder.
     * @param placeholder - The placeholder text for the input field.
     * @returns The created HTMLInputElement.
     */
    private createInputField(placeholder: string): HTMLInputElement {
        const input = document.createElement("input");
        input.type = "text";
        input.placeholder = placeholder;
        input.style.marginBottom = "10px";
        input.style.display = "block";
        return input;
    }

    /**
     * Creates a button with the specified label and click handler.
     * @param label - The text to display on the button.
     * @param onClickHandler - The function to call when the button is clicked.
     * @returns The created HTMLButtonElement.
     */
    private createButton(label: string, onClickHandler: () => void): HTMLButtonElement {
        const button = document.createElement("button");
        button.innerText = label;
        button.onclick = onClickHandler;
        button.style.marginBottom = "10px";
        console.log(`Button "${label}" initialized.`);
        return button;
    }

    /**
     * Handles fetching of the Account record based on user input.
     */
    private async handleFetchAccount(): Promise<void> {
        const accountName = this.accountNameInput.value.trim();
        const accountNumber = this.accountNumberInput.value.trim();

        // Validate inputs
        if (!accountName || !accountNumber) {
            this.resultContainer.innerHTML = "<p>Please provide both Account Name and Account Number.</p>";
            console.error("Validation failed: Account Name or Account Number is missing.");
            return;
        }

        console.log(`Fetching Account record for Name: ${accountName}, Number: ${accountNumber}...`);

        try {
            const result = await fetchAccountRecord(this.context.webAPI, accountName, accountNumber);

            if (result) {
                this.resultContainer.innerHTML = `
                    <h3>Account Found:</h3>
                    <p><strong>Name:</strong> ${result.name}</p>
                    <p><strong>Account Number:</strong> ${result.accountnumber}</p>
                    <p><strong>ID:</strong> ${result.accountid}</p>
                `;
                console.log("Account fetched successfully:", result);
            } else {
                this.resultContainer.innerHTML = "<p>No matching account found.</p>";
                console.log("No matching account found.");
            }
        } catch (error) {
            console.error("Error fetching account:", error);
            this.resultContainer.innerHTML = `<p>Error: ${error instanceof Error ? error.message : "Unknown error"}</p>`;
        }
    }
}

pac solution init -pn "rajeev" -pp "raj" -o "D:\Practice\PCFDVCRUDOperations\pcfdvcrud\DVSolution"

  <PropertyGroup>
    <SolutionPackageType>Both</SolutionPackageType>
    <SolutionPackageEnableLocalization>false</SolutionPackageEnableLocalization>
  </PropertyGroup>

pac solution add-reference -p "D:\Practice\PCFDVCRUDOperations\PCFDVCRUDOperations.pcfproj"