PCF Not firing updateview without Resize Browser - microsoft-dynamics

Question

Created a PCF control, working fine in harnes tool. After integrating to D365 , updateview()not being called. Once I click the developertool then it is working. If am not opening developer tool OR REsize the browser window, then updateview is not being called even though data changed.
Onresetclick am calling notifychanged event , though it is not triggering the updateview
private onResetClick = (newValue: boolean, props: ToggleProps): void => {
if (newValue) {
//isReset true -> clicked set button, action to grey out toggle and change button name to set
if (!this.changeProps.isControlDisabledInForm) {
this._isChanged = true;
this.isReset = this.changeProps.isReset = newValue;
this.changeProps.buttonProperties.checkbox.disabled = true;
this.changeProps.buttonProperties.checkbox.checked = false;
this._selectedOptionID = null;
// this.theNotifyChanged();
}
} else {
if (!this.changeProps.isControlDisabledInForm) {
this._isChanged = true;
this.changeProps.buttonProperties.checkbox.disabled = false;
this.isReset = this.changeProps.isReset = newValue;
this._selectedOptionID
= this.changeProps.optionsetValues.nokey;
// this.theNotifyChanged();
}
}
if (this.theNotifyChanged) {
this.theNotifyChanged();
}
};
/**
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* #param context The entire property bag availabel to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
*/
public updateView(context: ComponentFramework.Context<IInputs>): void {
this._context = context;
this.changeProps.isControlDisabledInForm = context.mode.isControlDisabled;
this.changeProps.isVisible = context.mode.isVisible;
this._checkboxID = context.parameters.OptionSetAttribute.attributes?.LogicalName ?? uuidv4();
let selBoolean: boolean = false;
if (!this._isChanged) {
this._selectedOptionID = context.parameters.OptionSetAttribute.raw;
// this.SetButtonProperties(selBoolean);
}
else {
//if (this.changeProps.isReset) {
// // this.changeProps.buttonProperties.checkbox.disabled = true;
// // this.changeProps.buttonProperties.checkbox.checked = false;
//}
//else {
// // this.changeProps.buttonProperties.checkbox.disabled = false;
//}
selBoolean = this.isReset as boolean;//this.changeProps.buttonProperties.checkbox.checked;
}
if (this.optionSetArray) {
for (var i = 0; i < this.optionSetArray.length; i++) {
if (this.optionSetArray[i].Value == this._selectedOptionID) {
this.SelectedOptionSetLabel = this.optionSetArray[i].Label;
}
if (this.optionSetArray[i]?.Label.toUpperCase() === "YES") { //TODO : this needs to be generic not fixed with yes
this.changeProps.optionsetValues.yeskey = this.optionSetArray[i].Value;
} else {
this.changeProps.optionsetValues.nokey = this.optionSetArray[i].Value;
}
}
}
if (!this._isChanged) {
if (this.SelectedOptionSetLabel != null && this.SelectedOptionSetLabel != undefined) {
this.changeProps.buttonProperties.checkbox.checked = this.SelectedOptionSetLabel?.toUpperCase() === "YES" ? true as boolean : false as boolean;//TODO : this needs to be generic not fixed with yes
selBoolean = this.changeProps.isReset = this.isReset = true;
} else {
selBoolean = false;
this.changeProps.isReset = this.isReset = false;
}
}
this._messageContent = selBoolean ? this.changeProps.labels.trueLabel : this.changeProps.labels.falseLabel;
this.changeProps.buttonProperties = {
resetButton: { innerHTML: selBoolean ? "Reset" : "Set" },// when there is a value stored in attribute we need to show Reset
messageContent: this._messageContent,
checkbox: {
disabled: this.changeProps.isControlDisabledInForm ? true : (this.isReset ? false : true),
checked: this.changeProps.buttonProperties.checkbox.checked, checkboxID: this._checkboxID
}
};
console.log("inside ts");
ReactDOM.render(
React.createElement(ToggleButton, this.changeProps
), this.container);
}

Answer 1

Though the context got changed , scope goes to getOutput() method to check if there is any change in output then only PCF view get rerender. In my case, i didnot change the output value in getoutput() method so it was not working.
Here "_selectedOptionID" value should be changed then it started working.
public getOutputs(): IOutputs {
return {
OptionSetAttribute: this._selectedOptionID as number
};
}