Merged PR 8007: Add visual header control demo

Add visual header control demo
![image.png](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/8007/attachments/image%20(2).png)

Author: laurent-mic

demo/package.json

@@ -35,7 +35,7 @@
     "fetch": "^1.0.0",
     "http-server": "^0.10.0",
     "jquery": "^3.1.0",
-    "powerbi-client": "2.6.0",
+    "powerbi-client": "2.6.1",
     "syntaxhighlighter": "4.0.1"
   },
   "devDependencies": {}

demo/v2-demo/scripts/codesamples.js

@@ -948,6 +948,115 @@ function _Report_ApplyCustomLayout() {
         });
 }
 
+function _Report_HideAllVisualHeaders() {
+
+    // New settings to hide all the visual headers in the report
+    const newSettings = {
+      visualSettings: {
+        visualHeaders: [
+          {
+            settings: {
+              visible: false
+            }
+            // No selector - Hide visual header for all the visuals in the report
+          }
+        ]
+      }
+    };
+
+    // Get a reference to the embedded report HTML element
+    var embedContainer = $('#embedContainer')[0];
+
+    // Get a reference to the embedded report.
+    report = powerbi.get(embedContainer);
+
+    // Update the settings by passing in the new settings you have configured.
+    report.updateSettings(newSettings)
+        .then(function () {
+            Log.log("Visual header was successfully hidden for all the visuals in the report.");
+        })
+        .catch(function (error) {
+            Log.log(errors);
+        });
+
+}
+
+function _Report_ShowAllVisualHeaders() {
+    // New settings to show all the visual headers in the report
+    const newSettings = {
+      visualSettings: {
+        visualHeaders: [
+          {
+            settings: {
+              visible: true
+            }
+            // No selector - Show visual header for all the visuals in the report
+          }
+        ]
+      }
+    };
+
+    // Get a reference to the embedded report HTML element
+    var embedContainer = $('#embedContainer')[0];
+
+    // Get a reference to the embedded report.
+    report = powerbi.get(embedContainer);
+
+    // Update the settings by passing in the new settings you have configured.
+    report.updateSettings(newSettings)
+        .then(function () {
+            Log.log("Visual header was successfully shown for all the visuals in the report.");
+        })
+        .catch(function (error) {
+            Log.log(errors);
+        });
+
+}
+
+function _Report_HideSingleVisualHeader() {
+
+    // Define settings to hide the header of a single visual
+    var newSettings = {
+      visualSettings: {
+        visualHeaders: [
+          {
+            settings: {
+              visible: true
+            }
+            // No selector - Show visual header for all the visuals in the report
+          },
+          {
+            settings: {
+              visible: false
+            },
+            selector: {
+                $schema: "http://powerbi.com/product/schema#visualSelector",
+                visualName: "VisualContainer7"
+                // The visual name can be retrieved using getVisuals()
+                // Hide visual header for a single visual only
+            }
+          }
+        ]
+      }
+    };
+
+    // Get a reference to the embedded report HTML element
+    var embedContainer = $('#embedContainer')[0];
+
+    // Get a reference to the embedded report.
+    report = powerbi.get(embedContainer);
+
+    // Update the settings by passing in the new settings you have configured.
+    report.updateSettings(newSettings)
+        .then(function () {
+            Log.log("Visual header was successfully hidden for 'Total Sales Variance by FiscalMonth and District Manager' visual.");
+        })
+        .catch(function (error) {
+            Log.log(errors);
+        });
+
+}
+
 function _Report_FullScreen() {
     // Get a reference to the embedded report HTML element
     var embedContainer = $('#embedContainer')[0];

demo/v2-demo/scripts/step_embed.js

@@ -59,6 +59,18 @@ function Report_ApplyCustomLayout() {
     SetCode(_Report_ApplyCustomLayout);
 }
 
+function Report_HideAllVisualHeaders() {
+    SetCode(_Report_HideAllVisualHeaders);
+}
+
+function Report_ShowAllVisualHeaders() {
+    SetCode(_Report_ShowAllVisualHeaders);
+}
+
+function Report_HideSingleVisualHeader() {
+    SetCode(_Report_HideSingleVisualHeader);
+}
+
 // ---- Page Operations ----------------------------------------------------
 
 function Page_SetActive() {

demo/v2-demo/settings_interact_report.html

@@ -54,10 +54,14 @@
                         </ul>
                         <li id="layout-operations" onclick="OpenLayoutOperations();"><a href="#">Layout</a>
                             <span class="tryShowcase" onclick="OpenLayoutOperations();onShowcaseTryMeClicked('CustomLayout');">(<span class="tryMeText">Showcase</span> <img src="images/tab_out.svg">)</span>
+                            <div class="highlightSection"></div>
                         </li>
                         <ul id="layout-operations-ul" class="function-ul" style="display: none;">
                             <li onclick="Report_ApplyCustomLayout()" class="hideOnMobile hideOnReportCreate"><a href="#">Apply custom Layout</a></li>
                             <li onclick="Page_HasLayout()"><a href="#">Check layout</a></li>
+                            <li onclick="Report_HideAllVisualHeaders()" class="hideOnMobile hideOnReportCreate"><a href="#">Hide all visual headers</a><div class="newFeature">NEW</div></li>
+                            <li onclick="Report_ShowAllVisualHeaders()" class="hideOnMobile hideOnReportCreate"><a href="#">Show all visual headers</a><div class="newFeature">NEW</div></li>
+                            <li onclick="Report_HideSingleVisualHeader()" class="hideOnMobile hideOnReportCreate"><a href="#">Hide single visual header</a><div class="newFeature">NEW</div></li>
                         </ul>
                         <li id="bookmarks-operations" onclick="OpenBookmarksOperations();" class="hideOnMobile"><a href="#">Bookmarks</a>
                             <span class="tryShowcase" onclick="OpenBookmarksOperations();onShowcaseTryMeClicked('Bookmarks');">(<span class="tryMeText">Showcase</span> <img src="images/tab_out.svg">)</span>