{"id":22144,"date":"2020-01-10T12:39:57","date_gmt":"2020-01-10T12:39:57","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=22144"},"modified":"2020-01-15T06:57:14","modified_gmt":"2020-01-15T06:57:14","slug":"how-to-use-enhanced-reference-panel-in-uci-for-rendering-multiple-sub-grids","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/01\/how-to-use-enhanced-reference-panel-in-uci-for-rendering-multiple-sub-grids\/","title":{"rendered":"How to use Enhanced Reference Panel in UCI for rendering multiple sub-grids"},"content":{"rendered":"<p><strong>Introduction:<\/strong><\/p>\n<p>Enhanced Reference Panels is now available in UCI\/UII Client.<\/p>\n<p style=\"text-align: justify;\">Reference panel have been around for a couple of versions now. However, it has gone mostly unnoticed and under-utilized. Reference panels are a good way to organize sub-grid information without utilizing too much of the screen space. It is compact and allows quick access to information.<\/p>\n<p style=\"text-align: justify;\">Reference Panel is a type of a section and can be found under Section tab in the form designer. You can insert sub-grids and quick view forms only under this section, for more details you can refer our <a href=\"https:\/\/www.inogic.com\/blog\/2017\/12\/reference-panel-section-in-dynamics-365-v9-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">previous blog<\/a>.<\/p>\n<p>When rendered in the current version, this is how it shows up:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22145\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_1.png\" alt=\"\" width=\"374\" height=\"492\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_1.png 374w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_1-228x300.png 228w\" sizes=\"(max-width: 374px) 100vw, 374px\" \/><\/p>\n<p>With the latest release, some of the enhancements include:<\/p>\n<p>1) Display \u2013 You can switch between the panels using panel selector that docks either at the left or at the top depending on screen resolution.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22146\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_2.png\" alt=\"\" width=\"417\" height=\"670\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_2.png 417w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_2-187x300.png 187w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22147\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_3.png\" alt=\"\" width=\"393\" height=\"673\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_3.png 393w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_3-175x300.png 175w\" sizes=\"(max-width: 393px) 100vw, 393px\" \/><\/p>\n<p>2) You are now allowed to specify the image file for the icons that are displayed in the tab as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22148\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_4.png\" alt=\"\" width=\"968\" height=\"657\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_4.png 968w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_4-300x204.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_4-768x521.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_4-660x448.png 660w\" sizes=\"(max-width: 968px) 100vw, 968px\" \/><\/p>\n<p><em>Note: Providing a .svg file provides for better presentation. Hence, it is advised to switch to svg images for all icons in Dynamics 365 CRM.<\/em><\/p>\n<p>3) Once the grid is added to the panel, along with the native behavior of grid with options to add new record, you now have the ability to get a quick view of any of the records in the grid by simply clicking on the record as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22149\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_5.png\" alt=\"\" width=\"1136\" height=\"348\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_5.png 1136w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_5-300x92.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_5-768x235.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_5-1024x314.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_5-660x202.png 660w\" sizes=\"(max-width: 1136px) 100vw, 1136px\" \/><\/p>\n<p>Given below is the screenshot of quick view form:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22150\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_6.png\" alt=\"\" width=\"1139\" height=\"277\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_6.png 1139w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_6-300x73.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_6-768x187.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_6-1024x249.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_6-660x161.png 660w\" sizes=\"(max-width: 1139px) 100vw, 1139px\" \/><\/p>\n<p>You can open multiple records and they are displayed as tabs that you can switch between, as shown in below screenshot:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-22151\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_7.png\" alt=\"\" width=\"1139\" height=\"247\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_7.png 1139w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_7-300x65.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_7-768x167.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_7-1024x222.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/Ref-Panel_7-660x143.png 660w\" sizes=\"(max-width: 1139px) 100vw, 1139px\" \/><\/p>\n<p>The data shown in these tabs is based on the default quick view form designed for the entity.<\/p>\n<p><strong>Conclusion: <\/strong><\/p>\n<p>Next time you work on a form design, make use of the reference panels to make it a clean and compact interface!<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/product\/components\/map-my-relationships-dynamics-365-crm\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"wp-image-21952 alignleft\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/2-4.jpg\" alt=\"\" width=\"645\" height=\"215\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/2-4.jpg 600w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2020\/01\/2-4-300x100.jpg 300w\" sizes=\"(max-width: 645px) 100vw, 645px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Enhanced Reference Panels is now available in UCI\/UII Client. Reference panel have been around for a couple of versions now. However, it has gone mostly unnoticed and under-utilized. Reference panels are a good way to organize sub-grid information without utilizing too much of the screen space. It is compact and allows quick access to\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2020\/01\/how-to-use-enhanced-reference-panel-in-uci-for-rendering-multiple-sub-grids\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":22265,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,18,59],"tags":[1997,1996],"class_list":["post-22144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-uci","tag-enhanced-reference-panel-in-uci","tag-multiple-sub-grids"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/22144","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=22144"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/22144\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/22265"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=22144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=22144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=22144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}