Merged PR 3652: Add support for SaaS Embed:

Add support for SaaS Embed: 1. Adding radio button to select the embed type 2. Support embed type via URL parametrer
2017-12-18 12:58:06 +00:00 · 2017-12-18 12:58:06 +00:00 · 7fe67bd0a2
--- a/demo/v2-demo/report.html
+++ b/demo/v2-demo/report.html
@ -46,7 +46,7 @@ $(document).ready(function() {

    if (GetParameterByName("embedUrl") || GetParameterByName("embedId") || GetParameterByName("accessToken") || GetParameterByName("entityType"))
    {
-        OpenEmbedStep(mode, entityType);
+        OpenEmbedStep(mode, entityType, 0);
    }
    else
    {
--- a/demo/v2-demo/scripts/codesamples.js
+++ b/demo/v2-demo/scripts/codesamples.js
@ -16,6 +16,9 @@ function _Embed_BasicEmbed() {
    // Read report Id from textbox
    var txtEmbedReportId = $('#txtEmbedReportId').val();

+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
+
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

@ -28,7 +31,7 @@ function _Embed_BasicEmbed() {
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config= {
        type: 'report',
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
@ -78,6 +81,9 @@ function _Embed_DashboardEmbed() {
    // Read dashboard Id from textbox
    var txtEmbedDashboardId = $('#txtEmbedDashboardId').val();

+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
+
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

@ -87,7 +93,7 @@ function _Embed_DashboardEmbed() {
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedDashboardId
@ -129,6 +135,9 @@ function _Mock_Embed_BasicEmbed(isEdit) {
    // Read report Id from textbox
    var txtEmbedReportId = $('#txtEmbedReportId').val();

+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
+
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;
    var permissions = models.Permissions.All;
@ -140,7 +149,7 @@ function _Mock_Embed_BasicEmbed(isEdit) {
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config= {
        type: 'report',
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
@ -204,6 +213,9 @@ function _Embed_BasicEmbed_EditMode() {
    // Read report Id from textbox
    var txtEmbedReportId = $('#txtEmbedReportId').val();

+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
+
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

@ -213,7 +225,7 @@ function _Embed_BasicEmbed_EditMode() {
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedReportId,
@ -301,6 +313,9 @@ function _Embed_TileEmbed() {
    // Read tile Id from textbox
    var txtEmbedTileId = $('#txtEmbedTileId').val();

+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
+
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;

@ -309,7 +324,7 @@ function _Embed_TileEmbed() {
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config= {
        type: 'tile',
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        id: txtEmbedTileId,
@ -350,6 +365,9 @@ function _Embed_Create() {

    // Read dataset Id from textbox
    var txtEmbedDatasetId = $('#txtEmbedDatasetId').val();
+
+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
    
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;
@ -357,7 +375,7 @@ function _Embed_Create() {
    // Embed create configuration used to describe the what and how to create report.
    // This object is used when calling powerbi.createReport.
    var embedCreateConfiguration = {
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        datasetId: txtEmbedDatasetId,
@ -399,6 +417,9 @@ function _Mock_Embed_Create() {

    // Read dataset Id from textbox
    var txtEmbedDatasetId = $('#txtEmbedDatasetId').val();
+
+    // Read embed type from radio
+    var tokenType = $('input:radio[name=tokenType]:checked').val();
    
    // Get models. models contains enums that can be used.
    var models = window['powerbi-client'].models;
@ -406,7 +427,7 @@ function _Mock_Embed_Create() {
    // Embed create configuration used to describe the what and how to create report.
    // This object is used when calling powerbi.createReport.
    var embedCreateConfiguration = {
-        tokenType: models.TokenType.Embed,
+        tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
        accessToken: txtAccessToken,
        embedUrl: txtEmbedUrl,
        datasetId: txtEmbedDatasetId,
--- a/demo/v2-demo/scripts/report.js
+++ b/demo/v2-demo/scripts/report.js
@ -21,11 +21,12 @@ function OpenEmbedStepFromNavPane()
 {
    var mode = GetSession(SessionKeys.EmbedMode);
    var entityType = GetSession(SessionKeys.EntityType);
+    var tokenType = GetSession(SessionKeys.TokenType);

-    OpenEmbedStep(mode, entityType);
+    OpenEmbedStep(mode, entityType, tokenType);
 }

-function OpenEmbedStep(mode, entityType) {
+function OpenEmbedStep(mode, entityType, tokenType) {
    $('#steps-ul a').removeClass(active_class);
    $(".steps-li-active").removeClass(active_li);

@ -44,7 +45,7 @@ function OpenEmbedStep(mode, entityType) {
    if (entityType == EntityType.Report)
    {
        $("#settings").load("settings_embed.html", function() {
-            OpenEmbedMode(mode, entityType);
+            OpenEmbedMode(mode, entityType, tokenType);

            // Fix report size ratio
            embedContainer.height(embedContainer.width() * 0.59);
@ -58,7 +59,7 @@ function OpenEmbedStep(mode, entityType) {
    else if (entityType == EntityType.Dashboard)
    {
        $("#settings").load("settings_embed_dashboard.html", function() {
-            OpenEmbedMode(mode, entityType);
+            OpenEmbedMode(mode, entityType, tokenType);

            // Fix report size ratio
            dashboardContainer.height(dashboardContainer.width() * 0.59);
@ -72,7 +73,7 @@ function OpenEmbedStep(mode, entityType) {
    else if (entityType == EntityType.Tile)
    {
        $("#settings").load("settings_embed_tile.html", function() {
-            OpenEmbedMode(mode, entityType);
+            OpenEmbedMode(mode, entityType, tokenType);

            tileContainer.height(tileContainer.width() * 0.59);

@ -85,7 +86,7 @@ function OpenEmbedStep(mode, entityType) {
    else if (entityType == EntityType.Qna)
    {
        $("#settings").load("settings_embed_qna.html", function() {
-            OpenEmbedMode(mode, entityType);
+            OpenEmbedMode(mode, entityType,tokenType);

            qnaContainer.height(qnaContainer.width() * 0.59);

@ -180,7 +181,7 @@ function setCodeArea(mode, entityType)
    }
 }

-function showEmbedSettings(mode, entityType)
+function showEmbedSettings(mode, entityType, tokenType)
 {
    if (entityType == EntityType.Report)
    {
@ -197,7 +198,10 @@ function showEmbedSettings(mode, entityType)
        $(inputDivToHide).hide();

        var embedModeRadios = $('input:radio[name=embedMode]'); 
-        embedModeRadios.filter('[value='+ mode + ']').prop('checked', true);
+        embedModeRadios.filter('[value=' + mode + ']').prop('checked', true);
+
+        var embedTypeRadios = $('input:radio[name=tokenType]');
+        embedTypeRadios.filter('[value=' + tokenType + ']').prop('checked', true);
    }
    else if (entityType == EntityType.Dashboard)
    {
@ -205,7 +209,12 @@ function showEmbedSettings(mode, entityType)
    }
 }

-function OpenEmbedMode(mode, entityType)
+function SetEmbedTypeToEmbedToken(tokenType)
+{
+    SetSession(SessionKeys.TokenType, tokenType);
+}
+
+function OpenEmbedMode(mode, entityType, tokenType)
 {
    if (entityType == EntityType.Report)
    {
@ -215,13 +224,13 @@ function OpenEmbedMode(mode, entityType)
            {
                LoadSampleDatasetIntoSession().then(function (response) {
                    SetTextBoxesFromSessionOrUrlParam("#txtCreateAccessToken", "#txtCreateReportEmbed", "#txtEmbedDatasetId");
-                    setCodeAndShowEmbedSettings(mode, entityType);
+                    setCodeAndShowEmbedSettings(mode, entityType, tokenType);
                });
            }
            else
            {
                SetTextBoxesFromSessionOrUrlParam("#txtCreateAccessToken", "#txtCreateReportEmbed", "#txtEmbedDatasetId");
-                setCodeAndShowEmbedSettings(mode, entityType);
+                setCodeAndShowEmbedSettings(mode, entityType, tokenType);
            }
        }
        else
@ -230,13 +239,13 @@ function OpenEmbedMode(mode, entityType)
            {
                LoadSampleReportIntoSession().then(function (response) {
                    SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtReportEmbed", "#txtEmbedReportId");
-                    setCodeAndShowEmbedSettings(mode, entityType);
+                    setCodeAndShowEmbedSettings(mode, entityType, tokenType);
                });
            }
            else
            {
                SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtReportEmbed", "#txtEmbedReportId");
-                setCodeAndShowEmbedSettings(mode, entityType);
+                setCodeAndShowEmbedSettings(mode, entityType, tokenType);
            }
        }
    }
@ -246,13 +255,13 @@ function OpenEmbedMode(mode, entityType)
        {
            LoadSampleDashboardIntoSession().then(function (response) {
                SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtDashboardEmbed", "#txtEmbedDashboardId");
-                setCodeAndShowEmbedSettings(mode, entityType);
+                setCodeAndShowEmbedSettings(mode, entityType, tokenType);
            });
        }
        else
        {
            SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtDashboardEmbed", "#txtEmbedDashboardId");
-            setCodeAndShowEmbedSettings(mode, entityType);
+            setCodeAndShowEmbedSettings(mode, entityType, tokenType);
        }
    }
    else if (entityType == EntityType.Tile)
@ -261,13 +270,13 @@ function OpenEmbedMode(mode, entityType)
        {
            LoadSampleTileIntoSession().then(function (response) {
                SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtTileEmbed", "#txtEmbedTileId", "#txtEmbedDashboardId");
-                setCodeAndShowEmbedSettings(mode, entityType);
+                setCodeAndShowEmbedSettings(mode, entityType, tokenType);
            });
        }
        else
        {
            SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtTileEmbed", "#txtEmbedTileId", "#txtEmbedDashboardId");
-            setCodeAndShowEmbedSettings(mode, entityType);
+            setCodeAndShowEmbedSettings(mode, entityType, tokenType);
        }
    }
    else if (entityType == EntityType.Qna)
@ -276,20 +285,20 @@ function OpenEmbedMode(mode, entityType)
        {
            LoadSampleQnaIntoSession().then(function (response) {
                SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtQnaEmbed", "#txtDatasetId");
-                setCodeAndShowEmbedSettings(mode, entityType);
+                setCodeAndShowEmbedSettings(mode, entityType, tokenType);
            });
        }
        else
        {
            SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtQnaEmbed", "#txtDatasetId");
-            setCodeAndShowEmbedSettings(mode, entityType);
+            setCodeAndShowEmbedSettings(mode, entityType, tokenType);
        }
    }
 }

-function setCodeAndShowEmbedSettings(mode, entityType) {
+function setCodeAndShowEmbedSettings(mode, entityType, tokenType) {
    setCodeArea(mode, entityType);
-    showEmbedSettings(mode, entityType);
+    showEmbedSettings(mode, entityType, tokenType);
 }

 function OpenViewMode() {
--- a/demo/v2-demo/scripts/session_utils.js
+++ b/demo/v2-demo/scripts/session_utils.js
@ -11,6 +11,7 @@ const SessionKeys = {
    IsSampleTile: "IsSampleTile",
    IsSampleQna: "IsSampleQna",
    EmbedMode: "embedMode",
+    TokenType: "tokenType",
    EntityType: "entityType",
    SampleId: "SampleId"
 };
@ -75,6 +76,12 @@ function SetTextBoxesFromSessionOrUrlParam(accessTokenSelector, embedUrlSelector
        embedId = GetSession(SessionKeys.EmbedId);
    }

+    var tokenType = GetParameterByName(SessionKeys.TokenType);
+    if (!tokenType)
+    {
+        tokenType = GetSession(SessionKeys.TokenType);
+    }
+
    var dashboardId = GetParameterByName(SessionKeys.DashboardId);
    if (!dashboardId) {
        dashboardId = GetSession(SessionKeys.DashboardId);
@ -84,4 +91,10 @@ function SetTextBoxesFromSessionOrUrlParam(accessTokenSelector, embedUrlSelector
    $(embedUrlSelector).val(embedUrl);
    $(embedIdSelector).val(embedId);
    $(dashboardIdSelector).val(dashboardId);
+
+    //
+    // Set the embed type (Saas or Embed token)
+    //
+    var embedTypeRadios = $('input:radio[name=tokenType]');
+    embedTypeRadios.filter('[value=' + tokenType + ']').prop('checked', true);
 }
--- a/demo/v2-demo/settings_embed.html
+++ b/demo/v2-demo/settings_embed.html
@ -4,17 +4,22 @@
    </div>

    <h8>Select mode to embed your report in:</h8>
-    <div class="spacer" />
    <div id="modeSelector">
        <div onclick="OpenViewMode();"><input type="radio" name="embedMode" value="view" checked="checked"> View mode </input></div>
        <div onclick="OpenEditMode();"><input type="radio" name="embedMode" value="edit"> Edit mode</input></div>
        <div onclick="OpenCreateMode();"><input type="radio" name="embedMode" value="create"> Create mode</input></div>
    </div>

-    <div id="embedModeInput">
-        <h8>Fill in the fields below to get the code to embed your report.</h8>
-        <div class="spacer" />
+    <h8>Select token type:</h8>

+    <div id="typeSelector">
+        <div onclick="SetEmbedTypeToEmbedToken(1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input></div>
+        <div onclick="SetEmbedTypeToEmbedToken(0);"><input type="radio" name="tokenType" value="0"> Aad token</input></div>
+    </div>
+
+    <div class="spacer" />
+    <h8>Fill in the fields below to get the code to embed your report.</h8>
+    <div id="embedModeInput">
        <div class="inputLine">
            <div class="inputLineTitle">Embed Token</div>
            <input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
--- a/demo/v2-demo/settings_embed_dashboard.html
+++ b/demo/v2-demo/settings_embed_dashboard.html
@ -2,7 +2,12 @@
    <div class="pageTitle">
        <h4>Embed Dashboard</h4>
    </div>
+    <h8>Select token type:</h8>

+    <div id="typeSelector">
+        <div onclick="SetSession(SessionKeys.TokenType, 1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input></div>
+        <div onclick="SetSession(SessionKeys.TokenType, 0);"><input type="radio" name="tokenType" value="0">Aad token</input></div>
+    </div>
    <div id="embedModeInput">
        <h8>Fill in the fields below to get the code to embed your dashboard.</h8>
        <div class="spacer" />
--- a/demo/v2-demo/settings_embed_tile.html
+++ b/demo/v2-demo/settings_embed_tile.html
@ -2,7 +2,12 @@
    <div class="pageTitle">
        <h4>Embed Tile</h4>
    </div>
+    <h8>Select token type:</h8>

+    <div id="typeSelector">
+        <div onclick="SetSession(SessionKeys.TokenType, 1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input></div>
+        <div onclick="SetSession(SessionKeys.TokenType, 0);"><input type="radio" name="tokenType" value="0"> Aad token </input></div>
+    </div>
    <div id="embedModeInput">
        <h8>Fill in the fields below to get the code to embed your tile.</h8>
        <div class="spacer" />