Need a help with Multiselect PCf Control

(0) Share

Report

Posted on by Suganthar

Hi All, I'm exploring the below multiselect control and I need to trigger a notifyOutputChanged()

methods on onchange of the text field which stored the id's of the control.

The PCF control is as below
https://github.com/markcunninghamuk/PCF_Library/tree/main/controls/pcfcontroldemo/MultiSelectControl

The field on the form as below. (Same field with one with Control (Red) enabled and Another one with not control enabled (Blue)

The challenge I face here is , when I update the control enabled one, it updates the text field which holds the guid's of the control selected values. but not other way around.

Upon debugging, I found out the Notifyoutputchanged() changes is not invoking onchange of the text field.
I have already inspect the property of the directorate text field and got the property information and build the method as below

// Get a reference to the "otherField" element
		const directorateTextField = document.querySelector('[data-id="svdp_directorate.fieldControl-text-box-text"]') as HTMLInputElement | null;
 
		// Add an event listener to "directorateTextField" to trigger notifyChange when it changes
		if (directorateTextField !== null) {
			directorateTextField.addEventListener('change', () => {
				const newValue = directorateTextField.value; // Get the new value of "otherField"
				this.notifyChange(newValue); // Call notifyChange with the new value
			});
		} else {
			console.error('Element not found.'); // Handle the case where the element is not found
		}

Please assist me. Let me know if there is any way to refresh the values in the control field when I update the textfield which holds the guids.

See the error sample below ( I removed the last guid from the comma separated text), it did not update the control below

Before

After

cc @DianaBirkelbach if you can answer please

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (6)

Answers (0)

a33ik 3,306 Most Valuable Professional on at

Like (0)

Report

Hello,

I would recommend reaching out to an author of the control and asking for advice.

On a side note - I have a feeling that you are trying to reinvent the wheel. There is a control that has quite similar functionality. Check those articles:

https://www.ariclevin.com/development/post/multiselect-lookup-pcf-overview/

https://www.ariclevin.com/development/post/multiselect-lookup-pcf-overview-update-nn/

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

Hi @Suganthar ,

Accessing the DOM and the onChange events there, are lot safe to rely on.

To debug your issue, please place a console.log in the updateView method (not inside if conditions).

There you could log the value of your property.

There could be a few calls to updateView... and maybe only the last call will have the changed value.
I expect that you'll see the changed value in updateView. If that's the case, the next step would be to check why the React component doesn't get updated when the updateView changes.

Hope this helps!

Was this reply helpful? Yes No
Suganthar 4 on at

Like (0)

Report

@DianaBirkelbach I have debugged the code and I had looked the Render method and its params . it looks like the value is passing correctly, the control is not getting updated

I could not figure it out why the React component is not updating

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Hi @Suganthar ,

Ok, so the updateView gets triggered, but React doesn't render. So we have an issue with this PCF, not a platform issue.

I saw that in updateView the this.props.value, this.props.topCount (and so on) get changed, but the complete this.props are passed.
In terms of React, they check if the parameters get changed. Since you don't change the this.props object (only the subproperties), I guess that the pointer of this.props is not changed (so React doesn't rerender).

As a workarround , you could create a new instance of the passed props (using the spread operator). So your renderElement would look like this (use {...this.props} instead of this.props)

private renderElement() { if (this.props.initialValues != undefined) { this.props.isControlDisabled = this._context.mode.isControlDisabled; this.props.isControlVisible = this._context.mode.isVisible; ReactDOM.render( React.createElement(MultiSelectControl, {...this.props}) , this._container ); console.log("viewUpdated"); } }

Let's see if we get further now....

Was this reply helpful? Yes No
Suganthar 4 on at

Like (0)

Report

Hi @DianaBirkelbach Thanks for the workaround. I tried but no luck, the control did not render. See the screenshot below.

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report

Hi @Suganthar ,

In the answer before, I thought you could see that the value is passed in updateView.

The updateView could be called a few times after that... maybe the right value is passed only the last time the updateView is called

Was this reply helpful? Yes No