You’re offline. This is a read only version of the page.
4
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
Share
Report// 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
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
Hi @DianaBirkelbach Thanks for the workaround. I tried but no luck, the control did not render. See the screenshot below.
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)
All responses (
Answers (
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....
@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
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!
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/
#1
WarrenBelz
69
Most Valuable Professional
#2
mmbr1606
51
Super User 2025 Season 1
#3
MS.Ragavendar
36
