{"id":20240,"date":"2019-08-14T12:30:28","date_gmt":"2019-08-14T12:30:28","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=20240"},"modified":"2019-12-10T13:18:58","modified_gmt":"2019-12-10T13:18:58","slug":"introducing-microsoft-wave-2-new-feature-high-density-header","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2019\/08\/introducing-microsoft-wave-2-new-feature-high-density-header\/","title":{"rendered":"Introducing Microsoft Wave 2 Release New Feature &#8211; High Density Header"},"content":{"rendered":"<h2><strong>Introduction<\/strong><\/h2>\n<p style=\"text-align: justify;\">With the commencement of Wave 2 Microsoft has introduced another cool feature &#8211; <strong>\u2018High Density Header\u2019<\/strong>. Well, High Density Header is a different approach towards the visual representation of form headers. This is also a step towards making the Unified Interface the primary Interface as this feature even though is implemented by default only gets implemented in the UCI forms and can only be edited from the very new form designer.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20241\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/1Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1273\" height=\"719\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/1Microsoft-Wave-2.png 1273w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/1Microsoft-Wave-2-300x169.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/1Microsoft-Wave-2-768x434.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/1Microsoft-Wave-2-1024x578.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/1Microsoft-Wave-2-660x373.png 660w\" sizes=\"(max-width: 1273px) 100vw, 1273px\" \/><\/p>\n<p style=\"text-align: justify;\">Now if we go to an Account record in the unified interface it can be seen that the High Density Header is already implemented and the fields placed before the flyout on the form header are read-only and thus, not editable.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20242\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/2Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1718\" height=\"646\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/2Microsoft-Wave-2.png 1718w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/2Microsoft-Wave-2-300x113.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/2Microsoft-Wave-2-768x289.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/2Microsoft-Wave-2-1024x385.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/2Microsoft-Wave-2-660x248.png 660w\" sizes=\"(max-width: 1718px) 100vw, 1718px\" \/><\/p>\n<p style=\"text-align: justify;\">Also on clicking on the fly out button we can see all the fields placed in the header including the ones already getting displayed before the fly out. The fields displayed under the fly out are either editable or read-only depending on whether or not they have been made read-only from the form editor as below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20243\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/3Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1644\" height=\"678\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/3Microsoft-Wave-2.png 1644w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/3Microsoft-Wave-2-300x124.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/3Microsoft-Wave-2-768x317.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/3Microsoft-Wave-2-1024x422.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/3Microsoft-Wave-2-660x272.png 660w\" sizes=\"(max-width: 1644px) 100vw, 1644px\" \/><\/p>\n<blockquote><p><strong>Note:<\/strong> The High Density Header only shows the first 4 fields from the list of fields before the fly out and in read-only mode. The remaining fields along with those first 4 fields gets displayed in the fly out.<\/p><\/blockquote>\n<p style=\"text-align: justify;\">Now, from the new designer when you open the Account form you shall see a message to edit the header density as highlighted in the image below, using which you can navigate to the header properties.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20244\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/4Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1888\" height=\"726\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/4Microsoft-Wave-2.png 1888w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/4Microsoft-Wave-2-300x115.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/4Microsoft-Wave-2-768x295.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/4Microsoft-Wave-2-1024x394.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/4Microsoft-Wave-2-660x254.png 660w\" sizes=\"(max-width: 1888px) 100vw, 1888px\" \/><\/p>\n<p>Or you can click on the header and edit the header properties as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20245\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/5Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1770\" height=\"555\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/5Microsoft-Wave-2.png 1770w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/5Microsoft-Wave-2-300x94.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/5Microsoft-Wave-2-768x241.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/5Microsoft-Wave-2-1024x321.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/5Microsoft-Wave-2-660x207.png 660w\" sizes=\"(max-width: 1770px) 100vw, 1770px\" \/><\/p>\n<blockquote><p>Note:<\/p>\n<ul>\n<li>The fields seen before the fly out are by default in read-only mode irrespective of the fact that whether or not they have been made read-only from the form editor. But the behaviour of the same fields in the fly out totally depend on whether or not they have been made read-only from the form editor.<\/li>\n<li>In the screenshots of the Account form you see only 3 fields in the read-only mode before the fly out because there are only 3 fields placed on the Account header. You can add more than 4 fields as well and while trying to do so you will get the following message as shown below:<\/li>\n<\/ul>\n<\/blockquote>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20246\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/6Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1834\" height=\"586\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/6Microsoft-Wave-2.png 1834w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/6Microsoft-Wave-2-300x96.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/6Microsoft-Wave-2-768x245.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/6Microsoft-Wave-2-1024x327.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/6Microsoft-Wave-2-660x211.png 660w\" sizes=\"(max-width: 1834px) 100vw, 1834px\" \/><\/p>\n<p>Once you have added more than 4 fields in header, it will be displayed on the form as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20247\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/7Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1656\" height=\"677\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/7Microsoft-Wave-2.png 1656w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/7Microsoft-Wave-2-300x123.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/7Microsoft-Wave-2-768x314.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/7Microsoft-Wave-2-1024x419.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/7Microsoft-Wave-2-660x270.png 660w\" sizes=\"(max-width: 1656px) 100vw, 1656px\" \/><\/p>\n<p style=\"text-align: justify;\">And finally if you have unchecked the option to show header fly out then you will only see the read-only fields and there will be no fly out available on the header as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20248\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/8Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1648\" height=\"686\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/8Microsoft-Wave-2.png 1648w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/8Microsoft-Wave-2-300x125.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/8Microsoft-Wave-2-768x320.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/8Microsoft-Wave-2-1024x426.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/8Microsoft-Wave-2-660x275.png 660w\" sizes=\"(max-width: 1648px) 100vw, 1648px\" \/><\/p>\n<p style=\"text-align: justify;\">Well the High Density Header is definitely a welcoming feature by Microsoft which will be very useful in incorporating more than the usual basic details in the header itself.<\/p>\n<p style=\"text-align: justify;\">However, it should be noted that even though we are in the process to totally move over to the unified interface and leave behind the classic web client, adding more than 4 fields in the high density header kind of breaks the header in the classic interface as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20249\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/9Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1832\" height=\"582\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/9Microsoft-Wave-2.png 1832w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/9Microsoft-Wave-2-300x95.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/9Microsoft-Wave-2-768x244.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/9Microsoft-Wave-2-1024x325.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/9Microsoft-Wave-2-660x210.png 660w\" sizes=\"(max-width: 1832px) 100vw, 1832px\" \/><\/p>\n<p>This can also be witnessed by the notifications displayed on the classic form editor as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20250\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/10Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1030\" height=\"384\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/10Microsoft-Wave-2.png 1030w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/10Microsoft-Wave-2-300x112.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/10Microsoft-Wave-2-768x286.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/10Microsoft-Wave-2-1024x382.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/10Microsoft-Wave-2-660x246.png 660w\" sizes=\"(max-width: 1030px) 100vw, 1030px\" \/><\/p>\n<h3><strong>For Developers<\/strong><\/h3>\n<p style=\"text-align: justify;\">The header attributes can be accessed normally from the JavaScript. So let\u2019s say if we want to make the field \u2018<strong>Number Of Employees<\/strong>\u2019 on the header required programmatically using script, we can do it with the help of the piece of code given below:<\/p>\n<p><strong><em>\u00a0formContext.getAttribute(&#8220;numberofemployees&#8221;).setRequiredLevel(&#8220;required&#8221;);<\/em><\/strong><\/p>\n<p>This will give us the below result, where the field in the fly out becomes required and not the one before that.<\/p>\n<p style=\"padding-left: 40px;\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-20251\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/11Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"598\" height=\"369\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/11Microsoft-Wave-2.png 598w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/11Microsoft-Wave-2-300x185.png 300w\" sizes=\"(max-width: 598px) 100vw, 598px\" \/><\/p>\n<p>And if this field is present on the form then it will also become required as shown below:<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-20252\" style=\"border: 1px solid #0a0a0a; padding: 1px; margin: 1px;\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/12Microsoft-Wave-2.png\" alt=\"Microsoft Wave 2\" width=\"1228\" height=\"419\" srcset=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/12Microsoft-Wave-2.png 1228w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/12Microsoft-Wave-2-300x102.png 300w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/12Microsoft-Wave-2-768x262.png 768w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/12Microsoft-Wave-2-1024x349.png 1024w, https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2019\/08\/12Microsoft-Wave-2-660x225.png 660w\" sizes=\"(max-width: 1228px) 100vw, 1228px\" \/><\/p>\n<h2><strong>Conclusion<\/strong><\/h2>\n<p style=\"text-align: justify;\">As illustrated above Microsoft Wave 2 \u2013 High Density Header &#8211; is a very useful and welcoming feature which incorporates more than usual basic details in header making it more effective and functional.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction With the commencement of Wave 2 Microsoft has introduced another cool feature &#8211; \u2018High Density Header\u2019. Well, High Density Header is a different approach towards the visual representation of form headers. This is also a step towards making the Unified Interface the primary Interface as this feature even though is implemented by default only\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2019\/08\/introducing-microsoft-wave-2-new-feature-high-density-header\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":20260,"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":[1920],"tags":[1921,1922],"class_list":["post-20240","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-wave-2","tag-high-density-header","tag-microsoft-wave-2"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/20240","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=20240"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/20240\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/20260"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=20240"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=20240"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=20240"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}