Skip to content

Commit 6b38600

Browse files
author
Amit Shuster
committed
Merged PR 4080: Embed and Interact Tabs, docs fix
![32.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4080/attachments/32.JPG) ![33.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4080/attachments/33.JPG) ![31.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4080/attachments/31.JPG)
1 parent 6d909af commit 6b38600

22 files changed

+158
-79
lines changed

‎demo/v2-demo/docs.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<div id="docs-section">
22
<div id="docs-content">
3-
<h1>Power BI Embedded Documentation</h1>
43
<div class="docs-line">
54
<div class="docs-links">
65
<h2>Getting Started</h2>
@@ -24,15 +23,15 @@ <h2>Support</h2>
2423
<h2>Videos</h2>
2524
<div class="docs-video">
2625
What is Power BI Embedded<br>
27-
<iframe width="330" height="186" src="https://www.youtube.com/embed/iEHfUuoZseo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
26+
<iframe width="330" height="186" src="https://www.youtube.com/embed/iEHfUuoZseo" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
2827
</div>
2928
<div class="docs-video">
3029
Microsoft Power BI Embedded update<br>
31-
<iframe width="330" height="186" src="https://www.youtube.com/embed/NbsLRDMWNRI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
30+
<iframe width="330" height="186" src="https://www.youtube.com/embed/NbsLRDMWNRI" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
3231
</div>
3332
<div class="docs-video">
3433
Get an embed token<br>
35-
<iframe width="330" height="186" src="https://www.youtube.com/embed/GPHHdDRSlis" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
34+
<iframe width="330" height="186" src="https://www.youtube.com/embed/GPHHdDRSlis" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
3635
</div>
3736
<div class="docs-video">
3837
Setting up and Getting Started<br>

‎demo/v2-demo/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666

6767
<script src="scripts/report.js"></script>
6868

69-
<script src="scripts/step_select.js"></script>
69+
<script src="scripts/step_samples.js"></script>
7070
<script src="scripts/step_embed.js"></script>
7171
<script src="scripts/step_interact.js"></script>
7272

‎demo/v2-demo/report.html‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,21 @@
11
<!DOCTYPE html>
2-
<div id="select-step-wrapper">
2+
<div id="samples-step-wrapper">
33
</div>
44
<div id="embed-and-interact-steps-wrapper">
55
<div class="topPanel">
6-
<div id="settings" class="topFrame"></div>
6+
<div id="settings-wrapper" class="topFrame">
7+
<div id="tabs-wrapper">
8+
<ul id="tabs-ul">
9+
<li id="embed-tab" class="tabs-li-active" onclick="OpenEmbedTab();">
10+
<div><a href="#">Embed</a></div>
11+
</li>
12+
<li id="interact-tab" onclick="OpenInteractTab();">
13+
<div><a href="#">Interact</a></div>
14+
</li>
15+
</ul>
16+
</div>
17+
<div id="settings"></div>
18+
</div>
719
<div id="embedCodeDiv" class="topFrame"></div>
820
<div id="logWindow" class="topFrame"></div>
921
</div>
@@ -51,7 +63,7 @@
5163

