{"id":40071,"date":"2024-12-23T15:16:08","date_gmt":"2024-12-23T09:46:08","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=40071"},"modified":"2024-12-24T11:29:46","modified_gmt":"2024-12-24T05:59:46","slug":"creating-custom-data-views-in-canvas-apps-with-power-fx-functions","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2024\/12\/creating-custom-data-views-in-canvas-apps-with-power-fx-functions\/","title":{"rendered":"Creating Custom Data Views in Canvas Apps with Power Fx Functions"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40084\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions.png\" alt=\"Canvas Apps with Power Fx Functions\" width=\"1925\" height=\"1100\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions.png 1925w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions-300x171.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions-1024x585.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions-768x439.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions-1536x878.png 1536w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/Canvas-Apps-with-Power-Fx-Functions-660x377.png 660w\" sizes=\"(max-width: 1925px) 100vw, 1925px\" \/><\/p>\n<p>While working on a <a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-canvas-app\/\" target=\"_blank\" rel=\"noopener\">Canvas App within Power Apps<\/a>,\u00a0we encountered a scenario where we needed an automated calculation to handle tax computations. Typically, this would require creating a new calculated field within the Dataverse to perform the calculation. However, adding a calculated field to the Dataverse seemed unnecessary in this case, as the calculation was only required within the Canvas App itself.<\/p>\n<p>As we explored this challenge further, we discovered that Power Fx offers a powerful solution for dynamically manipulating data. By leveraging temporary calculated columns, we can perform on-the-fly calculations without permanently modifying the database schema. This approach enables us to implement complex calculations, like tax computations, directly within the app, using dynamic formulas that are not stored in the Dataverse.<\/p>\n<p>In this blog, we will walk you through a practical use case where we use Power Fx functions such as <strong>AddColumns, DropColumns, RenameColumns, and ShowColumns<\/strong>.<\/p>\n<p><strong>Power Fx Functions for Data Manipulation<\/strong><\/p>\n<p><strong>1.AddColumns<\/strong><\/p>\n<p>The AddColumns allows you to create calculated fields dynamically within the app. This is particularly useful when you want to display data that is a result of some calculation or transformation, without needing to store it in the Dataverse.<\/p>\n<p><strong>Syntax: <\/strong><em>AddColumns( DataSource, &#8220;NewColumnName&#8221;, Formula )<\/em><\/p>\n<p>DataSource: The source table or collection.<\/p>\n<p>&#8220;NewColumnName&#8221;: The name of the temporary column to be added.<\/p>\n<p>Imagine you have a collection of invoices, and you want to display a column showing the total amount, including a 5% tax. You can use AddColumns to create a &#8220;TotalWithTax&#8221; column dynamically by using the below formula.<\/p>\n<p><em>AddColumns(Invoices, TotalWithTax, &#8216;Total Amount (Base)&#8217; * 1.05)<br \/>\n<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40073\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/1Canvas-Apps-with-Power-Fx-Functions.png\" alt=\"Canvas Apps with Power Fx Functions\" width=\"1044\" height=\"586\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/1Canvas-Apps-with-Power-Fx-Functions.png 1044w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/1Canvas-Apps-with-Power-Fx-Functions-300x168.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/1Canvas-Apps-with-Power-Fx-Functions-1024x575.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/1Canvas-Apps-with-Power-Fx-Functions-768x431.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/1Canvas-Apps-with-Power-Fx-Functions-660x370.png 660w\" sizes=\"(max-width: 1044px) 100vw, 1044px\" \/><\/p>\n<p>This adds a new column, &#8220;TotalWithTax&#8221;, where each row in the Invoices table is multiplied by 1.05 to account for a 5% tax.<\/p>\n<p><strong>2.ShowColumns<\/strong><\/p>\n<p>ShowColumns allows you to specify only the columns you want to display. This is especially helpful when you have large datasets but only need to show a few specific fields.<\/p>\n<p><strong>Syntax<\/strong>: <em>ShowColumns( DataSource, &#8220;ColumnName1&#8221;, &#8220;ColumnName2&#8221; )<\/em><\/p>\n<p>DataSource: The source table or collection.<\/p>\n<p>&#8220;ColumnName1&#8221;, &#8220;ColumnName2&#8221;: The names of the columns you want to display.<\/p>\n<p>If your Invoices collection contains many columns but you only want to show Invoice ID, Total Amount, Total Discount Amount, TotalWithTax, Total Detail Amount, and Amount Due on a screen, you can use ShowColumns to limit the displayed columns as shown in below screenshot.<\/p>\n<pre class=\"lang:css gutter:true start:1\">ShowColumns( Invoices, 'Invoice ID', 'Total Amount (Base)','Total Discount Amount',TotalWithTax,'Total Detail Amount','Amount Due')<\/pre>\n<p>For cases where a calculated column like TotalWithTax is needed, combine AddColumns within ShowColumns:<\/p>\n<p><em>ShowColumns(AddColumns(Invoices, TotalWithTax, &#8216;Total Amount (Base)&#8217; * 1.05), &#8216;Invoice ID&#8217;, &#8216;Total Amount (Base)&#8217;,&#8217;Total Discount Amount&#8217;,TotalWithTax,&#8217;Total Detail Amount&#8217;,&#8217;Amount Due&#8217;)<\/em><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40074\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/2Canvas-Apps-with-Power-Fx-Functions.png\" alt=\"Canvas Apps with Power Fx Functions\" width=\"1327\" height=\"597\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/2Canvas-Apps-with-Power-Fx-Functions.png 1327w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/2Canvas-Apps-with-Power-Fx-Functions-300x135.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/2Canvas-Apps-with-Power-Fx-Functions-1024x461.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/2Canvas-Apps-with-Power-Fx-Functions-768x346.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/2Canvas-Apps-with-Power-Fx-Functions-660x297.png 660w\" sizes=\"(max-width: 1327px) 100vw, 1327px\" \/><\/p>\n<p><strong>3.RenameColumns<\/strong><\/p>\n<p>Renaming columns can help improve the clarity of your UI by using more user-friendly names. The RenameColumns function allows you to change column names dynamically in your Canvas App.<\/p>\n<p><strong>Syntax:<\/strong> <em>RenameColumns( DataSource, &#8220;OldColumnName&#8221;, &#8220;NewColumnName&#8221; )<\/em><\/p>\n<p>DataSource: The source table or collection.<\/p>\n<p>&#8220;OldColumnName&#8221;: The current name of the column.<\/p>\n<p>&#8220;NewColumnName&#8221;: The new name that will be displayed.<\/p>\n<p>If you want to rename a column name like invoicenumber to something more user-friendly like Invoice Number, you can use the RenameColumns function as shown below.<\/p>\n<p><em>RenameColumns( Invoice ,invoicenumber, &#8216;Invoice Number&#8217; )<\/em><\/p>\n<p>Complete Code:<\/p>\n<pre class=\"lang:css gutter:true start:1\">RenameColumns(ShowColumns(AddColumns(Invoices, TotalWithTax, 'Total Amount (Base)' * 1.05), 'Invoice ID', 'Total Amount (Base)','Total Discount Amount',TotalWithTax,'Total Detail Amount','Amount Due'),invoicenumber, 'Invoice Number' )<\/pre>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40075\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/3Canvas-Apps-with-Power-Fx-Functions.png\" alt=\"Canvas Apps with Power Fx Functions\" width=\"1347\" height=\"579\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/3Canvas-Apps-with-Power-Fx-Functions.png 1347w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/3Canvas-Apps-with-Power-Fx-Functions-300x129.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/3Canvas-Apps-with-Power-Fx-Functions-1024x440.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/3Canvas-Apps-with-Power-Fx-Functions-768x330.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/3Canvas-Apps-with-Power-Fx-Functions-660x284.png 660w\" sizes=\"(max-width: 1347px) 100vw, 1347px\" \/><\/p>\n<p>As shown in the screenshot below, the &#8216;InvoiceNumber&#8217; column has been renamed to &#8216;Invoice Number&#8217;.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-40076\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/4Canvas-Apps-with-Power-Fx-Functions.png\" alt=\"Canvas Apps with Power Fx Functions\" width=\"759\" height=\"483\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/4Canvas-Apps-with-Power-Fx-Functions.png 759w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/4Canvas-Apps-with-Power-Fx-Functions-300x191.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/4Canvas-Apps-with-Power-Fx-Functions-660x420.png 660w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/p>\n<p><strong>4. DropColumns<\/strong><\/p>\n<p>Sometimes, the data source might include columns that are unnecessary for a particular view. Instead of modifying the data source, you can use the DropColumns function to remove those columns temporarily from your view.<\/p>\n<p><strong>Syntax<\/strong>: <em>DropColumns( DataSource, &#8220;ColumnName1&#8221;, &#8220;ColumnName2&#8221; )<\/em><\/p>\n<p>DataSource: The source table or collection.<\/p>\n<p>&#8220;ColumnName1&#8221;, &#8220;ColumnName2&#8221;: The names of the columns to be dropped from the display.<\/p>\n<p>If you have a collection with information like Amount Due that you don&#8217;t want to display on a screen, you can drop that column dynamically by using the below syntax.<\/p>\n<p><em>DropColumns( Invoices, &#8221; msdyn_amountdue &#8221; )<\/em><\/p>\n<p>Complete Code:<\/p>\n<pre class=\"lang:css gutter:true start:1\">DropColumns(RenameColumns(ShowColumns(AddColumns(Invoices, TotalWithTax, 'Total Amount (Base)' * 1.05), 'Invoice ID', 'Total Amount (Base)','Total Discount Amount',TotalWithTax,'Total Detail Amount','Amount Due'),invoicenumber, 'Invoice Number' ),msdyn_amountdue )<\/pre>\n<h3><img decoding=\"async\" class=\"alignnone size-full wp-image-40072\" style=\"border: 1px solid #000000; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/5Canvas-Apps-with-Power-Fx-Functions.png\" alt=\"Canvas Apps with Power Fx Functions\" width=\"1357\" height=\"433\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/5Canvas-Apps-with-Power-Fx-Functions.png 1357w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/5Canvas-Apps-with-Power-Fx-Functions-300x96.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/5Canvas-Apps-with-Power-Fx-Functions-1024x327.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/5Canvas-Apps-with-Power-Fx-Functions-768x245.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/12\/5Canvas-Apps-with-Power-Fx-Functions-660x211.png 660w\" sizes=\"(max-width: 1357px) 100vw, 1357px\" \/><br \/>\n<strong>Conclusion<\/strong><\/h3>\n<p>The ability to dynamically manipulate data within Canvas Apps using Power Fx provides developers with a powerful tool to create more responsive and flexible user interfaces. By using functions like AddColumns, DropColumns, RenameColumns, and ShowColumns, we can enhance the user experience without creating additional fields in D365 CRM.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/services\/microsoft-power-platform\/microsoft-power-apps-canvas-app\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-39636\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/11\/Canvas-App-1.gif\" alt=\"Canvas-App\" width=\"800\" height=\"200\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working on a Canvas App within Power Apps,\u00a0we encountered a scenario where we needed an automated calculation to handle tax computations. Typically, this would require creating a new calculated field within the Dataverse to perform the calculation. However, adding a calculated field to the Dataverse seemed unnecessary in this case, as the calculation was\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2024\/12\/creating-custom-data-views-in-canvas-apps-with-power-fx-functions\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":15,"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":[1954,38],"tags":[1988,3089],"class_list":["post-40071","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-microsoft-powerapps","tag-canvas-apps","tag-power-fx-functions"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/40071","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\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=40071"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/40071\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=40071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=40071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=40071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}