Merge remote-tracking branch 'powerbi/master'

Author: ali-hamud

demo/bower.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "fetch": "^1.0.0",
     "es6-promise": "^3.2.2",
-    "bootstrap": "^3.3.6",
+    "bootstrap": "^4.1.2",
     "jquery": "^3.1.0",
     "powerbi-client": "2.4.3"
   },

demo/package.json

@@ -30,12 +30,12 @@
     "tests"
   ],
   "dependencies": {
-    "bootstrap": "^3.3.6",
+    "bootstrap": "^4.1.2",
     "es6-promise": "^3.2.2",
     "fetch": "^1.0.0",
     "http-server": "^0.10.0",
     "jquery": "^3.1.0",
-    "powerbi-client": "^2.6.5",
+    "powerbi-client": "^2.6.6",
     "syntaxhighlighter": "4.0.1"
   },
   "devDependencies": {}

demo/v2-demo/docs.html

@@ -3,6 +3,7 @@
         <div class="docs-line">
             <div class="docs-links">
                 <h2>Getting started</h2>
+                <a href="https://app.powerbi.com/embedsetup">Set up your Power BI embedding environment</a><br>
                 <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>

demo/v2-demo/report.html

@@ -74,17 +74,7 @@
     const mode = modeUrlParam ? modeUrlParam : "view";
 
     const entityTypeUrlParam = GetParameterByName("entityType");
-    let entityType;
-    if (entityTypeUrlParam == "dashboard") {
-        entityType = EntityType.Dashboard;
-    } else if (entityTypeUrlParam == "tile") {
-        entityType = EntityType.Tile;
-    }
-    else if (entityTypeUrlParam == "visual") {
-        entityType = EntityType.Visual;
-    } else {
-        entityType = EntityType.Report;
-    }
+    let entityType = getEntityTypeFromParameter(entityTypeUrlParam);
 
     // set mode and type in session.
     SetSession(SessionKeys.EntityType, entityType);
@@ -97,7 +87,7 @@
 
         if (GetParameterByName("embedUrl") || GetParameterByName("embedId") || GetParameterByName("accessToken") || GetParameterByName("entityType"))
         {
-            OpenCodeStep(mode, entityType, 0);
+            OpenCodeStep(mode, entityType, GetParameterByName("tokenType") || 0);
         }
         else
         {

demo/v2-demo/scripts/codesamples.js

@@ -687,6 +687,45 @@ function _Embed_QnaEmbed() {
     powerbi.embed(qnaContainer, config);
 }
 
+function _Embed_QnaEmbed_Aad() {
+    // Read embed application token from textbox
+    var txtAccessToken = $('#txtAccessToken').val();
+
+    // Read embed URL from textbox
+    var txtEmbedUrl = $('#txtQnaEmbed').val();
+
+    // Read dataset Id from textbox
+    var txtDatasetId = $('#txtDatasetId').val();
+
+    // Read question from textbox
+    var txtQuestion = $('#txtQuestion').val();
+
+    // Read Qna mode
+    var qnaMode = $("input[name='qnaMode']:checked").val();
+
+    // Get models. models contains enums that can be used.
+    var models = window['powerbi-client'].models;
+
+    // Embed configuration used to describe the what and how to embed.
+    // This object is used when calling powerbi.embed.
+    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
+    var config= {
+        type: 'qna',
+        tokenType: models.TokenType.Aad,
+        accessToken: txtAccessToken,
+        embedUrl: txtEmbedUrl,
+        datasetIds: [txtDatasetId],
+        viewMode: models.QnaMode[qnaMode],
+        question: txtQuestion
+    };
+
+    // Get a reference to the embedded Q&A HTML element
+    var qnaContainer = $('#qnaContainer')[0];
+
+    // Embed the Q&A and display it within the div container.
+    powerbi.embed(qnaContainer, config);
+}
+
 // ---- Report Operations ----------------------------------------------------
 
 function _Report_GetId() {

demo/v2-demo/scripts/report.js

@@ -13,6 +13,7 @@ const interactTooltipTimeout = 2000;
 const defaultTokenType = 1;
 const defaultQnaQuestion = "2014 total units YTD var % by month, manufacturer as clustered column chart";
 const defaultQnaMode = "Interactive";
+const interactiveNoQuestionMode = "InteractiveNoQuestion";
 
 function OpenSamplesStep() {
     $('#steps-ul a').removeClass(active_class);
@@ -230,7 +231,7 @@ function getEmbedCode(mode, entityType)
     }
     else if (entityType == EntityType.Qna)
     {
-        code = _Embed_QnaEmbed;
+        code = GetParameterByName(SessionKeys.TokenType) === '0' /* AAD Token */ ? _Embed_QnaEmbed_Aad : _Embed_QnaEmbed;
     }
     return code;
 }
@@ -355,17 +356,32 @@ function OpenEmbedMode(mode, entityType, tokenType)
     }
     else if (entityType == EntityType.Qna)
     {
+        LoadSettings = function() {
+            SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtQnaEmbed", "#txtDatasetId");
+            SetTextboxFromSessionOrUrlParam(SessionKeys.QnaQuestion, "#txtQuestion");
+            setCodeAndShowEmbedSettings(mode, entityType, tokenType);
+            let qnaMode = GetParameterByName(SessionKeys.QnaMode);
+            if (qnaMode) {
+                let modesRadios = $('input:radio[name=qnaMode]');
+                modesRadios.filter('[id=' + qnaMode + ']').prop('checked', true);
+                qnaMode = qnaMode !== interactiveNoQuestionMode ? qnaMode : defaultQnaMode;
+                SetSession(SessionKeys.QnaMode, qnaMode);
+            }
+        };
+
         if (IsEmbeddingSampleQna())
         {
             LoadSampleQnaIntoSession().then(function (response) {
-                SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtQnaEmbed", "#txtDatasetId");
-                setCodeAndShowEmbedSettings(mode, entityType, tokenType);
+                if (!GetSession(SessionKeys.QnaQuestion)) {
+                    SetSession(SessionKeys.QnaQuestion, defaultQnaQuestion);
+                }
+
+                LoadSettings();
             });
         }
         else
         {
-            SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtQnaEmbed", "#txtDatasetId");
-            setCodeAndShowEmbedSettings(mode, entityType, tokenType);
+            LoadSettings();
         }
     }
 }
