{"id":29083,"date":"2021-08-20T11:02:40","date_gmt":"2021-08-20T11:02:40","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=29083"},"modified":"2021-10-07T11:30:57","modified_gmt":"2021-10-07T06:00:57","slug":"how-to-programmatically-call-updateview-in-pcf-using-requestrender","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2021\/08\/how-to-programmatically-call-updateview-in-pcf-using-requestrender\/","title":{"rendered":"How to programmatically call UpdateView in PCF using requestRender"},"content":{"rendered":"

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

If you know Power Apps Component Framework, then you must know the updateView<\/strong> method, which is one of the standard methods of PCF.<\/p>\n

The updateView<\/strong> method is triggered only when the PCF control is refreshed or rendered and shows us the updated data on our control.<\/p>\n

We work on the dataset as well as field type components in PCF. In the dataset, we usually use context.dataset.refresh<\/strong> to refresh the dataset control, which calls the updateView<\/strong> method. Some users also use setState<\/strong> method to re-render a particular component. However, sometimes it becomes difficult to manage the data in the state.<\/p>\n

In addition, on using setState<\/strong> only the component for which the state is changed gets re-rendered while all the other components in the PCF control remains as it is.<\/p>\n

We recently had a requirement to refresh a field component. However, there is no appropriate refresh method for field component, which can work as same as context.dataset.refresh<\/strong> method.<\/p>\n

So to overcome this limitation, let me introduce you a method named as requestRender<\/strong>. It is available for both dataset as well as field components, using this method we can re-render the PCF control. You can use this method as shown here, context.factory.requestRender().<\/strong><\/p>\n

It is similar to refresh method in dataset control; requestRender<\/strong> calls the updateView<\/strong> method and re-renders the control.<\/p>\n

Scenario:<\/strong><\/h2>\n

Let\u2019s say we are using a single fluent UI component i.e., contextual menu and on click of its menu items, we want to set the button text to the selected menu item as shown below.<\/p>\n

\"How<\/a><\/p>\n

\"How<\/a><\/p>\n

To achieve this, we can use setState, but sometimes it becomes difficult to maintain the state. Here, to make our work simple yet efficient, requestRender<\/strong> comes to the rescue.<\/p>\n

Below is our Contextual Menu component class code, which we are calling from index.ts<\/em><\/strong> file by passing context as props in it.<\/p>\n

Here, we selected Tomorrow option and it gets set as the button label.<\/p>\n

Code:<\/strong><\/h2>\n
export class FluentUIContextualMenu extends React.Component<any, any> {\r\nprivate _buttonText: string = \"Later Today\";\r\nconstructor(props: any) {\r\nsuper(props);\r\n}\r\nrender(): JSX.Element {\r\nlet menuItems: IContextualMenuItem[] = this.getMenuItems();\r\nreturn (\r\n<>\r\n<DefaultButton text={this._buttonText}\r\nmenuProps={\r\n{\r\nshouldFocusOnMount: true,\r\ndirectionalHint: DirectionalHint.bottomLeftEdge,\r\nitems: menuItems\r\n}\r\n}\r\n\/>\r\n<\/>\r\n)\r\n}\r\nprivate getMenuItems = (): IContextualMenuItem[] => {\r\nlet menuItems: any = [];\r\nmenuItems = [\r\n{\r\nkey: 'Later Today',\r\niconProps: { iconName: 'Clock' },\r\ntext: 'Later Today',\r\nonClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {\r\nthis.onMenuItemClick(event, item);\r\n}\r\n},\r\n{\r\nkey: 'Tomorrow',\r\niconProps: { iconName: 'Coffeescript' },\r\ntext: 'Tomorrow',\r\nonClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {\r\nthis.onMenuItemClick(event, item);\r\n}\r\n},\r\n{\r\nkey: 'This Weekend',\r\niconProps: { iconName: 'Vacation' },\r\ntext: 'This Weekend',\r\nonClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {\r\nthis.onMenuItemClick(event, item);\r\n}\r\n},\r\n{\r\nkey: 'Next Week',\r\niconProps: { iconName: 'Suitcase' },\r\ntext: 'Next Week',\r\nonClick: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {\r\nthis.onMenuItemClick(event, item);\r\n}\r\n},\r\n];\r\nreturn menuItems;\r\n}\r\nprivate onMenuItemClick = (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, item: IContextualMenuItem) => {\r\nthis._buttonText = item.text != undefined ? item.text : this._buttonText;\r\nthis.props.context.factory.requestRender();\r\n}\r\n}\r\n<\/pre>\n
Explanation:<\/strong><\/h2>\n
In the function onMenuItemClick<\/strong>, the global variable this._buttonText<\/strong> takes the updated text from contextual menu item and this.props.context.factory.requestRender(); <\/strong>renders the control, which calls the updateView<\/strong> method and the selected text remains intact in the global variable that shows the updated text on the contextual menu button.<\/p>\n
Similarly, as we know, there is no refresh method available for the field component, unlike the dataset, which has one. We can use the requestRender<\/strong> method in the field component to refresh it.<\/p>\n
Another good thing about the requestRender<\/strong> method is that, similar to the setState it maintains and gives the updated data to the user.<\/p>\n
Conclusion: <\/strong>In this blog, we learned how to call the UpdateView<\/strong> method programmatically using RequestRender<\/strong>, which eventually helps in refreshing the entire PCF control thus helping us see our changes efficiently.<\/p>\n
Reference: https:\/\/docs.microsoft.com\/en-us\/powerapps\/developer\/component-framework\/reference\/factory\/requestrender<\/a><\/p>\n
\"Map<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction: If you know Power Apps Component Framework, then you must know the updateView method, which is one of the standard methods of PCF. The updateView method is triggered only when the PCF control is refreshed or rendered and shows us the updated data on our control. We work on the dataset as well as\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"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,2361],"tags":[1941,1881],"class_list":["post-29083","post","type-post","status-publish","format-standard","hentry","category-power-apps","category-pcf","category-technical","tag-pcf-control","tag-powerapps-dynamics-365"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/29083","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=29083"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/29083\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=29083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=29083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=29083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}