{"id":34007,"date":"2023-02-14T15:44:37","date_gmt":"2023-02-14T10:14:37","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=34007"},"modified":"2023-02-20T16:26:15","modified_gmt":"2023-02-20T10:56:15","slug":"change-the-default-view-on-the-lookup-window-of-the-associated-sub-grid-table-using-javascript","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2023\/02\/change-the-default-view-on-the-lookup-window-of-the-associated-sub-grid-table-using-javascript\/","title":{"rendered":"Change the default view on the lookup window of the associated sub-grid table using JavaScript"},"content":{"rendered":"<p>Recently, we had a requirement where we had to set a <strong>default view<\/strong> based on the <strong>selected app<\/strong>. Let us suppose, we have two apps i.e., the <strong>Sales Hub app<\/strong> and <strong>Customer Service App<\/strong>. Suppose there are two different views of the <strong>\u2018Contact\u2019<\/strong> table. i.e., Sales Contact View (<strong>View 1<\/strong>) and Service Contact View (<strong>View 2<\/strong>). Now, we want to open the view based on App-specific from the <strong>Add Existing Contact<\/strong> Button which is present on the <strong>associated sub-grid<\/strong> and which opens a lookup window to show views. <strong>App-specific<\/strong> means, If I am using a Sales app then I want to show View1 as the default view in Lookup Window and if I am using the Service app then I want to show View2 as the default view in Lookup Window.<\/p>\n<p>Here, we know the one solution is that don\u2019t include Views in the App if we do not want to see views in the app but the problem here is that even if we keep the required views only in the App, the lookup window always shows one internal view i.e. <strong>Contact Lookup View. <\/strong>This is the OOB View of Contact table so here this View is showing data of all records irrespective of Sales and Service app which we do not want.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34014\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/1JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"737\" height=\"335\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/1JAVASCRIPT.jpeg 737w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/1JAVASCRIPT-300x136.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/1JAVASCRIPT-660x300.jpeg 660w\" sizes=\"(max-width: 737px) 100vw, 737px\" \/><\/p>\n<p>On click of the \u201cAdd Existing Contact\u201d button from the Associated Grid of Contact.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34013\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"1188\" height=\"544\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2JAVASCRIPT.jpeg 1188w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2JAVASCRIPT-300x137.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2JAVASCRIPT-1024x469.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2JAVASCRIPT-768x352.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2JAVASCRIPT-660x302.jpeg 660w\" sizes=\"(max-width: 1188px) 100vw, 1188px\" \/><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34012\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"1357\" height=\"745\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3JAVASCRIPT.jpeg 1357w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3JAVASCRIPT-300x165.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3JAVASCRIPT-1024x562.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3JAVASCRIPT-768x422.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3JAVASCRIPT-660x362.jpeg 660w\" sizes=\"(max-width: 1357px) 100vw, 1357px\" \/><\/p>\n<p>So, we want to keep the default view based on the app i.e. \u201c<strong>Sales Contact View<\/strong>\u201d for the Sales app and \u201c<strong>Service Contact View<\/strong>\u201d for the Service app.<\/p>\n<p>But it is not possible with simple OOB configuration, so to achieve this we need to write some JavaScript coding on the click of the \u201c<strong>Add Existing Contact<\/strong>\u201d button and open the lookup window as per our need.<\/p>\n<p><strong>Let\u2019s see the below code to set the default view and lookup window based on the app:<\/strong><\/p>\n<ul>\n<li><strong>Code to check app name and set default views:<\/strong><\/li>\n<\/ul>\n<pre class=\"lang:css gutter:true start:1\">async function checkApp(primaryControl) {\r\n\r\n\/\/Validate primary control\r\n\r\nif (!(primaryControl)) { return; }\r\n\r\n\u00a0\r\n\r\n\/\/pass primary control for ribbon\r\n\r\nformContext = primaryControl;\r\n\r\n\/\/get globalcontext\r\n\r\nlet globalContext = Xrm.Utility.getGlobalContext();\r\n\r\n\/\/get app Name\r\n\r\nresult = await globalContext.getCurrentAppName().then(\r\n\r\nfunction (appName) {\r\n\r\n\/\/Switch case check App name\r\n\r\nswitch (appName) {\r\n\r\n\/\/For the Sales Hub app\r\n\r\ncase \"Sales Hub\":\r\n\r\n\/\/set default view as Sales Contact View\r\n\r\ndefaultviewId = \"c78afa9d-aca3-ed11-aad1-000d3a37604e\";\r\n\r\n\/\/Set Sales Views\r\n\r\nviewIds = [\"00000000-0000-0000-00aa-000010001004\", \"c78afa9d-aca3-ed11-aad1-000d3a37604e\"],\r\n\r\n\/\/call setDefaultView function\r\n\r\nsetDefaultView(formContext, viewIds, defaultviewId);\r\n\r\nbreak;\r\n\r\n\/\/For Customer Service Hub app\r\n\r\ncase \"Customer Service Hub\":\r\n\r\n\/\/set default view as Service Contact View\r\n\r\ndefaultviewId = \"d419b71f-b4a3-ed11-aad1-000d3a37604e\";\r\n\r\n\/\/Set Service Views\r\n\r\nviewIds = [\"00000000-0000-0000-00aa-000010001003\", \"d419b71f-b4a3-ed11-aad1-000d3a37604e\"],\r\n\r\n\/\/call setDefaultView function\r\n\r\nsetDefaultView(formContext, viewIds, defaultviewId);\r\n\r\nbreak;\r\n\r\n}\r\n\r\n},\r\n\r\nfunction (err) {\r\n\r\nconsole.log('err ' + err.message)\r\n\r\n});\r\n\r\n}<\/pre>\n<ul>\n<li><strong>Code to open Lookup Window:<\/strong><\/li>\n<\/ul>\n<pre class=\"lang:css gutter:true start:1\">\/\/call setDefaultView function from checkapp function\r\n\r\nfunction setDefaultView(formContext, viewIds, defaultviewId) ()\r\n\r\n{\r\n\r\nvar lookupParameters = {};\r\n\r\n\/\/define data for lookupOptions\r\n\r\nvar lookupOptions =\r\n\r\n{\r\n\r\n\/\/list of entity types to be displayed in the lookup dialog\r\n\r\ndefaultEntityType: \"contact\",\r\n\r\n\/\/ default entityType need to be displayed\r\n\r\nentityTypes: [\"contact\"],\r\n\r\n\/\/allow multiple selections or not\r\n\r\nallowMultiSelect: false,\r\n\r\ndisableMru: true,\r\n\r\n\/\/Default view we need to be displayed\r\n\r\ndefaultViewId: defaultviewId,\r\n\r\n\/\/list multiple views we want to display in the lookup dialog\r\n\r\nviewIds: viewIds\r\n\r\n};\r\n\r\n\/\/open lookup window\r\n\r\nXrm.Utility.lookupObjects(lookupOptions).then(\r\n\r\nfunction (result) {\r\n\r\nif (result != null) {\r\n\r\nconsole.log(result);\r\n\r\n}\r\n\r\n}\r\n\r\n),\r\n\r\nfunction (error) { console.log(error); };\r\n\r\n}<\/pre>\n<p>After Code is completed, Create and Register the web resource having JS type and Add register on the \u201c<strong>Add Existing Contact<\/strong>\u201d button of the contact sub-grid through <strong>Ribbon Workbench <\/strong>as shown below screenshot:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34011\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"1408\" height=\"670\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4JAVASCRIPT.jpeg 1408w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4JAVASCRIPT-300x143.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4JAVASCRIPT-1024x487.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4JAVASCRIPT-768x365.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4JAVASCRIPT-660x314.jpeg 660w\" sizes=\"(max-width: 1408px) 100vw, 1408px\" \/><\/p>\n<p>After implementing the above changes click on <strong>Add Existing Button<\/strong> then the lookup window will open.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34010\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"1188\" height=\"544\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5JAVASCRIPT.jpeg 1188w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5JAVASCRIPT-300x137.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5JAVASCRIPT-1024x469.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5JAVASCRIPT-768x352.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5JAVASCRIPT-660x302.jpeg 660w\" sizes=\"(max-width: 1188px) 100vw, 1188px\" \/><\/p>\n<p>After that, you can see that the <strong>default view<\/strong> is set based on the script also other views are seen based on the app. You can set filter conditions on views to show the contacts you wanted to display.<\/p>\n<p>The below screenshot shows the <strong>Sales Hub app<\/strong> and sets <strong>Sales Contact View<\/strong> as the default view:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34009\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"1359\" height=\"745\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6JAVASCRIPT.jpeg 1359w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6JAVASCRIPT-300x164.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6JAVASCRIPT-1024x561.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6JAVASCRIPT-768x421.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6JAVASCRIPT-660x362.jpeg 660w\" sizes=\"(max-width: 1359px) 100vw, 1359px\" \/><\/p>\n<p>The below screenshot shows the <strong>Customer<\/strong> <strong>Service App <\/strong>and sets <strong>Service Contact Views<\/strong> as the default view:<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-34008\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/7JAVASCRIPT.jpeg\" alt=\"JAVASCRIPT\" width=\"1360\" height=\"746\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/7JAVASCRIPT.jpeg 1360w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/7JAVASCRIPT-300x165.jpeg 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/7JAVASCRIPT-1024x562.jpeg 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/7JAVASCRIPT-768x421.jpeg 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/7JAVASCRIPT-660x362.jpeg 660w\" sizes=\"(max-width: 1360px) 100vw, 1360px\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p>We can set the <strong>default view<\/strong> on the Lookup Window of the Associated Sub-grid table using JavaScript.<\/p>\n<p><a href=\"https:\/\/www.inogic.com\/product\/productivity-apps\/map-my-relationships-dynamics-365-crm\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"alignnone size-full wp-image-34017\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/Map-My-Relationships.png\" alt=\"Map My Relationships\" width=\"800\" height=\"200\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/Map-My-Relationships.png 800w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/Map-My-Relationships-300x75.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/Map-My-Relationships-768x192.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/Map-My-Relationships-660x165.png 660w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently, we had a requirement where we had to set a default view based on the selected app. Let us suppose, we have two apps i.e., the Sales Hub app and Customer Service App. Suppose there are two different views of the \u2018Contact\u2019 table. i.e., Sales Contact View (View 1) and Service Contact View (View\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2023\/02\/change-the-default-view-on-the-lookup-window-of-the-associated-sub-grid-table-using-javascript\/\">Read More &raquo;<\/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":[18,2361],"tags":[971],"class_list":["post-34007","post","type-post","status-publish","format-standard","hentry","category-dynamics-365-v9-2","category-technical","tag-javascript-2"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/34007","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=34007"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/34007\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=34007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=34007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=34007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}