Skip to content

Commit 2b2681e

Browse files
somriarsomriar
committed
Merged PR 21053: Merge omarmstr/add_tile_embed to master
Adding tile embed to JS SDK and live sample
1 parent c87e8a1 commit 2b2681e

21 files changed

Lines changed: 564 additions & 65 deletions

‎demo/v2-demo/report.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
</div>
1616
<div id="embedContainer"></div>
1717
<div id="dashboardContainer"></div>
18+
<div id="tileContainer"></div>
1819
</div>
1920
</div>
2021
</div>

‎demo/v2-demo/scripts/codesamples.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,59 @@ function _Embed_EmbedWithDefaultFilter() {
288288
powerbi.embed(embedContainer, embedConfiguration);
289289
}
290290

291+
function _Embed_TileEmbed() {
292+
// Read embed application token from textbox
293+
var txtAccessToken = $('#txtAccessToken').val();
294+
295+
// Read embed URL from textbox
296+
var txtEmbedUrl = $('#txtTileEmbed').val();
297+
298+
// Read dashboard Id from textbox
299+
var txtEmbedDashboardId = $('#txtEmbedDashboardId').val();
300+
301+
// Read tile Id from textbox
302+
var txtEmbedTileId = $('#txtEmbedTileId').val();
303+
304+
// Get models. models contains enums that can be used.
305+
var models = window['powerbi-client'].models;
306+
307+
// Embed configuration used to describe the what and how to embed.
308+
// This object is used when calling powerbi.embed.
309+
// You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
310+
var config= {
311+
type: 'tile',
312+
tokenType: models.TokenType.Embed,
313+
accessToken: txtAccessToken,
314+
embedUrl: txtEmbedUrl,
315+
id: txtEmbedTileId,
316+
dashboardId: txtEmbedDashboardId
317+
};
318+
319+
// Get a reference to the embedded tile HTML element
320+
var tileContainer = $('#tileContainer')[0];
321+
322+
// Embed the tile and display it within the div container.
323+
var tile = powerbi.embed(tileContainer, config);
324+
325+
// Tile.off removes a given event handler if it exists.
326+
tile.off("tileLoaded");
327+
328+
// Tile.on will add an event handler which prints to Log window.
329+
tile.on("tileLoaded", function(event) {
330+
Log.logText("Tile loaded event");
331+
Log.log(event.detail);
332+
});
333+
334+
// Tile.off removes a given event handler if it exists.
335+
tile.off("tileClicked");
336+
337+
// Tile.on will add an event handler which prints to Log window.
338+
tile.on("tileClicked", function(event) {
339+
Log.logText("Tile clicked event");
340+
Log.log(event.detail);
341+
});
342+
}
343+
291344
function _Embed_Create() {
292345
// Read embed application token from textbox
293346
var txtAccessToken = $('#txtCreateAccessToken').val();

‎demo/v2-demo/scripts/function_mapping.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,8 @@ function IsNotSupported(funcName) {
4747
return false
4848
}
4949

50-
const dashboardRegEx = /Dashboard/
51-
const dashboardMatch = funcName.match(dashboardRegEx)
52-
if (dashboardMatch) {
50+
const dashboardOrTileMatch = funcName.match(/Dashboard|Tile/);
51+
if (dashboardOrTileMatch) {
5352
return false;
5453
}
5554

‎demo/v2-demo/scripts/report.js‎

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ function OpenEmbedStep(mode, entityType) {
3838

3939
var embedContainer = $("#embedContainer");
4040
var dashboardContainer = $("#dashboardContainer");
41+
var tileContainer = $("#tileContainer");
4142

4243
if (entityType == EntityType.Report)
4344
{
@@ -49,9 +50,10 @@ function OpenEmbedStep(mode, entityType) {
4950

5051
embedContainer.show();
5152
dashboardContainer.hide();
53+
tileContainer.hide();
5254
});
5355
}
54-
else
56+
else if (entityType == EntityType.Dashboard)
5557
{
5658
$("#settings").load("settings_embed_dashboard.html", function() {
5759
OpenEmbedMode(mode, entityType);
@@ -61,6 +63,19 @@ function OpenEmbedStep(mode, entityType) {
6163

6264
embedContainer.hide();
6365
dashboardContainer.show();
66+
tileContainer.hide();
67+
});
68+
}
69+
else
70+
{
71+
$("#settings").load("settings_embed_tile.html", function() {
72+
OpenEmbedMode(mode, entityType);
73+
74+
tileContainer.height(tileContainer.width() * 0.59);
75+
76+
embedContainer.hide();
77+
dashboardContainer.hide();
78+
tileContainer.show();
6479
});
6580
}
6681
}
@@ -78,7 +93,14 @@ function OpenInteractStep() {
7893

7994
var entityType = GetSession(SessionKeys.EntityType);
8095

81-
if (entityType == EntityType.Dashboard)
96+
if (entityType == EntityType.Tile)
97+
{
98+
$("#settings").load("settings_interact_tile.html", function() {
99+
SetToggleHandler("tile-operations-div");
100+
LoadCodeArea("#embedCodeDiv", "");
101+
});
102+
}
103+
else if (entityType == EntityType.Dashboard)
82104
{
83105
$("#settings").load("settings_interact_dashboard.html", function() {
84106
SetToggleHandler("dashboard-operations-div");
@@ -119,6 +141,10 @@ function setCodeArea(mode, entityType)
119141
{
120142
LoadCodeArea("#embedCodeDiv", _Embed_DashboardEmbed);
121143
}
144+
else
145+
{
146+
LoadCodeArea("#embedCodeDiv", _Embed_TileEmbed);
147+
}
122148
}
123149

124150
function showEmbedSettings(mode, entityType)
@@ -196,6 +222,21 @@ function OpenEmbedMode(mode, entityType)
196222
setCodeAndShowEmbedSettings(mode, entityType);
197223
}
198224
}
225+
else
226+
{
227+
if (IsEmbeddingSampleTile())
228+
{
229+
LoadSampleTileIntoSession().then(function (response) {
230+
SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtTileEmbed", "#txtEmbedTileId", "#txtEmbedDashboardId");
231+
setCodeAndShowEmbedSettings(mode, entityType);
232+
});
233+
}
234+
else
235+
{
236+
SetTextBoxesFromSessionOrUrlParam("#txtAccessToken", "#txtTileEmbed", "#txtEmbedTileId", "#txtEmbedDashboardId");
237+
setCodeAndShowEmbedSettings(mode, entityType);
238+
}
239+
}
199240
}
200241

201242
function setCodeAndShowEmbedSettings(mode, entityType) {
@@ -225,3 +266,7 @@ function IsEmbeddingSampleReport() {
225266
function IsEmbeddingSampleDashboard() {
226267
return GetSession(SessionKeys.IsSampleDashboard) == true;
227268
}
269+
270+
function IsEmbeddingSampleTile() {
271+
return GetSession(SessionKeys.IsSampleTile) == true;
272+
}

‎demo/v2-demo/scripts/session_utils.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ const SessionKeys = {
44
AccessToken : "accessToken",
55
EmbedUrl : "embedUrl",
66
EmbedId : "embedId",
7+
DashboardId : "dashboardId",
78
GroupId : "groupId",
89
IsSampleReport: "isSampleReport",
910
IsSampleDashboard: "IsSampleDashboard",
11+
IsSampleTile: "IsSampleTile",
1012
EmbedMode: "embedMode",
1113
EntityType: "entityType",
1214
SampleId: "SampleId"
@@ -42,7 +44,7 @@ function UpdateSession(button, sessionKey) {
4244
}
4345
}
4446

45-
function SetTextBoxesFromSessionOrUrlParam(accessTokenSelector, embedUrlSelector, embedIdSelector) {
47+
function SetTextBoxesFromSessionOrUrlParam(accessTokenSelector, embedUrlSelector, embedIdSelector, dashboardIdSelector) {
4648
var accessToken = GetParameterByName(SessionKeys.AccessToken);
4749
if (!accessToken)
4850
{
@@ -72,7 +74,13 @@ function SetTextBoxesFromSessionOrUrlParam(accessTokenSelector, embedUrlSelector
7274
embedId = GetSession(SessionKeys.EmbedId);
7375
}
7476

77+
var dashboardId = GetParameterByName(SessionKeys.DashboardId);
78+
if (!dashboardId) {
79+
dashboardId = GetSession(SessionKeys.DashboardId);
80+
}
81+
7582
$(accessTokenSelector).val(accessToken);
7683
$(embedUrlSelector).val(embedUrl);
7784
$(embedIdSelector).val(embedId);
85+
$(dashboardIdSelector).val(dashboardId);
7886
}

‎demo/v2-demo/scripts/step_authorize.js‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
11
var reportUrl = 'http://powerbiembedapiv2.azurewebsites.net/api/Reports/SampleReport';
22
var datasetUrl = 'http://powerbiembedapiv2.azurewebsites.net/api/Reports/SampleCreate';
33
var dashboardUrl = 'http://powerbiembedapiv2.azurewebsites.net/api/Dashboards/SampleDashboard';
4+
var tileUrl = 'http://powerbiembedapiv2.azurewebsites.net/api/Tiles/SampleTile';
45

56
var LastReportSampleUrl = null;
67
var ReportRefreshTokenTimer = 0;
78
var DashboardRefreshTokenTimer = 0;
9+
var TileRefreshTokenTimer = 0;
810

911
const EntityType = {
1012
Report : "Report",
1113
Dashboard : "Dashboard",
14+
Tile : "Tile"
1215
};
1316

1417
function FetchUrlIntoSession(url, updateCurrentToken) {
1518
return fetch(url).then(function (response) {
1619
if (response.ok) {
1720
return response.json()
1821
.then(function (embedConfig) {
19-
setSession(embedConfig.embedToken.token, embedConfig.embedUrl, embedConfig.id);
22+
setSession(embedConfig.embedToken.token, embedConfig.embedUrl, embedConfig.id, embedConfig.dashboardId);
2023
SetSession(SessionKeys.SampleId, embedConfig.id);
2124

2225
if (updateCurrentToken)
2326
{
24-
var embedContainerId = (embedConfig.type === "report") ? "embedContainer" : "dashboardContainer";
27+
var embedContainerId;
28+
if (embedConfig.type === "dashboard") {
29+
embedContainerId = "dashboardContainer";
30+
} else if (embedConfig.type === "report") {
31+
embedContainerId = "embedContainer";
32+
} else {
33+
embedContainerId = "tileContainer"
34+
}
35+
2536
var embedContainer = powerbi.embeds.find(function(embedElement) {return (embedElement.element.id == embedContainerId)});
2637
if (embedContainer)
2738
{
@@ -34,10 +45,14 @@ function FetchUrlIntoSession(url, updateCurrentToken) {
3445
LastReportSampleUrl = url;
3546
TokenExpirationRefreshListener(embedConfig.minutesToExpiration, EntityType.Report);
3647
}
37-
else
48+
else if (embedConfig.type === "dashboard")
3849
{
3950
TokenExpirationRefreshListener(embedConfig.minutesToExpiration, EntityType.Dashboard);
4051
}
52+
else
53+
{
54+
TokenExpirationRefreshListener(embedConfig.minutesToExpiration, EntityType.Tile);
55+
}
4156
});
4257
}
4358
else {
@@ -81,6 +96,19 @@ function TokenExpirationRefreshListener(minutesToExpiration, entityType) {
8196
FetchUrlIntoSession(dashboardUrl, true /* updateCurrentToken */);
8297
}, updateAfterMilliSeconds);
8398
}
99+
else
100+
{
101+
if (TileRefreshTokenTimer)
102+
{
103+
console.log("step current Tile Embed Token update threads.");
104+
clearTimeout(TileRefreshTokenTimer);
105+
}
106+
107+
console.log("Tile Embed Token will be updated in " + updateAfterMilliSeconds + " milliseconds.");
108+
TileRefreshTokenTimer = setTimeout(function() {
109+
FetchUrlIntoSession(tileUrl, true /* updateCurrentToken */);
110+
}, updateAfterMilliSeconds);
111+
}
84112
}
85113

86114
function LoadSampleReportIntoSession() {
@@ -98,6 +126,11 @@ function LoadSampleDashboardIntoSession() {
98126
return FetchUrlIntoSession(dashboardUrl, false /* updateCurrentToken */);
99127
}
100128

129+
function LoadSampleTileIntoSession() {
130+
SetSession(SessionKeys.EntityType, EntityType.Tile);
131+
return FetchUrlIntoSession(tileUrl, false /* updateCurrentToken */);
132+
}
133+
101134
function OpenEmbedStepWithSample(entityType) {
102135
SetSession(SessionKeys.EntityType, entityType);
103136

@@ -111,6 +144,11 @@ function OpenEmbedStepWithSample(entityType) {
111144
SetSession(SessionKeys.IsSampleDashboard, true);
112145
OpenEmbedStep(EmbedViewMode, EntityType.Dashboard);
113146
}
147+
else
148+
{
149+
SetSession(SessionKeys.IsSampleTile, true);
150+
OpenEmbedStep(EmbedViewMode, EntityType.Tile)
151+
}
114152
}
115153

116154
function OpenEmbedStepCreateWithSample() {
@@ -127,9 +165,10 @@ function OpenEmbedStepFromUserSettings() {
127165
OpenEmbedStep(EmbedViewMode, EntityType.Report);
128166
}
129167

130-
function setSession(accessToken, embedUrl, embedId)
168+
function setSession(accessToken, embedUrl, embedId, dashboardId)
131169
{
132170
SetSession(SessionKeys.AccessToken, accessToken);
133171
SetSession(SessionKeys.EmbedUrl, embedUrl);
134172
SetSession(SessionKeys.EmbedId, embedId);
173+
SetSession(SessionKeys.DashboardId, dashboardId);
135174
}

‎demo/v2-demo/scripts/step_interact.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,13 @@ function OpenEditAndSaveOperations() {
6161
$("#selected-catogory-button").html("Edit and save operations");
6262
}
6363

64+
function OpenTileOperations() {
65+
$("#tile-operations-div").show();
66+
$("#tile-operations-li").addClass('active');
67+
68+
$("#tile-operations-div .function-ul li.active").click()
69+
$("#selected-catogory-button").html("Tile operations");
70+
}
6471

6572
function OpenDashboardOperations() {
6673
$("#dashboard-operations-div").show();

‎demo/v2-demo/settings_embed_tile.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<div id="tile-embed-table">
2+
<div class="pageTitle">
3+
<h4>Embed Tile</h4>
4+
</div>
5+
6+
<div id="embedModeInput">
7+
<h8>Fill in the fields below to get the code to embed your tile.</h8>
8+
<div class="spacer" />
9+
10+
<div class="inputLine">
11+
<div class="inputLineTitle">Embed Token</div>
12+
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
13+
</div>
14+
<div class="inputLine">
15+
<div class="inputLineTitle">Embed URL</div>
16+
<input type="text" id="txtTileEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/embed"/>
17+
</div>
18+
<div class="inputLine">
19+
<div class="inputLineTitle">Dashboard Id</div>
20+
<input type="text" id="txtEmbedDashboardId" onchange="UpdateSession(this, SessionKeys.DashboardId);"/>
21+
</div>
22+
<div class="inputLine">
23+
<div class="inputLineTitle">Tile Id</div>
24+
<input type="text" id="txtEmbedTileId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
25+
</div>
26+
</div>
27+
</div>

‎demo/v2-demo/settings_interact_tile.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<div id="step-interact-wrapper">
2+
<div>
3+
<div id="operation-categories">
4+
<div id="operations-ul-wrapper" tabindex="-1">
5+
<ul id="operations-ul">
6+
<li id="tile-operations-li" onclick="OpenTileOperations();" class="active">
7+
<a href="#">Tile</a>
8+
</li>
9+
</ul>
10+
</div>
11+
</div>
12+
<div id="category-browser">
13+
<div id="wrapper-operations-div" class="operations-div">
14+
<div id="tile-operations-div" class="operations-div">
15+
<ul class="function-ul">
16+
<li class="active">No interactions available</li>
17+
</ul>
18+
</div>
19+
</div>
20+
</div>
21+
</div>
22+
</div>

0 commit comments

Comments
 (0)