{"id":33983,"date":"2023-02-10T14:42:04","date_gmt":"2023-02-10T09:12:04","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=33983"},"modified":"2024-09-20T16:09:34","modified_gmt":"2024-09-20T10:39:34","slug":"how-to-display-search-and-filter-data-table-in-canvas-app","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/02\/how-to-display-search-and-filter-data-table-in-canvas-app\/","title":{"rendered":"How to Display, Search, and Filter data table in Canvas App"},"content":{"rendered":"

The agenda for today\u2019s blog is-<\/strong>
\n1. How to show CRM entity data in tabular format using a data table control of the Canvas App<\/a>.
\n2. How to read the selected data table row details.
\n3. How to filter or search data table data based on some condition.<\/p>\n

Requirement:<\/strong>
\nWe have a customer requirement in that the user wants to display the Accounts on the Data Table control. After displaying Accounts on the Data Table, the user wants to search Accounts data based on the Account Name column along with that user wants to read the individual row data, if any user clicks on an individual row then retrieved data should be displayed on a specific form. One more important requirement users have, they need to filter the Accounts which contain Annual Revenue of more than 5000.<\/p>\n

Solution:<\/strong>
\nTo achieve the above customer requirement, we have created a Canvas App and tried to implement the above three requirements one by one.
\n1. Display the Account entity records on the Data Table control
\nAfter creating the Canvas App, add Data Table control on the current app screen as shown in the screenshot below:<\/p>\n

\"Canvas<\/p>\n

After adding the data table control, we have to set the Data Source property for added Data Table. So, in our scenario, we have selected the Account entity because the user wants to see the Account entity records.<\/p>\n

\"Canvas<\/p>\n

After setting the Account entity as Data Source and running the Canvas App, we have got all Account entity records bound in the data table.<\/p>\n

\"Canvas<\/p>\n

2. How to read the selected data table row details.
\nTo achieve this, add one Edit Form control on the same screen of the app as shown below screenshot:<\/p>\n

\"Canvas<\/p>\n

After adding Edit Form we have to set the Item and Data Source properties of the form. In our example, we have set the Item as \u201cAccount.Selected\u201d, where Account indicates the Data Table object and Selected indicates the selected row of the current data table. Also, we have set the Data Source property as \u201cAccounts\u201d as we have connected this form to Account Data Table.<\/p>\n

\"Canvas<\/p>\n

After saving the above changes we have again run the canvas app and we got the correct result bind in Edit Form as shown in the screenshot below:<\/p>\n

\"Canvas<\/p>\n

3. How to filter or search data table data based on some condition
\nTo search data in Data Table we have added a Text Input control on the same screen of the app. After adding the Text Input apply the PowerFx formula to the Accounts data table as follows which helps to show only those accounts which contain the Account Name column.<\/p>\n

Search(Accounts,TextInput1.Text,”name”)<\/p>\n

After setting the above powerFx formula we have run the Canvas App and we got the expected output as shown screenshot below:<\/p>\n

\"Canvas<\/p>\n

In the filter process, the customer wants to display those Accounts which having Annual Revenue of more than 5000. To achieve this requirement, we have set the below powerFx formula to the Data Table and we have got the correct result as shown below screenshot:
\nFilter(Accounts,’Annual Revenue’>=5000)<\/p>\n

\"Canvas<\/p>\n

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

Using Data Table control in Canvas App we can display the CRM entity records in table format in Canvas App. Also using the Search and Filter function, we can filter the data based on some conditions.<\/p>\n

\"Canvas<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

The agenda for today\u2019s blog is- 1. How to show CRM entity data in tabular format using a data table control of the Canvas App. 2. How to read the selected data table row details. 3. How to filter or search data table data based on some condition. Requirement: We have a customer requirement in\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":[1954],"tags":[1867],"class_list":["post-33983","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","tag-canvas-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/33983","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=33983"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/33983\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=33983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=33983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=33983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}