5264
<script>
5365
$(document).ready(function() {
54-
$("#select-step-wrapper").load("step_select.html");
66+
$("#samples-step-wrapper").load("step_samples.html");
5567

5668
LoadLogWindow("#logWindow");
5769

@@ -77,12 +89,12 @@
7789

7890
if (GetParameterByName("embedUrl") || GetParameterByName("embedId") || GetParameterByName("accessToken") || GetParameterByName("entityType"))
7991
{
80-
OpenEmbedStep(mode, entityType, 0);
92+
OpenCodeStep(mode, entityType, 0);
8193
}
8294
else
8395
{
8496
// Open Select Step after this page loads.
85-
OpenSelectStep();
97+
OpenSamplesStep();
8698
}
8799

88100
Log = InitLogger("txtResponse");

‎demo/v2-demo/sample.html‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
<div id="steps-nav-bar">
22
<div id="steps-ul-dev">
33
<ul id="steps-ul" class="steps-ul">
4-
<li id="steps-select" class="steps-li-active" onclick="OpenSelectStep();">
4+
<li id="steps-samples" class="steps-li-active" onclick="OpenSamplesStep();">
55
<div class="stepsButton">
6-
<a href="#">Select</a>
6+
<a href="#">Samples</a>
77
</div>
88
</li>
9-
<li id="steps-embed" onclick="OpenEmbedStepFromNavPane();">
9+
<li id="steps-code" onclick="OpenCodeStepFromNavPane();">
1010
<div class="stepsButton">
11-
<a href="#">Embed</a>
12-
</div>
13-
</li>
14-
<li id="steps-interact" onclick="OpenInteractStep();">
15-
<div class="stepsButton">
16-
<a href="#">Interact</a>
11+
<a href="#">Code</a>
1712
</div>
1813
</li>
1914
</ul>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,7 +217,8 @@ function _Embed_DashboardEmbed() {
217217
tokenType: tokenType == '0' ? models.TokenType.Aad : models.TokenType.Embed,
218218
accessToken: txtAccessToken,
219219
embedUrl: txtEmbedUrl,
220-
id: txtEmbedDashboardId
220+
id: txtEmbedDashboardId,
221+
pageView: 'fitToWidth'
221222
};
222223

223224
// Get a reference to the embedded dashboard HTML element

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $(function() {
99
});
1010

1111
function OpenSampleSection() {
12-
OpenEmbedWorkspace("#main-sample", "step_select.html");
12+
OpenEmbedWorkspace("#main-sample", "step_samples.html");
1313
}
1414

1515
function OpenAnyReportSection() {
@@ -28,12 +28,12 @@ function OpenEmbedWorkspace(activeTabSelector, authStepHtml)
2828
});
2929
}
3030

31-
$("#select-step-wrapper").load(authStepHtml);
31+
$("#samples-step-wrapper").load(authStepHtml);
3232
SetActiveStyle(activeTabSelector);
3333

3434
$(".content").hide();
3535
$("#sampleContent").show();
36-
OpenSelectStep();
36+
OpenSamplesStep();
3737
}
3838

