{"id":35639,"date":"2023-08-04T17:30:37","date_gmt":"2023-08-04T12:00:37","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=35639"},"modified":"2023-08-04T17:30:37","modified_gmt":"2023-08-04T12:00:37","slug":"recent-records-component-and-show-customer-details-in-the-side-pane-in-dynamics-365-crm-customer-service","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/08\/recent-records-component-and-show-customer-details-in-the-side-pane-in-dynamics-365-crm-customer-service\/","title":{"rendered":"Recent records component and show customer details in the side pane in Dynamics 365 CRM Customer Service"},"content":{"rendered":"<p>In this article, We will discover more about the brand-new feature that Microsoft unveiled in the 2023 Release Wave 1. The recent records component allows users to view related cases on a form. Compared to the old grid, this component has better visualization of the record list. Also, we will see how we can see customer details in an app\u2019s side pane by using JavaScript.<\/p>\n<p><strong>Steps to Add Recent Records Component:<\/strong><\/p>\n<p>1. In Power Apps, Select the environment that contains your solution.<\/p>\n<p>2. From the left navigation pane, select Tables -&gt; Select Account -&gt; In Data Experience, Select Forms.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35653\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/1D365-Customer-Service-1.jpeg\" alt=\"D365 Customer Service\" width=\"798\" height=\"428\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/1D365-Customer-Service-1.jpeg 798w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/1D365-Customer-Service-1-300x161.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/1D365-Customer-Service-1-768x412.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/1D365-Customer-Service-1-660x354.jpeg 660w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><\/p>\n<p>3. Create a new main form or select the existing main form.<\/p>\n<p>4. Click Components in the form designer or on the ribbon bar.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35651\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/2D365-Customer-Service-1.jpeg\" alt=\"D365 Customer Service\" width=\"847\" height=\"163\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/2D365-Customer-Service-1.jpeg 847w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/2D365-Customer-Service-1-300x58.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/2D365-Customer-Service-1-768x148.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/2D365-Customer-Service-1-660x127.jpeg 660w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/p>\n<p>5. On the bottom side, click on Get More Components to import the component; if it is already imported, it will display under the More Components category.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35647\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/3D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"313\" height=\"182\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/3D365-Customer-Service.jpeg 313w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/3D365-Customer-Service-300x174.jpeg 300w\" sizes=\"(max-width: 313px) 100vw, 313px\" \/><\/p>\n<p>6. After clicking on Get More Components, search for Recent Records and click on Add.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35646\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/4D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"867\" height=\"410\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/4D365-Customer-Service.jpeg 867w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/4D365-Customer-Service-300x142.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/4D365-Customer-Service-768x363.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/4D365-Customer-Service-660x312.jpeg 660w\" sizes=\"(max-width: 867px) 100vw, 867px\" \/><\/p>\n<p>7. Drag the Component onto the form, and the window will appear.<\/p>\n<p>Select Case Table -&gt; Select all cases to view<\/p>\n<p>Now check the checkbox in the column header and select Account Name in the table column field, otherwise, records will not be filtered.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35645\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"287\" height=\"619\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5D365-Customer-Service.jpeg 287w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/5D365-Customer-Service-139x300.jpeg 139w\" sizes=\"(max-width: 287px) 100vw, 287px\" \/><\/p>\n<p>8. Click on Done.<\/p>\n<p>Once you click on done then, all cases will be displayed in component. On the right-hand side, the properties pane check shows the related records checkbox and a popup will appear if you click on the reset component. Again, select tables and view because, as we check the show related records checkbox, the component gets reset.<\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-35644\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"745\" height=\"316\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6D365-Customer-Service.jpeg 862w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6D365-Customer-Service-300x127.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6D365-Customer-Service-768x326.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/6D365-Customer-Service-660x280.jpeg 660w\" sizes=\"(max-width: 745px) 100vw, 745px\" \/><\/p>\n<p>9. Click on the Save and Publish button.<\/p>\n<p>Now all the recent cases with their information belonging to that record will be displayed in the recent record component. You can click on the Case name to open the Case. Case number, Origin, Customer, and Priority details will be displayed on the component.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35643\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"862\" height=\"376\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7D365-Customer-Service.jpeg 862w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7D365-Customer-Service-300x131.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7D365-Customer-Service-768x335.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/7D365-Customer-Service-660x288.jpeg 660w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/p>\n<p><strong><u>Show Customer Details in the app side pane:<\/u><\/strong><\/p>\n<p>To visualize the customer data, Microsoft has added some JavaScript web resources in the customer services module. This will help load Customer details on a side pane.<\/p>\n<p>There are two different events used that we have registered as follow:<\/p>\n<p>1. When a case form is opened (on the Load event)<\/p>\n<p>2. When a customer field is changed (on the Change event)<\/p>\n<p>You need to add these two events to the Case entity main form.<\/p>\n<p><strong>Please follow the below steps to register on load event on case entity form:<\/strong><\/p>\n<p>1. Go to Power Apps.<\/p>\n<p>2. From the left navigation pane, select Tables -&gt; Select Case -&gt; In Data Experience, Select Forms -&gt; Select existing main form.<\/p>\n<p>3. On right hand side, click on the event tab:<\/p>\n<p>Specify the following details:<\/p>\n<p>a. Click on Event Handler.<\/p>\n<p>b. Select Event Type -&gt; On Load.<\/p>\n<p>c. Select Library.<\/p>\n<p>If the library is not available, then click on add library and search, and click on add.<\/p>\n<p>\u201c<strong>ModernCaseManagement\/Incident\/msdyn_ModernCaseManagement<\/strong><strong>\u201d<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35642\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/8D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"862\" height=\"383\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/8D365-Customer-Service.jpeg 862w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/8D365-Customer-Service-300x133.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/8D365-Customer-Service-768x341.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/8D365-Customer-Service-660x293.jpeg 660w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/p>\n<p>d. In the function field, set the function value as:<\/p>\n<p><strong><em>ModernCaseManagement.ModernCaseManagementLibrary.onCustomerChange(executionContext)<\/em><\/strong><\/p>\n<p>e. Select Enabled and Pass execution context as first parameter checkboxes.<\/p>\n<p>f. Click on Done.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-35641\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/9D365-Customer-Service.jpeg\" alt=\"D365 Customer Service\" width=\"862\" height=\"360\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/9D365-Customer-Service.jpeg 862w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/9D365-Customer-Service-300x125.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/9D365-Customer-Service-768x321.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/9D365-Customer-Service-660x276.jpeg 660w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/p>\n<p>g. Click on Save and Publish.<\/p>\n<p><strong>Please follow the below steps to register on change event in Customer field:<\/strong><\/p>\n<p>1. Go to Power Apps.<\/p>\n<p>2. From the left navigation pane, select tables -&gt; Select Case -&gt; In Data experience, Select Forms -&gt; Select existing main form.<\/p>\n<p>3. Click on Customer field -&gt; On the right-hand side, click on the event tab.<\/p>\n<p>Specify the following details:<\/p>\n<p>a. Click on Event Handler.<\/p>\n<p>b. Select Event Type -&gt; On Change.<\/p>\n<p>c. Select Library. If the library is not available, then click on add library and search, and click on add.<\/p>\n<p>\u201c<strong>ModernCaseManagement\/Incident\/msdyn_ModernCaseManagement<\/strong><strong>\u201d<\/strong><\/p>\n<p>d. In the function field, set the function value as:<\/p>\n<p><strong><em>ModernCaseManagement.ModernCaseManagementLibrary.onCustomerChange<\/em><\/strong><\/p>\n<p>e. Select Enabled and Pass execution context as the first parameter Checkboxes.<\/p>\n<p>f. Click on Done.<\/p>\n<p>Below is a screenshot of the Customer detail pane when the user opens any case record or changes a customer on the case form.<\/p>\n<p><strong> <img decoding=\"async\" class=\"alignnone size-full wp-image-35654\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/10D365-Customer-Service-3.jpeg\" alt=\"D365 Customer Service\" width=\"862\" height=\"406\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/10D365-Customer-Service-3.jpeg 862w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/10D365-Customer-Service-3-300x141.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/10D365-Customer-Service-3-768x362.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/10D365-Customer-Service-3-660x311.jpeg 660w\" sizes=\"(max-width: 862px) 100vw, 862px\" \/><\/strong><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>Recent Record component gives a better user experience and visualization, and after configuring events, we can visualize customer details without switching entities.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/services\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-35657\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/08\/Microsoft-Power-Platform.gif\" alt=\"Microsoft Power Platform\" width=\"800\" height=\"200\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, We will discover more about the brand-new feature that Microsoft unveiled in the 2023 Release Wave 1. The recent records component allows users to view related cases on a form. Compared to the old grid, this component has better visualization of the record list. Also, we will see how we can see\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2023\/08\/recent-records-component-and-show-customer-details-in-the-side-pane-in-dynamics-365-crm-customer-service\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":11,"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":[12,38],"tags":[571],"class_list":["post-35639","post","type-post","status-publish","format-standard","hentry","category-customer-service","category-microsoft-powerapps","tag-dynamics-365-power-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/35639","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=35639"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/35639\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=35639"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=35639"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=35639"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}