Recently one of our client had a requirement where the user wanted to experience the sub-grids in Unified Interface in the same way as classic web sub-grid.<\/p>\n
Let\u2019s go through the below sub-grid example in Grid mode:<\/p>\n
Layout1 (Desktop sized screen):<\/strong><\/p>\n When client was operating the same sub-grid on phone screen, they experienced change in layout of sub-grid to list mode due to responsive nature of UCI.<\/p>\n Layout2 (Phone sized screen):<\/strong><\/p>\n As you can see below only limited columns were displayed for records in the List layout:<\/p>\n However, if user would like to sort with other columns in Unified Interface, let\u2019s say with 5th<\/sup> column in our example i.e. Currency (Price List) column<\/strong> then, to do so there is an option available under eclipse highlighted below:<\/p>\n By clicking on eclipse all the available columns in the sub-grid would be displayed for sorting. Let\u2019s continue sorting with Currency (Price List) as shown below:<\/p>\n Records would be sorted on Currency (Price List) column as shown below:<\/p>\n But the client was not looking for this kind of REFLOW behaviour of Sub-grid, they were looking for traditional sub-grid layout which will show all the columns\/data in the grid layout.<\/p>\n So we explored more and observed that above Sub-Grid List layout in Unified Interface can be configured by configuring \u2018Reflow Behavior\u2019<\/strong><\/p>\n The available layouts for sub-grid are as follows:<\/p>\n For setting one of the above layout, you must follow the steps given below:<\/p>\n 1<\/strong>. Open the sub-grid to be configured from form editor<\/p>\n 2<\/strong>. Add new \u2018Read Only Grid\u2019<\/strong> control which is available on all types of mediums (Web, Tablet, and Phone) as shown below:<\/p>\n Note: The Read Only Grid control specifies how a grid should reflow to different sized screens.<\/p><\/blockquote>\n 3<\/strong>. Click on edit option to configure \u2018Reflow Behavior\u2019<\/strong> as shown in below screen:<\/p>\n 4<\/strong>. As you can see above, it gives us control to decide whether the Sub-grid is to be shown as Reflow, Grid or List Layout.<\/p>\n 5<\/strong>. Let\u2019s say that the client requirement, irrespective of window screen size, is for sub-grid to be displayed in Grid layout only<\/strong>. Then to achieve this requirement select the option \u2018Grid Only\u2019<\/strong> as shown below:<\/p>\n 6<\/strong>. Once done with configuration, check on any window screen size and you will get the same Grid layout <\/strong>experience of sub-grid irrespective of different window sizes.<\/p>\n As shown below in Layout1 and Layout2 you will experience the same Grid layout<\/strong> (Configured above) for all window screen size.<\/p>\n Layout1 (Desktop sized screen):<\/strong><\/p>\n Layout2 (Phone sized screen):<\/strong><\/p>\n Note: As shown in Layout2, user can scroll back and forth with the help of available scroll bar to view all columns as they are restricted to few columns in the list layout of sub-grid before.<\/p><\/blockquote>\n The concept of Reflow behavior is very useful in Unified Interface while designing forms and sub-grids on different window sizes.<\/p>\n Gamifics365<\/a> <\/strong>\u2013 Spin the magic of games within Microsoft Dynamics 365 CRM to improve user adoption, enhance productivity, and achieve company goals!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Introduction Dynamics 365 CRM Unified Interface version 9.x. and above has brought many changes in the UI forms. This has made forms more appealing to eyes when used on different sized screens. You must have experienced the different behavior of sub-grid while operating on different screens (like Web, Tablet, Phone, etc.) For example, when you\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":20586,"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":[16,18,60],"tags":[1751],"class_list":["post-20573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-365-v9-2","category-unified-interfaceuci","tag-unified-interface"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/20573","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=20573"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/20573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/20586"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=20573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=20573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=20573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/1How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/2How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/3How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/4How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/5How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n\n
![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/6How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/7How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/8How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/9How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\n![\"How](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/09\/10How-to-rearrange-traditional-sub-grid-in-Dynamics-365-CRM-Unified-Interface.png\")
<\/p>\nConclusion<\/strong><\/h2>\n