@@ -411,7 +427,7 @@ function ToggleQuestionBox(enabled) {
     let txtQuestion = $("#txtQuestion");
     if (enabled === true) {
         let question = GetSession(SessionKeys.QnaQuestion);
-        question = question? question : defaultQnaQuestion;
+        question = question ? question : defaultQnaQuestion;
         txtQuestion.val(question);
         txtQuestion.prop('disabled', false);
     }

demo/v2-demo/scripts/utils.js

@@ -121,7 +121,7 @@ function getEmbedContainerID(entityType) {
     }
 }
 
-function getEmbedContainerClassPrefix(entityType, isMobile) {
+function getEmbedContainerClassPrefix(entityType) {
     switch (entityType) {
         case EntityType.Visual:
             return ".visual";
@@ -136,6 +136,21 @@ function getEmbedContainerClassPrefix(entityType, isMobile) {
     }
 }
 
+function getEntityTypeFromParameter(urlParam) {
+  switch (urlParam) {
+      case "visual":
+          return EntityType.Visual;
+      case "dashboard":
+          return EntityType.Dashboard;
+      case "tile":
+          return EntityType.Tile;
+      case "qna":
+          return EntityType.Qna;
+      default:
+          return EntityType.Report;
+  }
+}
+
 function elementClicked(element) {
     $(element).addClass('elementClicked');
     setTimeout(function() {

demo/v2-demo/settings_embed_qna.html

@@ -4,15 +4,15 @@
         <div class="spacer" />
         <div id="modeSelector">
             <label class="radioContainer">
-                <div onclick="ToggleQuestionBox(false);"><input type="radio" name="qnaMode" value="Interactive"> Show Q&A </input>
+                <div onclick="ToggleQuestionBox(false);"><input type="radio" name="qnaMode" value="Interactive" id="InteractiveNoQuestion"> Show Q&A </input>
                 <span class="checkmark"></span></div>
             </label>
             <label class="radioContainer">
-                <div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="Interactive" checked="checked"> Show Q&A, use predefined question </input>
+                <div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="Interactive" checked="checked" id="Interactive"> Show Q&A, use predefined question </input>
                 <span class="checkmark"></span></div>
             </label>
             <label class="radioContainer">
-                <div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="ResultOnly"> Show answer only, use predefined question </input>
+                <div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="ResultOnly" id="ResultOnly"> Show answer only, use predefined question </input>
                 <span class="checkmark"></span></div>
             </label>
         </div>

demo/v2-demo/shareBookmark.html

@@ -1,7 +1,9 @@
 <link rel="stylesheet" type="text/css" href="style/style.css">
 <link rel="stylesheet" type="text/css" href="style/layout.css">
 
-<div id="embedContainer" class="iframeContainer active"></div>
+<div id="share-bookmark">
+    <div id="embedContainer" class="iframeContainer active"></div>
+</div>
 
 <script src="../node_modules/jquery/dist/jquery.js"></script>
 <script src="../node_modules/es6-promise/dist/es6-promise.js"></script>

demo/v2-demo/style/style.css

@@ -10,20 +10,42 @@ body {
     margin:0;
     padding:0;
     height:100%;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333;
 }
 
 h1 {
     margin-bottom: 15px;
 }
 
+h2 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
 h3 {
     margin: 0;
+    font-size: 24px;
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit;
 }
 
 h8 {
     font-weight: 600;
 }
 
+button:focus {
+    outline: none !important;
+}
+
+a {
+    color: #337ab7;
+    text-decoration: none;
+}
+
 a:hover, a:visited, a:link, a:active
 {
     text-decoration: none !important;
@@ -85,10 +107,6 @@ a:hover, a:visited, a:link, a:active
     padding-left: 4px;
 }
 
-a {
-    text-decoration: none;
-}
-
 .pbi-line {
     float: left;
     width: 384px;
@@ -317,11 +335,13 @@ a {
     background: url('../images/expand.svg') center left;
     background-repeat: no-repeat;
     padding-right: 18px;
+    cursor: pointer;
 }
 
 .operations-ul > li.active:before {
     background: url('../images/collapse.svg') center left;
     background-repeat: no-repeat;
+    cursor: pointer;
 }
 
 .operations-ul a {
@@ -470,11 +490,13 @@ a {
 .textAreaControl {
     background-color: transparent;
     border: none;
-    outline:none;
+    outline: none;
     margin-right: 40px;
     height: 40px;
     opacity: 1;
     min-width: 80px;
+    font-weight: bold;
+    cursor: pointer;
 }
 
 .textAreaControl img {
@@ -536,6 +558,7 @@ a {
     width: 160px;
     height: 32px;
     text-align: center;
+    cursor: pointer;
 }
 
 .selectButton:hover {
@@ -618,7 +641,7 @@ a {
     cursor: default;
 }
 
-.desktop-view iframe, .mobile-view iframe, #showcase-embedded-view iframe, #bookmark-embedded-view iframe {
+.desktop-view iframe, .mobile-view iframe, #showcase-embedded-view iframe, #bookmark-embedded-view iframe, #share-bookmark iframe {
     border: none;
 }