{"id":24350,"date":"2020-08-07T13:17:40","date_gmt":"2020-08-07T13:17:40","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=24350"},"modified":"2021-05-31T09:35:43","modified_gmt":"2021-05-31T09:35:43","slug":"how-to-get-additional-column-values-in-pcf-dataset-control-using-addcolumn","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/08\/how-to-get-additional-column-values-in-pcf-dataset-control-using-addcolumn\/","title":{"rendered":"How to get additional column values in PCF Dataset Control using addColumn()"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p>In our previous blog, <a href=\"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-create-configurable-pcf-dataset-control-using-property-set-and-property\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>Create Configurable PCF Dataset control using Property-set and Property<\/strong><\/a> we asked users about which attributes they would like to visualize. Similarly in this blog, we\u2019ll see how to programmatically get the record value in the context along with the other column values.<\/p>\n<p>In the previous blog we have seen how to get additional data using property-set with the help of user configuration. But there are some attributes which you don\u2019t want the end-user to provide like Created On, Created by and Status, etc. that are common for all the entities.<\/p>\n<p><strong>Prerequisites:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/developer\/component-framework\/get-powerapps-cli\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Powerapps CLI<\/a> should be installed.<\/li>\n<li><a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\" target=\"_blank\" rel=\"noopener noreferrer\">React JS<\/a> basic knowledge<\/li>\n<li>Should be familiar to create <a href=\"https:\/\/www.inogic.com\/blog\/2020\/07\/how-to-work-with-pcf-dataset-control-using-fluent-uis-detail-list\/\" target=\"_blank\" rel=\"noopener noreferrer\">Basic dataset control<\/a>.<\/li>\n<\/ul>\n<p>For the above mentioned scenario, we will be using <strong>\u2018addColumn\u2019<\/strong> method available in the context.<\/p>\n<p>Below is the syntax for additional columns. You would need to pass the logical name of the field present in the entity record.<\/p>\n<p><strong>Syntax:<\/strong><\/p>\n<p>context.parameters.sampleDataSet.addColumn(fieldLogicalName)<\/p>\n<p>These values are loaded synchronously. But one thing to keep in mind is that the <strong>addColumn ()<\/strong> doesn\u2019t return value first time when the <strong>updateView<\/strong> is called rather it returns value when the grid has been refreshed.<\/p>\n<p>This might not be ideal for the end-user experience.<\/p>\n<p>So, to load the required columns immediately we need to refresh the grid programmatically using the below function:<\/p>\n<p>context.parameters.sampleDataSet.refresh();<\/p>\n<p>Now, when the refresh method is called, it will call the updateView() method with the columns which we have added using <strong>context.parameters.sampleDataSet.addColumn(fieldLogicalName).<\/strong><\/p>\n<p><strong>Code:<\/strong><\/p>\n<p>In the <strong>index.ts<\/strong> file you can create a method to add multiple columns or use the code in your existing functions as well.<\/p>\n<p>Ideal place to use the addColumn() is to call it in beginning of the <strong>UpdateView() <\/strong>before the rest of the logic is executed<strong>.<\/strong><\/p>\n<p>\/\/ Add more column other than property-set and default colmn on views<\/p>\n<p>public addMoreColumns(context: ComponentFramework.Context&lt;IInputs&gt;) {<\/p>\n<p>let functionName: string = &#8220;addMoreColumns&#8221;;<\/p>\n<p>try {<\/p>\n<p>if (context.parameters.sampleDataSet.addColumn) {<\/p>\n<p>context.parameters.sampleDataSet.addColumn(&#8220;createdon&#8221;);<\/p>\n<p>context.parameters.sampleDataSet.addColumn(&#8220;createdby&#8221;);<\/p>\n<p>context.parameters.sampleDataSet.refresh();<\/p>\n<p>}<\/p>\n<p>}\u00a0catch\u00a0(error)\u00a0{<\/p>\n<p>console.log(functionName\u00a0+\u00a0&#8220;&#8221;\u00a0+\u00a0error.message);<\/p>\n<p>}<\/p>\n<p>}<\/p>\n<p>Before using addColumns() in code we are getting six column values in context.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-24351\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/1PCF-Dataset-control.png\" alt=\"PCF Dataset control\" width=\"927\" height=\"169\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/1PCF-Dataset-control.png 927w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/1PCF-Dataset-control-300x55.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/1PCF-Dataset-control-768x140.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/1PCF-Dataset-control-660x120.png 660w\" sizes=\"(max-width: 927px) 100vw, 927px\" \/><\/p>\n<p>After using addColumns() we got two more additional columns that we added.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-24352\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/2PCF-Dataset-control.png\" alt=\"PCF Dataset control\" width=\"924\" height=\"201\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/2PCF-Dataset-control-300x65.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/08\/2PCF-Dataset-control-768x166.png 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>Thus, we have seen how to get column values which are not available on view programmatically using addColumns().<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction In our previous blog, Create Configurable PCF Dataset control using Property-set and Property we asked users about which attributes they would like to visualize. Similarly in this blog, we\u2019ll see how to programmatically get the record value in the context along with the other column values. In the previous blog we have seen how\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2020\/08\/how-to-get-additional-column-values-in-pcf-dataset-control-using-addcolumn\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":24354,"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":[1929],"tags":[2290,2291],"class_list":["post-24350","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pcf","tag-get-additional-column-values","tag-pcf-dataset-control"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24350","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=24350"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24350\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/24354"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=24350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=24350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=24350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}