How to handle updateView() function call while calling setFullScreen() function in PCF control

Introduction

In this blog, we will find out the way to avoid updateView() function to be executed when not necessary.

We have developed a PCF control which provides the user to expand and collapse the full screen mode. In that PCF control, UpdateView() has some business logic. Please find the below code that we have used to expand and collapse full screen mode:

private setFullScreen(_appDiv) {
        var functionName = " setFullScreen ";
        try {
         		 //check map mode (fullscreen or not)
         		 if (this._isFullScreenMode == false) {		  
                          		//activate full screen mode
            			this._isFullScreenMode = true;			
			//full screen mode mode activate
            			this._context.mode.setFullScreen(true);
		}
	}
	catch(error){
		alert (functionName + "" + error.message);
	}
}

public updateView(context: ComponentFramework.Context): void {
	//here we write business logic
}

Problem

In the above code, we faced an issue that when user tries to expand or collapse full screen mode, updateView method gets triggered and all the business logic in that method gets executed. This is a big issue for us as our business logic will be executed even when not necessary.

Solution

To overcome this problem, we use ‘context.updatedProperties’ which helps us to identify whether the full screen mode is expand or collapse. ‘context.updatedProperties’ contains two type of values as follows:
1. full screen_open: It indicates that user has expand full screen mode.
2. fullscreen_close: It indicates that user has collapse full screen mode.
So, as per the value of ‘context.updateProperties’ we do not execute business logic while the full screen mode is expand or collapse. Please find the below code to avoid executing business logic unnecessarily:

 public updateView(context: ComponentFramework.Context): void {	
		//check for updateProperties 	
		if (context.updatedProperties != null && context.updatedProperties.length != 0) {
			let _isLoadBusinessLogic = true;			
			//check current mode (fullscreen_close or fullscreen_open)
			if (context.updatedProperties[context.updatedProperties.length - 1] == "fullscreen_close" || context.updatedProperties[context.updatedProperties.length - 1] == "fullscreen_open") {
				_isLoadBusinessLogic = false;
			}
		//if current mode is not fullscreen_open or fullscreen_close then apply business logic 	
			if (_isLoadBusinessLogic) {
				//business logic
			}
		}		
    }

Conclusion

Thus, with the above code you can avoid unnecessary execution of updateView() function.