{"id":21061,"date":"2019-11-08T11:23:48","date_gmt":"2019-11-08T11:23:48","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=21061"},"modified":"2019-11-08T11:23:48","modified_gmt":"2019-11-08T11:23:48","slug":"how-to-handle-updateview-function-call-while-calling-setfullscreen-function-in-pcf-control","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2019\/11\/how-to-handle-updateview-function-call-while-calling-setfullscreen-function-in-pcf-control\/","title":{"rendered":"How to handle updateView() function call while calling setFullScreen() function in PCF control"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

In this blog, we will find out the way to avoid updateView() function to be executed when not necessary.<\/p>\n

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:<\/p>\n

private setFullScreen(_appDiv) {\r\n        var functionName = \" setFullScreen \";\r\n        try {\r\n         \t\t \/\/check map mode (fullscreen or not)\r\n         \t\t if (this._isFullScreenMode == false) {\t\t  \r\n                          \t\t\/\/activate full screen mode\r\n            \t\t\tthis._isFullScreenMode = true;\t\t\t\r\n\t\t\t\/\/full screen mode mode activate\r\n            \t\t\tthis._context.mode.setFullScreen(true);\r\n\t\t}\r\n\t}\r\n\tcatch(error){\r\n\t\talert (functionName + \"\" + error.message);\r\n\t}\r\n}\r\n\r\npublic updateView(context: ComponentFramework.Context): void {\r\n\t\/\/here we write business logic\r\n}<\/pre>\n
Problem<\/h2>\n
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.<\/p>\n
Solution<\/h2>\n
To overcome this problem, we use \u2018context.updatedProperties\u2019 which helps us to identify whether the full screen mode is expand or collapse. \u2018context.updatedProperties\u2019 contains two type of values as follows:
\n1. full screen_open:<\/strong> It indicates that user has expand full screen mode.
\n2. fullscreen_close:<\/strong> It indicates that user has collapse full screen mode.
\nSo, as per the value of \u2018context.updateProperties\u2019 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:<\/p>\n
 public updateView(context: ComponentFramework.Context): void {\t\r\n\t\t\/\/check for updateProperties \t\r\n\t\tif (context.updatedProperties != null && context.updatedProperties.length != 0) {\r\n\t\t\tlet _isLoadBusinessLogic = true;\t\t\t\r\n\t\t\t\/\/check current mode (fullscreen_close or fullscreen_open)\r\n\t\t\tif (context.updatedProperties[context.updatedProperties.length - 1] == \"fullscreen_close\" || context.updatedProperties[context.updatedProperties.length - 1] == \"fullscreen_open\") {\r\n\t\t\t\t_isLoadBusinessLogic = false;\r\n\t\t\t}\r\n\t\t\/\/if current mode is not fullscreen_open or fullscreen_close then apply business logic \t\r\n\t\t\tif (_isLoadBusinessLogic) {\r\n\t\t\t\t\/\/business logic\r\n\t\t\t}\r\n\t\t}\t\t\r\n    }<\/pre>\n
Conclusion<\/h2>\n
Thus, with the above code you can avoid unnecessary execution of updateView() function.<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":21063,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[44,1929],"tags":[1169,1941],"class_list":["post-21061","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-power-apps","category-pcf","tag-microsoft-power-apps","tag-pcf-control"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/21061","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=21061"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/21061\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/21063"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=21061"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=21061"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=21061"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}