Merged PR 5692: Playground adjustments

Playground adjustments
* Scroll to the top on Sample selection
* Hover color added to copy button
* Dialog input selected by default
* Function comments adjustments
* Clean log when switching between samples
* Hide features on interact tab for Mobile and Create Mode
* Bookmark dialog - bookmark name appears twice bug fix
* Custom layout, fix the bug visuals list duplicate

demo/v2-demo/docs.html

@@ -2,20 +2,20 @@
     <div id="docs-content">
         <div class="docs-line">
             <div class="docs-links">
-                <h2>Getting Started</h2>
+                <h2>Getting started</h2>
                 <a href="https://github.com/Microsoft/powerbi-javascript/wiki">Power BI JavaScript API wiki</a><br>
                 <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedding">Power BI Embedding Documentation</a><br>
             </div>
             <div class="docs-links">
-                <h2>Useful Links</h2>
+                <h2>Useful links</h2>
                 <a href="https://azure.microsoft.com/en-us/services/power-bi-embedded/">Power BI Embedded on Azure</a><br>
-                <a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI Community</a><br>
+                <a href="https://community.powerbi.com/t5/Forums/ct-p/Forums">Power BI community</a><br>
-                <a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and Embedding</a><br>
+                <a href="https://ideas.powerbi.com/forums/265200-power-bi-ideas/category/161718-apis-and-embedding">Power BI Ideas - APIs and embedding</a><br>
             </div>
             <div class="docs-links">
                 <h2>Support</h2>
                 <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-faq">Power BI Embedded FAQ</a><br>
-                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded Troubleshooting</a><br>
+                <a href="https://docs.microsoft.com/en-us/power-bi/developer/embedded-troubleshoot">Power BI Embedded troubleshooting</a><br>
                 <a href="https://powerbi.microsoft.com/en-us/support/">Power BI Support</a><br>
             </div>
         </div>
@@ -30,11 +30,11 @@
                 <iframe width="330" height="186" src="https://www.youtube.com/embed/NbsLRDMWNRI" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
             </div>
             <div class="docs-video">
-                Get an Embed Token & Embed Your Analytics<br>
+                Get an embed token & embed your analytics<br>
                 <iframe width="330" height="186" src="https://www.youtube.com/embed/GPHHdDRSlis" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
             </div>
             <div class="docs-video">
-                Setting up and Getting Started<br>
+                Setting up and getting started<br>
                 <video width="330" height="186" controls="controls" preload="metadata">
                     <source src="https://sec.ch9.ms/ch9/5da0/29725d07-f7c3-4090-8b80-a5881e5d5da0/PowerBiEmbeddedPart1_high.mp4#t=12.6" type="video/mp4">
                     Your browser does not support the video tag.
@@ -48,7 +48,7 @@
                 </video>
             </div>
             <div class="docs-video">
-                Extend Context Menu Feature<br>
+                Extend context menu feature<br>
                 <iframe width="330" height="186" src="https://www.youtube.com/embed/Yt4MGpD2cVk" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
             </div>
         </div>

demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.html

@@ -1,5 +1,5 @@
 <div id="showcases-text">
-    <h3>Bookmarks Showcase</h3>
+    <h3>Capture insights & share</h3>
     <br>
     <div id="showcases-description">
         Use this showcase to experience the capabilities of the bookmarks API, so your users can create and share their own bookmarks<br><br>

demo/v2-demo/live_showcases/bookmarks/showcase_bookmarks.js

@@ -8,6 +8,9 @@ var BookmarkShowcaseState = {
     nextBookmarkId: 1
 }
 
+const dialogTextSelectTimeout = 50;
+
+// Embed the report and retrieve the existing report bookmarks
 function embedBookmarksReport() {
 
     // Load sample report properties into session
@@ -136,6 +139,7 @@ function createBookmarksList(bookmarks) {
     }
 }
 
