Power Platform Community Forum Thread Details

Hi,

Thanks for reading my question.

I'm creating a PCF control. It has two parameters, one is bound and another is output. ControlManifest looks like following:-

 
<property name="serviceLookup" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="Lookup.Simple" usage="bound" required="true" />
<property name="selectedVisitNames" display-name-key="Selected Visit Names" description-key="Selected Visit Names" of-type="SingleLine.Text" usage="output" />In the Index.ts, I have more or less following code:
    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement
    ): void {
        // Add control initialization code
        this._context = context;
        this._notifyOutputChanged = notifyOutputChanged;
        this._container = container;

        const service = context.parameters.serviceLookup.raw;
        this.serviceValue = service && service.length > 0 ? service[0].id : null;

        this.render();
    }

      public updateView(context: ComponentFramework.Context<IInputs>): void {
        // Add code to update control view
        this._context = context;

        // Update values if changed
        const service = context.parameters.serviceLookup.raw;
        this.serviceValue = service && service.length > 0 ? service[0].id : null;
        
        this.render();
    }

    private render(): void {
        
        const encodedServiceId = this.serviceValue ? encodeURIComponent(this.serviceValue) : "";
        const queryString = "?$select=if_servicetype,if_name,if_role_calculated,if_generallocation,if_noofsessions,if_totalservicecosts,"
                            +"if_service_deliverydatestart,if_outcomereportstatus,if_invoiceissued,epd_methodofservicedelivery&"
                            +"$filter=(_if_scheduleid_value eq " + encodedServiceId + ")";

        this._context.webAPI.retrieveMultipleRecords("if_service", queryString).then(
            (result) => {
                if (!result.entities || result.entities.length === 0) {
                    this._container.innerHTML = "No visits found for this service.";
                    return;
                }
                
                // Create the table element
                const table = document.createElement("table");
                table.className = "custom-table"; // Apply a custom CSS class
                console.log("line 200");
                // Create the table header (optional)
                const thead = table.createTHead();
                const headerRow = thead.insertRow();
                [""].forEach(headerText => {
                    const th = document.createElement("th");
                    th.textContent = headerText;
                    headerRow.appendChild(th);
                });
                const tbody = table.createTBody();
                
                result.entities.forEach(visit => {
                    const visitId = visit["if_serviceid"];
                    const row = tbody.insertRow();

                    // Checkbox
                    const checkboxCell = row.insertCell();
                    const checkbox = document.createElement("input");
                    checkbox.type = "checkbox";
                    checkbox.setAttribute("data-visit-id", visitId); // optional for reference
                    checkbox.disabled = !this.shouldEnableCheckbox(this.levelValue, this.typeValue, visitType, invoiceStatus);
                    checkbox.addEventListener("change", () => {
                        //const isChecked = (e.target as HTMLInputElement).checked;
                        if (checkbox.checked) {
                            this._selectedVisitNames  += name + ";";
                            console.log("Selected: " + name);
                        } else {
                            this._selectedVisitNames = this._selectedVisitNames.replace(name + ";", "");
                        }
                        this._notifyOutputChanged(); // Trigger update
                    });
                    
                    checkboxCell.appendChild(checkbox);
                    
                    
                });

                this._container.innerHTML = "";
                this._container.appendChild(table);
            },
            (error) => {
                console.error("Error retrieving visits:", error);
                this._container.innerHTML = "Error loading visit data.";
            }
        );
    }

    public getOutputs(): IOutputs {
        // return {
        //     selectedVisitNames: this.selectedNames.join(";")
        // };
        console.log("getOutputs called, returning: " + this._selectedVisitNames);

        return {
            selectedVisitNames: this._selectedVisitNames            
        };
    }Now, let's assume I have a table which has two fields. One is a lookup and another is a text field. On the Lookup field, I have setup this PCF component.
 
Now my QUESTION is when I'm 'Bind to a value on Field' for the output to a text field nothing is getting populated. 
 
Thanks for reading this far to my question. Appreciated! 