3939
function OpenDocumentationSection() {

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

Lines changed: 55 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,43 @@
11
const active_class = 'active';
2-
const active_li = 'steps-li-active';
2+
const active_steps_li = 'steps-li-active';
3+
const active_tabs_li = 'tabs-li-active';
34

45
const EmbedViewMode = "view";
56
const EmbedEditMode = "edit";
67
const EmbedCreateMode = "create";
78

89
const runEmbedCodeTimeout = 500;
910

10-
function OpenSelectStep() {
11+
function OpenSamplesStep() {
1112
$('#steps-ul a').removeClass(active_class);
12-
$(".steps-li-active").removeClass(active_li);
13+
$(".steps-li-active").removeClass(active_steps_li);
1314

14-
$("#steps-select a").addClass(active_class);
15-
$("#steps-select").addClass(active_li);
15+
$("#steps-samples a").addClass(active_class);
16+
$("#steps-samples").addClass(active_steps_li);
1617

1718
// Hide Embed view in authorization step.
18-
$("#select-step-wrapper").show();
19+
$("#samples-step-wrapper").show();
1920
$("#embed-and-interact-steps-wrapper").hide();
2021
}
2122

22-
function OpenEmbedStepFromNavPane()
23+
function OpenCodeStepFromNavPane()
2324
{
2425
var mode = GetSession(SessionKeys.EmbedMode);
2526
var entityType = GetSession(SessionKeys.EntityType);
2627
var tokenType = GetSession(SessionKeys.TokenType);
2728

28-
OpenEmbedStep(mode, entityType, tokenType);
29+
OpenCodeStep(mode, entityType, tokenType);
2930
}
3031

31-
function OpenEmbedStep(mode, entityType, tokenType) {
32+
function OpenCodeStep(mode, entityType, tokenType) {
3233
$('#steps-ul a').removeClass(active_class);
33-
$(".steps-li-active").removeClass(active_li);
34+
$(".steps-li-active").removeClass(active_steps_li);
3435

35-
$('#steps-embed a').addClass(active_class);
36-
$('#steps-embed').addClass(active_li);
36+
$('#steps-code a').addClass(active_class);
37+
$('#steps-code').addClass(active_steps_li);
3738

3839
// Hide Embed view in authorization step.
39-
$("#select-step-wrapper").hide();
40+
$("#samples-step-wrapper").hide();
4041
$("#embed-and-interact-steps-wrapper").show();
4142

4243
let containers = $(".iframeContainer");
@@ -53,7 +54,15 @@ function OpenEmbedStep(mode, entityType, tokenType) {
5354
$(activeContainer).attr('id', containerID);
5455
$(activeContainer).addClass(active_class);
5556

56-
const widthHeightRatio = 0.4;
57+
$('.' + active_tabs_li).removeClass(active_tabs_li);
58+
59+
$('#embed-tab').addClass(active_tabs_li);
60+
$('#interact-tab').removeClass(active_tabs_li);
61+
62+
LoadEmbedSettings(mode, entityType, tokenType);
63+
}
64+
65+
function LoadEmbedSettings(mode, entityType, tokenType) {
5766
if (entityType == EntityType.Report)
5867
{
5968
$("#settings").load("settings_embed_report.html", function() {
@@ -86,18 +95,40 @@ function OpenEmbedStep(mode, entityType, tokenType) {
8695
}
8796
}
8897

89-
function OpenInteractStep() {
90-
$('#steps-ul a').removeClass(active_class);
91-
$(".steps-li-active").removeClass(active_li);
98+
function OpenEmbedTab() {
99+
if ($('#embed-tab').hasClass(active_tabs_li)) {
100+
return;
101+
}
92102

93-
$('#steps-interact a').addClass(active_class);
94-
$('#steps-interact').addClass(active_li);
103+
$('.' + active_tabs_li).removeClass(active_tabs_li);
95104

96-
// Hide Embed view in authorization step.
97-
$("#select-step-wrapper").hide();
98-
$("#embed-and-interact-steps-wrapper").show();
105+
$('#embed-tab').addClass(active_tabs_li);
99106

107+
var mode = GetSession(SessionKeys.EmbedMode);
100108
var entityType = GetSession(SessionKeys.EntityType);
109+
var tokenType = GetSession(SessionKeys.TokenType);
110+
111+
LoadEmbedSettings(mode, entityType, tokenType);
112+
}
113+
114+
function isInteractStepEnabled(entityType) {
115+
var classPrefix = getEmbedContainerClassPrefix(entityType);
116+
var activeContainer = classPrefix + ($(".desktop-view").hasClass(active_class) ? 'Container' : 'MobileContainer');
117+
118+
// Check if active container has an iframe
119+
return $(activeContainer + " iframe").length > 0;
120+
}
121+
122+
function OpenInteractTab() {
123+
var entityType = GetSession(SessionKeys.EntityType);
124+
// Interact step is disabled unless active container has an iframe
125+
if (!isInteractStepEnabled(entityType)) {
126+
// TODO: SHOW TOOLTIP "Press the run button in order to embed, before interacting"
127+
return;
128+
}
129+
130+
$('.' + active_tabs_li).removeClass(active_tabs_li);
131+
$('#interact-tab').addClass(active_tabs_li);
101132

102133
if (entityType == EntityType.Tile)
103134
{
@@ -386,7 +417,7 @@ function EmbedAreaDesktopView() {
386417
$(classPrefix + 'MobileContainer').removeClass(active_class);
387418
$(classPrefix + 'Container').addClass(active_class);
388419

389-
if(!$('#steps-embed').hasClass("steps-li-active")) {
420+
if(!$('#embed-tab').hasClass("tabs-li-active")) {
390421
return;
391422
}
392423

@@ -424,7 +455,7 @@ function EmbedAreaMobileView() {
424455
$(classPrefix + 'Container').removeClass(active_class);
425456
$(classPrefix + 'MobileContainer').addClass(active_class);
426457

427-
if(!$('#steps-embed').hasClass("steps-li-active")) {
458+
if(!$('#embed-tab').hasClass("tabs-li-active")) {
428459
return;
429460
}
430461

‎demo/v2-demo/scripts/step_select.js‎ renamed to ‎demo/v2-demo/scripts/step_samples.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -155,48 +155,48 @@ function LoadSampleQnaIntoSession() {
155155
return FetchUrlIntoSession(qnaUrl, false /* updateCurrentToken */);
156156
}
157157

158-
function OpenEmbedStepWithSample(entityType) {
158+
function OpenCodeStepWithSample(entityType) {
159159
SetSession(SessionKeys.EntityType, entityType);
160160

161161
if (entityType == EntityType.Report)
162162
{
163163
SetSession(SessionKeys.IsSampleReport, true);
164-
OpenEmbedStep(EmbedViewMode, EntityType.Report);
164+
OpenCodeStep(EmbedViewMode, EntityType.Report);
165165
}
166166
else if (entityType == EntityType.Visual)
167167
{
168168
SetSession(SessionKeys.IsSampleReport, true);
169-
OpenEmbedStep(EmbedViewMode, EntityType.Visual);
169+
OpenCodeStep(EmbedViewMode, EntityType.Visual);
170170
}
171171
else if (entityType == EntityType.Dashboard)
172172
{
173173
SetSession(SessionKeys.IsSampleDashboard, true);
174-
OpenEmbedStep(EmbedViewMode, EntityType.Dashboard);
174+
OpenCodeStep(EmbedViewMode, EntityType.Dashboard);
175175
}
176176
else if (entityType == EntityType.Tile)
177177
{
178178
SetSession(SessionKeys.IsSampleTile, true);
179-
OpenEmbedStep(EmbedViewMode, EntityType.Tile)
179+
OpenCodeStep(EmbedViewMode, EntityType.Tile)
180180
}
181181
else if (entityType == EntityType.Qna)
182182
{
183183
SetSession(SessionKeys.IsSampleQna, true);
184-
OpenEmbedStep(EmbedViewMode, EntityType.Qna)
184+
OpenCodeStep(EmbedViewMode, EntityType.Qna)
185185
}
186186
}
187187

188-
function OpenEmbedStepCreateWithSample() {
188+
function OpenCodeStepCreateWithSample() {
189189
SetSession(SessionKeys.IsSampleReport, true);
190190
SetSession(SessionKeys.EntityType, EntityType.Report);
191191

192-
OpenEmbedStep(EmbedCreateMode, EntityType.Report);
192+
OpenCodeStep(EmbedCreateMode, EntityType.Report);
193193
}
194194

195-
function OpenEmbedStepFromUserSettings() {
195+
function OpenCodeStepFromUserSettings() {
196196
SetSession(SessionKeys.IsSampleReport, false);
197197
SetSession(SessionKeys.EntityType, EntityType.Report);
198198

199-
OpenEmbedStep(EmbedViewMode, EntityType.Report);
199+
OpenCodeStep(EmbedViewMode, EntityType.Report);
200200
}
201201

202202
function WarmStartSampleReportEmbed() {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ function SetCode(func) {
6262

6363
$('#btnRunCode').off('click');
6464
$('#btnRunCode').click(runFunc);
65+
// TODO: add indication to click Interact tab on first embedding
6566
}
6667
}
6768

‎demo/v2-demo/settings_embed_dashboard.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<div id="dashboard-embed-table">
2-
<div class="editorTitle">Embed Dashboard</div>
32
<div id="wrapper-settings-div">
43
<h8>Select token type:</h8>
54

0 commit comments

Comments
 (0)