+// Capture new bookmark of the current state and update the bookmarks list
 function onBookmarkCaptureClicked() {
 
     // Element clicked animation
@@ -160,6 +164,7 @@ function onBookmarkCaptureClicked() {
     });
 }
 
+// Set the new captured bookmark as the active bookmark on the list
 function setCapturedBookmarkActive(bookmark) {
     // Add the new bookmark to the HTML list
     $('#bookmarksList').append(buildBookmarkElement(bookmark));
@@ -177,19 +182,19 @@ function setCapturedBookmarkActive(bookmark) {
     $('#bookmark_' + BookmarkShowcaseState.nextBookmarkId).attr('checked', true);
 }
 
+// Closes the dialog
 function onCloseDialogClicked() {
-
-    // Close the dialog
     $('#overlay').hide();
     $('#shareDialog').hide();
 }
 
+// Copy the dialog's input text
 function onDialogCopyClicked() {
-
+    CopyTextArea('#dialogInput', '#btnDialogCopy');
-    // Copy the input text
+    $('#dialogInput').select();
-    CopyTextArea('#dialogInput', '#btnDialogCopy')
 }
 
+// Apply clicked bookmark state and set it as the active bookmark on the list
 function onBookmarkClicked(element) {
 
     // Remove share boomark icon
@@ -221,6 +226,7 @@ function shareBookmark(element) {
     let shareUrl = location.href.substring(0, location.href.lastIndexOf("/")) + '/shareBookmark.html' + '?state=' + currentBookmark.state;
 
     // Set bookmark display name and share URL on dialog HTML code
+    $('#dialogBookmarkName').empty();
     var displayNameElement = document.createTextNode(currentBookmark.displayName);
     $('#dialogBookmarkName').append(displayNameElement);
     $('#dialogInput').val(shareUrl);
@@ -228,11 +234,15 @@ function shareBookmark(element) {
     // Show overlay and share dialog
     $('#overlay').show();
     $('#shareDialog').show();
+
+    // Select dialog input after the dialog is shown
+    setTimeout(function() {
+        $('#dialogInput').select();
+    }, dialogTextSelectTimeout);
 }
 
 // Build bookmark radio button HTML element
 function buildBookmarkElement(bookmark) {
-
     var labelElement = document.createElement("label");
     labelElement.setAttribute("class", "bookmarkContainer");
 

demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.html

@@ -1,5 +1,5 @@
 <div id="showcases-text">
-    <h3>Custom Layout Showcase</h3>
+    <h3>Control your report layout</h3>
     <br>
     <div id="showcases-description">
         Use this showcase to learn how to leverage the custom layout API for a dynamic embedding of visuals<br><br>

demo/v2-demo/live_showcases/custom_layout/showcase_custom_layout.js

@@ -17,6 +17,7 @@ var LayoutShowcaseState = {
     layoutPageName: null
 }
 
+// Embed the report and retrieve all report visuals
 function embedCustomLayoutReport() {
 
     // Load custom layout report properties into session
@@ -101,6 +102,9 @@ function createVisualsArray(reportVisuals) {
         return visual.title !== undefined;
     });
 
+    // Clear visuals list div
+    $('#visualsList').empty();
+
     // Build checkbox html list and insert the html code to visualsList div
     for (let visual of LayoutShowcaseState.layoutVisuals) {
         $('#visualsList').append(buildVisualElement(visual));
@@ -124,10 +128,9 @@ function renderVisuals() {
     let pageWidth = $('#embedContainer').width();
     let pageHeight = $('#embedContainer').height();
 
-    // Calculate total width for visuals decreasing the size of margins from the width of the page
+    // Calculate the width left for visuals per line by decreasing the margins width from the page width
     let visualsTotalWidth = pageWidth - (LayoutShowcaseConsts.margin * (LayoutShowcaseState.columns + 1));
 
-
     // Calculate the width of a single visual, according to the number of columns
     // For one and three columns visuals width will be a third of visuals total width
     let width = (LayoutShowcaseState.columns === ColumnsNumber.Two) ? (visualsTotalWidth / 2) : (visualsTotalWidth / 3);
@@ -223,16 +226,14 @@ function renderVisuals() {
     LayoutShowcaseState.layoutReport.updateSettings(settings);
 }
 
+// Update the visuals list with the change and rerender all visuals
 function onCheckboxClicked(checkbox) {
-
-    // Update the visuals list with the change and render all visuals
     LayoutShowcaseState.layoutVisuals.find(visual => visual.name === checkbox.value).checked = $(checkbox).is(':checked');
     renderVisuals();
 };
 
+// Update columns number and rerender the visuals
 function onColumnsClicked(num) {
-
-    // Update columns var and render all visuals
     LayoutShowcaseState.columns = num;
     renderVisuals();
 }

demo/v2-demo/scripts/report.js

@@ -161,6 +161,7 @@ function OpenInteractTab() {
         $("#settings").load("settings_interact_dashboard.html", function() {
             SetToggleHandler("operation-categories");
             LoadCodeArea("#embedCodeDiv", "");
+            hideFeaturesOnMobile();
         });
     }
     else if (entityType == EntityType.Qna)
@@ -185,6 +186,8 @@ function OpenInteractTab() {
         $("#settings").load("settings_interact_report.html", function() {
             SetToggleHandler("operation-categories");
             LoadCodeArea("#embedCodeDiv", "");
+            $('.hideOnReportCreate').toggle(GetSession(SessionKeys.EmbedMode) !== EmbedCreateMode);
+            hideFeaturesOnMobile();
         });
     }
 }
@@ -513,6 +516,8 @@ function EmbedAreaDesktopView() {
         setCodeArea(mode, entityType)
     }
 
+    $('.hideOnMobile').show();
+
     // Check if run button was clicked in the other mode and wasn't clicked on the new mode
     if ($(classPrefix + "MobileContainer iframe").length && !$(classPrefix + "Container iframe").length) {
         let runFunc = getEmbedCode(mode, entityType);
@@ -553,6 +558,8 @@ function EmbedAreaMobileView() {
         setCodeArea(mode, entityType)
     }
 
+    $('.hideOnMobile').hide();
+
     // Check if run button was clicked in the other mode and wasn't clicked on the new mode
     if ($(classPrefix + "Container iframe").length && !$(classPrefix + "MobileContainer iframe").length) {
         let runFunc = getEmbedCode(mode, entityType);
@@ -608,3 +615,8 @@ function updateRunFuncSessionParameters(runFunc) {
 
     return code;
 }
+
+function hideFeaturesOnMobile(){
+    if ($(".mobile-view").hasClass(active_class))
+        $('.hideOnMobile').hide();
+}

demo/v2-demo/scripts/step_samples.js

@@ -1,4 +1,9 @@
 function OpenCodeStepWithSample(entityType) {
+    $("html, body").animate({ scrollTop: 0 }, "slow");
+
+    // Clear the log
+    ClearTextArea('#txtResponse');
+
     SetSession(SessionKeys.EntityType, entityType);
     SetSession(SessionKeys.TokenType, defaultTokenType);
 

demo/v2-demo/settings_interact_dashboard.html

@@ -4,10 +4,10 @@
             <div id="wrapper-operations-div" class="operations-div">
                 <div id="operation-categories" class="operations-div">
                     <ul class="operations-ul">
-                        <li id="dashboard-general-operations" onclick="OpenDashboardGeneralOperations();"><a href="#">General Operations</a></li>
+                        <li id="dashboard-general-operations" onclick="OpenDashboardGeneralOperations();" class="hideOnMobile"><a href="#">General Operations</a></li>
                         <ul id="dashboard-general-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Dashboard_FullScreen()"><a href="#">Full screen</a></li>
+                            <li onclick="Dashboard_FullScreen()" class="hideOnMobile"><a href="#">Full screen</a></li>
-                            <li onclick="Dashboard_ExitFullScreen()"><a href="#">Exit full screen</a></li>
+                            <li onclick="Dashboard_ExitFullScreen()" class="hideOnMobile"><a href="#">Exit full screen</a></li>
                         </ul>
                         <li id="dashboard-properties-operations" onclick="OpenDashboardPropertiesOperations();"><a href="#">Properties</a></li>
                         <ul id="dashboard-properties-operations-ul" class="function-ul" style="display: none;">

demo/v2-demo/settings_interact_report.html

@@ -6,12 +6,12 @@
                     <ul class="operations-ul">
                         <li id="general-operations" onclick="OpenGeneralOperations();"><a href="#">General Operations</a></li>
                         <ul id="general-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Report_UpdateSettings()"><a href="#">Update settings</a></li>
+                            <li onclick="Report_UpdateSettings()" class="hideOnMobile"><a href="#">Update settings</a></li>
                             <li onclick="Report_PrintCurrentReport()"><a href="#">Print</a></li>
                             <li onclick="Report_Reload()"><a href="#">Reload</a></li>
                             <li onclick="Report_Refresh()"><a href="#">Refresh</a></li>
-                            <li onclick="Report_FullScreen()"><a href="#">Full screen</a></li>
+                            <li onclick="Report_FullScreen()" class="hideOnMobile"><a href="#">Full screen</a></li>
-                            <li onclick="Report_ExitFullScreen()"><a href="#">Exit full screen</a></li>
+                            <li onclick="Report_ExitFullScreen()" class="hideOnMobile"><a href="#">Exit full screen</a></li>
                         </ul>
                         <li id="reportproperties-operations" onclick="OpenReportPropertiesOperations();"><a href="#">Properties</a></li>
                         <ul id="reportproperties-operations-ul" class="function-ul" style="display: none;">
@@ -19,53 +19,53 @@
                             <li onclick="Report_GetPages()"><a href="#">Get pages</a></li>
                             <li onclick="Page_GetVisuals()"><a href="#">Get visuals</a></li>
                         </ul>
-                        <li id="navigation-operations" onclick="OpenNavigationOperations();"><a href="#">Navigation</a></li>
+                        <li id="navigation-operations" onclick="OpenNavigationOperations();" class="hideOnMobile"><a href="#">Navigation</a></li>
                         <ul id="navigation-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Report_SetPage()"><a href="#">Report - Set page</a></li>
+                            <li onclick="Report_SetPage()" class="hideOnMobile hideOnReportCreate"><a href="#">Report - Set page</a></li>
-                            <li onclick="Page_SetActive()"><a href="#">Page - Set active</a></li>
+                            <li onclick="Page_SetActive()" class="hideOnMobile hideOnReportCreate"><a href="#">Page - Set active</a></li>
-                            <li onclick="Events_PageChanged()"><a href="#">Page changed event</a></li>
+                            <li onclick="Events_PageChanged()" class="hideOnMobile"><a href="#">Page changed event</a></li>
                         </ul>
                         <li id="filters-operations" onclick="OpenFiltersOperations();"><a href="#">Filters</a><div class="highlightSection"></div></li>
                         <ul id="filters-operations-ul" class="function-ul" style="display: none;">
-                                <li onclick="Report_SetFilters()"><a href="#">Set report filters</a></li>
+                                <li onclick="Report_SetFilters()" class="hideOnReportCreate"><a href="#">Set report filters</a></li>
                                 <li onclick="Report_GetFilters()"><a href="#">Get report filters</a></li>
                                 <li onclick="Report_RemoveFilters()"><a href="#">Remove report filters</a></li>
-                                <li onclick="Page_SetFilters()"><a href="#">Set page filters</a></li>
+                                <li onclick="Page_SetFilters()" class="hideOnReportCreate"><a href="#">Set page filters</a></li>
                                 <li onclick="Page_GetFilters()"><a href="#">Get page filters</a></li>
                                 <li onclick="Page_RemoveFilters()"><a href="#">Remove page filters</a></li>
-                                <li onclick="Visual_SetFilters()"><a href="#">Set visual filters</a><div class="newFeature">NEW</div></li>
+                                <li onclick="Visual_SetFilters()" class="hideOnReportCreate"><a href="#">Set visual filters</a><div class="newFeature">NEW</div></li>
                                 <li onclick="Visual_GetFilters()"><a href="#">Get visual filters</a><div class="newFeature">NEW</div></li>
                                 <li onclick="Visual_RemoveFilters()"><a href="#">Remove visual filters</a><div class="newFeature">NEW</div></li>
                         </ul>
-                        <li id="editsave-operations" onclick="OpenEditSaveOperations();"><a href="#">Edit & Save</a></li>
+                        <li id="editsave-operations" onclick="OpenEditSaveOperations();" class="hideOnMobile"><a href="#">Edit & Save</a></li>
                         <ul id="editsave-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Report_switchModeEdit()"><a href="#">Enter edit mode</a></li>
+                            <li onclick="Report_switchModeEdit()" class="hideOnMobile"><a href="#">Enter edit mode</a></li>
-                            <li onclick="Report_switchModeView()"><a href="#">Enter view mode</a></li>
+                            <li onclick="Report_switchModeView()" class="hideOnMobile"><a href="#">Enter view mode</a></li>
-                            <li onclick="Report_save()"><a href="#">Save report</a></li>
+                            <li onclick="Report_save()" class="hideOnMobile"><a href="#">Save report</a></li>
-                            <li onclick="Report_saveAs()"><a href="#">SaveAs report</a></li>
+                            <li onclick="Report_saveAs()" class="hideOnMobile"><a href="#">SaveAs report</a></li>
-                            <li onclick="Events_SaveAsTriggered()"><a href="#">SaveAs triggered event</a></li>
+                            <li onclick="Events_SaveAsTriggered()" class="hideOnMobile"><a href="#">SaveAs triggered event</a></li>
                         </ul>
                         <li id="extensions-operations" onclick="OpenExtensionsOperations();"><a href="#">Menu Extensions</a></li>
                         <ul id="extensions-operations-ul" class="function-ul" style="display: none;">
                             <li onclick="Report_Extensions_OptionsMenu()"><a href="#">Extend options menu</a></li>
-                            <li onclick="Report_Extensions_ContextMenu()"><a href="#">Extend context menu</a></li>
+                            <li onclick="Report_Extensions_ContextMenu()" class="hideOnMobile"><a href="#">Extend context menu</a></li>
                         </ul>
                         <li id="layout-operations" onclick="OpenLayoutOperations();"><a href="#">Layout</a></li>
                         <ul id="layout-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Report_ApplyCustomLayout()"><a href="#">Apply custom Layout</a></li>
+                            <li onclick="Report_ApplyCustomLayout()" class="hideOnMobile hideOnReportCreate"><a href="#">Apply custom Layout</a></li>
                             <li onclick="Page_HasLayout()"><a href="#">Check layout</a></li>
                         </ul>
-                        <li id="bookmarks-operations" onclick="OpenBookmarksOperations();"><a href="#">Bookmarks</a><div class="newFeature">NEW</div></li>
+                        <li id="bookmarks-operations" onclick="OpenBookmarksOperations();" class="hideOnMobile"><a href="#">Bookmarks</a><div class="newFeature">NEW</div></li>
                         <ul id="bookmarks-operations-ul" class="function-ul" style="display: none;">
-                            <li onclick="Bookmarks_Enable()"><a href="#">Enable bookmarks pane</a></li>
+                            <li onclick="Bookmarks_Enable()" class="hideOnMobile"><a href="#">Enable bookmarks pane</a></li>
-                            <li onclick="Bookmarks_Disable()"><a href="#"> Disable bookmarks pane</a></li>
+                            <li onclick="Bookmarks_Disable()" class="hideOnMobile"><a href="#"> Disable bookmarks pane</a></li>
-                            <li onclick="Bookmarks_Get()"><a href="#">Get bookmarks</a></li>
+                            <li onclick="Bookmarks_Get()" class="hideOnMobile"><a href="#">Get bookmarks</a></li>
-                            <li onclick="Bookmarks_Apply()"><a href="#">Apply bookmark by name</a></li>
+                            <li onclick="Bookmarks_Apply()" class="hideOnMobile hideOnReportCreate"><a href="#">Apply bookmark by name</a></li>
-                            <li onclick="Bookmarks_Capture()"><a href="#">Capture bookmark state</a></li>
+                            <li onclick="Bookmarks_Capture()" class="hideOnMobile"><a href="#">Capture bookmark state</a></li>
-                            <li onclick="Bookmarks_ApplyState()"><a href="#">Apply bookmark state</a></li>
+                            <li onclick="Bookmarks_ApplyState()" class="hideOnMobile hideOnReportCreate"><a href="#">Apply bookmark state</a></li>
-                            <li onclick="Bookmarks_EnterPresentation()"><a href="#">Play bookmarks</a></li>
+                            <li onclick="Bookmarks_EnterPresentation()" class="hideOnMobile"><a href="#">Play bookmarks</a></li>
-                            <li onclick="Bookmarks_ExitPresentation()"><a href="#">Exit play bookmarks mode</a></li>
+                            <li onclick="Bookmarks_ExitPresentation()" class="hideOnMobile"><a href="#">Exit play bookmarks mode</a></li>
-                            <li onclick="Events_BookmarkApplied()"><a href="#">Bookmark applied event</a></li>
+                            <li onclick="Events_BookmarkApplied()" class="hideOnMobile"><a href="#">Bookmark applied event</a></li>
                         </ul>
                         <li id="data-operations" onclick="OpenDataOperations();"><a href="#">Data</a><div class="highlightSection"></div></li>
                         <ul id="data-operations-ul" class="function-ul" style="display: none;">

demo/v2-demo/showcases.html

@@ -17,8 +17,8 @@
             </div>
             <div class="showcaseTextButton">
                 <div class="pageTitle">
-                    <h3>Custom layout</h3>
+                    <h3>Control your report layout</h3>
-                    <h8>Experience a dynamic embedded report, using the custom layout feature</h8>
+                    <h8>Define your dynamic report layout using report embedded custom layout feature</h8>
                 </div>
                 <div class="startShowcase">
                     <button class="selectButton" onclick="OpenShowcase('CustomLayout')">Start</button>
@@ -33,7 +33,7 @@
             </div>
             <div class="showcaseTextButton">
                 <div class="pageTitle">
-                    <h3>Bookmarks capture & apply</h3>
+                    <h3>Capture insights & share</h3>
                     <h8>Let your users create and share their own Bookmarks</h8><br><br>
                 </div>
                 <div class="startShowcase">

demo/v2-demo/style/style.css

@@ -1089,10 +1089,10 @@ a {
     float: left;
     height: 32px;
     border: solid;
-    border-width: 2px;
+    border-width: 2px 0 2px 2px;
     border-color: #3E65FF;
     width: calc(100% - 70px);
-    padding: 8px;
+    padding: 8px 0 8px 8px;
     outline: none;
 }
 
@@ -1107,6 +1107,10 @@ a {
     padding: 6px;
 }
 
+#btnDialogCopy:hover {
+    background-color: #213BD1;
+}
+
 .dialogBody {
     padding: 8px 24px 0px 24px;
     text-align: center;