{"id":30720,"date":"2022-02-21T16:12:17","date_gmt":"2022-02-21T10:42:17","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=30720"},"modified":"2022-10-14T12:06:49","modified_gmt":"2022-10-14T06:36:49","slug":"how-to-use-the-setvalue-and-save-methods-in-pcf-dataset-component","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/02\/how-to-use-the-setvalue-and-save-methods-in-pcf-dataset-component\/","title":{"rendered":"How to use the SetValue and Save Methods in PCF Dataset Component"},"content":{"rendered":"

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

As new features and functionalities are being introduced in PowerApps Component Framework, we have observed many new methods in the PCF Dataset Component. In this blog, we will discuss about the new entity record methods which are going to replace the WebApi update methods and custom requests to update the records in the dataset component.<\/p>\n

Now, let\u2019s understand these methods with the help of a scenario.<\/p>\n

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

Let\u2019s consider a subgrid of employees where we have configured a Detail List Fluent UI component. In addition, we have a two-option field named as Email Verified<\/strong> (Yes\/No), on which we have rendered the Toggle component of Fluent UI.<\/p>\n

Here, our goal is to update the value of the Email Verified<\/strong> as well as the Registration Status<\/strong> fields on change of the Toggle on Email Verified<\/strong>. Based on the value of the toggle we shall not only update the value of Email Verified<\/strong> to Yes\/No in the background but also set the value of the Registration Status<\/strong> to Registered<\/strong> when the toggle is Yes or Unregistered<\/strong> when the toggle is No.<\/p>\n

\"PCF<\/a><\/strong><\/p>\n

As shown in the above image, if we click on the toggle to change, it will trigger a method, where we would use the setValue<\/a> method to change the value of the above mentioned fields and after that we will need to make use of the save<\/a> method to save the changes.<\/p>\n

The save method is an asynchronous method. It saves the value of only those fields whose values were changed by the setValue method and not all the columns in the table.<\/p>\n

In addition, after the save method is called the dataset does not update automatically. To get the latest dataset in your control, you will need to call the updateView again and for this you can use requestRender<\/a> or refresh<\/a> method. The best place to call the updateView will be in the success callback of save method.<\/p>\n

Code:\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/strong><\/p>\n

\/**\r\n   * On Change of Email Verified field toggle\r\n   * Update the email verified and registration status fields of the repsective record.<\/span>\r\n   * @param event - mouse event\r\n   * @param checked - boolean value of the checkbox\r\n   *\/\r\n  private onChangeOfToggle = async (event: any, checked?: boolean) => {\r\n    \/\/local variables\r\n    let guid: string = \"\";\r\n    let record: any = null;\r\n    try {\r\n      \/\/get the guid of the record whose toggle is changed\r\n      guid = event.target.id != \"\" ? event.target.id :\r\nevent.target.parentElement != null &&\r\nevent.target.parentElement.id != \"\" ?\r\nevent.target.parentElement.id\r\n          : \"\";\r\n      \/\/get the record from dataset\r\n      record = this.props.pcfContext.parameters.sampleDataSet.records[guid];\r\n      \/\/setting the value of email verified field - record.setValue(columnName, value);\r\nrecord.setValue(\"new_emailverified\", checked);\r\n      \/\/setting the value of Registration Status field based on checked value\r\nrecord.setValue(\"new_registrationstatus\", checked ? \"Registered\" : \"Unregistered\");\r\n      \/\/saving the record with save method\r\n      await record.save();\r\n      \/\/refreshing the dataset\r\nthis.props.pcfContext.parameters.sampleDataSet.refresh();\r\n      \/\/testing\r\nthis.test(this.props.pcfContext, guid);\r\n    } catch (error) {\r\nconsole.log(\"onChangeOfToggle \" + error);\r\n    }\r\n  }<\/pre>\n
Now let us see the functionality explained above in action. When I change the toggle of Maria Campbell record, the Registration Status<\/strong> get changed from Unregistered<\/strong> to Registered<\/strong> as can be seen in the below screenshot:<\/p>\n
\"PCF<\/a>
\nNow, if you open the record and check, you will find the updated values for both the fields on the form as shown below:<\/p>\n
\"PCF<\/a><\/p>\n
Conclusion:<\/strong><\/h2>\n
Thus, we have learned how to utilize the new setValue<\/strong> and save<\/strong> methods by updating different fields.<\/p>\n
Save 1-2 hours or $800 monthly on scheduling and managing business travel with a geo-mapping App!<\/div><\/div><\/h2>\n
Maplytics<\/a> <\/strong>\u2013 Integrate Map with Dynamics 365 CRM and visualize data on the map, manage sales territories, auto-schedule appointments, get optimized travel routes, track field reps in real-time, and more<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction: As new features and functionalities are being introduced in PowerApps Component Framework, we have observed many new methods in the PCF Dataset Component. In this blog, we will discuss about the new entity record methods which are going to replace the WebApi update methods and custom requests to update the records in the dataset\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":[16,44,1929,2361],"tags":[2207,2291],"class_list":["post-30720","post","type-post","status-publish","format-standard","hentry","category-dynamics-365","category-power-apps","category-pcf","category-technical","tag-pcf-component","tag-pcf-dataset-control"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/30720","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=30720"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/30720\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=30720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=30720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=30720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}