Skip to content

Commit 5494601

Browse files
author
Amit Shuster
committed
Merged PR 4068: Embedded Playground - embed settings section redesign
Redesign of the embed section ![1.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4068/attachments/1.JPG) ![2.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4068/attachments/2.JPG) ![3.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4068/attachments/3.JPG) ![4.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4068/attachments/4.JPG) ![5.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4068/attachments/5.JPG) ![6.JPG](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/4068/attachments/6.JPG)
1 parent 8fc86e5 commit 5494601

File tree

9 files changed

+320
-242
lines changed

9 files changed

+320
-242
lines changed

‎demo/v2-demo/images/info.png‎

-3.04 KB
Binary file not shown.

‎demo/v2-demo/images/info.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎demo/v2-demo/settings_embed_dashboard.html‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
<div id="dashboard-embed-table">
2-
<div class="pageTitle">
3-
<h4>Embed Dashboard</h4>
4-
</div>
5-
<h8>Select token type:</h8>
2+
<div class="editorTitle">Embed Dashboard</div>
3+
<div id="wrapper-settings-div">
4+
<h8>Select token type:</h8>
65

7-
<div id="typeSelector">
8-
<label class="radioContainer">
9-
<div onclick="SetSession(SessionKeys.TokenType, 1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input>
10-
<span class="checkmark"></span></div>
11-
</label>
12-
<label class="radioContainer">
13-
<div onclick="SetSession(SessionKeys.TokenType, 0);"><input type="radio" name="tokenType" value="0">AAD token</input>
14-
<span class="checkmark"></span></div>
15-
</label>
16-
</div>
17-
<div id="embedModeInput">
18-
<h8>Fill in the fields below to get the code to embed your dashboard.</h8>
6+
<div id="typeSelector">
7+
<label class="radioContainer">
8+
<div onclick="SetSession(SessionKeys.TokenType, 1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input>
9+
<span class="checkmark"></span></div>
10+
</label>
11+
<label class="radioContainer">
12+
<div onclick="SetSession(SessionKeys.TokenType, 0);"><input type="radio" name="tokenType" value="0"> AAD token </input>
13+
<span class="checkmark"></span></div>
14+
</label>
15+
</div>
1916
<div class="spacer" />
17+
<div id="embedModeInput">
18+
<h8>Fill in the fields below to get the code to embed your dashboard.</h8>
19+
<div class="spacer" />
2020

21-
<div class="inputLine">
22-
<div class="inputLineTitle">Embed Token</div>
23-
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
24-
</div>
25-
<div class="inputLine">
26-
<div class="inputLineTitle">Embed URL</div>
27-
<input type="text" id="txtDashboardEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/DashboardEmbed"/>
28-
</div>
29-
<div class="inputLine">
30-
<div class="inputLineTitle">Dashboard Id</div>
31-
<input type="text" id="txtEmbedDashboardId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
21+
<div class="inputLine">
22+
<div class="inputLineTitle">Embed Token</div>
23+
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
24+
</div>
25+
<div class="inputLine">
26+
<div class="inputLineTitle">Embed URL</div>
27+
<input type="text" id="txtDashboardEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/DashboardEmbed"/>
28+
</div>
29+
<div class="inputLine">
30+
<div class="inputLineTitle">Dashboard ID</div>
31+
<input type="text" id="txtEmbedDashboardId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
32+
</div>
3233
</div>
3334
</div>
3435
</div>

‎demo/v2-demo/settings_embed_qna.html‎

Lines changed: 38 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,45 @@
11
<div id="qna-embed-table">
2-
<div class="pageTitle">
3-
<h4>Embed Q&A</h4>
4-
</div>
5-
6-
<h8>Select mode to embed Q&A in:</h8>
7-
<div class="spacer" />
8-
<div id="modeSelector">
9-
<label class="radioContainer">
10-
<div onclick="ToggleQuestionBox(false);"><input type="radio" name="qnaMode" value="Interactive"> Show Q&A </input>
11-
<span class="checkmark"></span></div>
12-
</label>
13-
<label class="radioContainer">
14-
<div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="Interactive" checked="checked"> Show Q&A, use predefined question </input>
15-
<span class="checkmark"></span></div>
16-
</label>
17-
<label class="radioContainer">
18-
<div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="ResultOnly"> Show answer only, use predefined question </input>
19-
<span class="checkmark"></span></div>
20-
</label>
21-
</div>
22-
23-
<div id="questionDiv">
24-
<h8>Q&A Input Question</h8>
2+
<div class="editorTitle">Embed Q&A</div>
3+
<div id="wrapper-settings-div">
4+
<h8>Select mode to embed Q&A in:</h8>
255
<div class="spacer" />
26-
<input type="text" id="txtQuestion" style="width: 100%" value="This year sales by store type by postal code as map"/>
27-
</div>
28-
29-
<div id="embedModeInput">
30-
<h8>Fill in the fields below to get the code to embed your Q&A.</h8>
31-
<div class="spacer" />
32-
33-
<div class="inputLine">
34-
<div class="inputLineTitle">Embed Token</div>
35-
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
6+
<div id="modeSelector">
7+
<label class="radioContainer">
8+
<div onclick="ToggleQuestionBox(false);"><input type="radio" name="qnaMode" value="Interactive"> Show Q&A </input>
9+
<span class="checkmark"></span></div>
10+
</label>
11+
<label class="radioContainer">
12+
<div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="Interactive" checked="checked"> Show Q&A, use predefined question </input>
13+
<span class="checkmark"></span></div>
14+
</label>
15+
<label class="radioContainer">
16+
<div onclick="ToggleQuestionBox(true);"><input type="radio" name="qnaMode" value="ResultOnly"> Show answer only, use predefined question </input>
17+
<span class="checkmark"></span></div>
18+
</label>
3619
</div>
37-
<div class="inputLine">
38-
<div class="inputLineTitle">Embed URL</div>
39-
<input type="text" id="txtQnaEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://app.powerbi.com/qnaEmbed"/>
20+
21+
<div id="questionDiv">
22+
<h8>Q&A input question</h8>
23+
<div class="spacer" />
24+
<input type="text" id="txtQuestion" style="width: 100%" value="This year sales by store type by postal code as map"/>
4025
</div>
41-
<div class="inputLine">
42-
<div class="inputLineTitle">Dataset Id</div>
43-
<input type="text" id="txtDatasetId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
26+
27+
<div id="embedModeInput">
28+
<h8>Fill in the fields below to get the code to embed your Q&A.</h8>
29+
<div class="spacer" />
30+
31+
<div class="inputLine">
32+
<div class="inputLineTitle">Embed Token</div>
33+
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
34+
</div>
35+
<div class="inputLine">
36+
<div class="inputLineTitle">Embed URL</div>
37+
<input type="text" id="txtQnaEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://app.powerbi.com/qnaEmbed"/>
38+
</div>
39+
<div class="inputLine">
40+
<div class="inputLineTitle">Dataset ID</div>
41+
<input type="text" id="txtDatasetId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
42+
</div>
4443
</div>
4544
</div>
4645
</div>

‎demo/v2-demo/settings_embed_report.html‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,66 @@
11
<div id="report-embed-table" class="embed-table">
2-
<div class="pageTitle">
3-
<h4>Embed Report</h4>
4-
</div>
5-
6-
<h8>Select mode to embed your report in:</h8>
7-
<div id="modeSelector">
8-
<label class="radioContainer">
9-
<div onclick="OpenViewMode();"><input type="radio" name="embedMode" value="view" checked="checked"> View mode </input>
10-
<span class="checkmark"></span></div>
11-
</label>
12-
<label class="radioContainer">
13-
<div onclick="OpenEditMode();"><input type="radio" name="embedMode" value="edit"> Edit mode</input>
2+
<div class="editorTitle">Embed Report</div>
3+
<div id="wrapper-settings-div">
4+
<h8>Select mode to embed your report in:</h8>
5+
<div id="modeSelector">
6+
<label class="radioContainer">
7+
<div onclick="OpenViewMode();"><input type="radio" name="embedMode" value="view" checked="checked"> View mode </input>
148
<span class="checkmark"></span></div>
15-
</label>
16-
<label class="radioContainer">
17-
<div onclick="OpenCreateMode();"><input type="radio" name="embedMode" value="create"> Create mode</input>
9+
</label>
10+
<label class="radioContainer">
11+
<div onclick="OpenEditMode();"><input type="radio" name="embedMode" value="edit"> Edit mode </input>
1812
<span class="checkmark"></span></div>
19-
</label>
20-
</div>
21-
22-
<h8>Select token type:</h8>
13+
</label>
14+
<label class="radioContainer">
15+
<div onclick="OpenCreateMode();"><input type="radio" name="embedMode" value="create"> Create mode </input>
16+
<span class="checkmark"></span></div>
17+
</label>
18+
</div>
2319

24-
<div id="typeSelector">
25-
<label class="radioContainer">
26-
<div onclick="SetEmbedTypeToEmbedToken(1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input>
27-
<span class="checkmark"></span></div>
28-
</label>
29-
<label class="radioContainer">
30-
<div onclick="SetEmbedTypeToEmbedToken(0);"><input type="radio" name="tokenType" value="0"> AAD token</input>
31-
<span class="checkmark"></span></div>
32-
</label>
33-
</div>
20+
<h8>Select token type:</h8>
3421

35-
<div class="spacer" />
36-
<h8>Fill in the fields below to get the code to embed your report.</h8>
37-
<div id="embedModeInput">
38-
<div class="inputLine">
39-
<div class="inputLineTitle">Embed Token</div>
40-
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
41-
</div>
42-
<div class="inputLine">
43-
<div class="inputLineTitle">Embed URL</div>
44-
<input type="text" id="txtReportEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/ReportEmbed"/>
22+
<div id="typeSelector">
23+
<label class="radioContainer">
24+
<div onclick="SetEmbedTypeToEmbedToken(1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input>
25+
<span class="checkmark"></span></div>
26+
</label>
27+
<label class="radioContainer">
28+
<div onclick="SetEmbedTypeToEmbedToken(0);"><input type="radio" name="tokenType" value="0"> AAD token </input>
29+
<span class="checkmark"></span></div>
30+
</label>
4531
</div>
46-
<div class="inputLine">
47-
<div class="inputLineTitle">Report Id</div>
48-
<input type="text" id="txtEmbedReportId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
32+
33+
<h8>Fill in the fields below to get the code to embed your report</h8>
34+
<div class="spacer" />
35+
<div id="embedModeInput">
36+
<div class="inputLine">
37+
<div class="inputLineTitle">Embed Token</div>
38+
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
39+
</div>
40+
<div class="inputLine">
41+
<div class="inputLineTitle">Embed URL</div>
42+
<input type="text" id="txtReportEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/ReportEmbed"/>
43+
</div>
44+
<div class="inputLine">
45+
<div class="inputLineTitle">Report ID</div>
46+
<input type="text" id="txtEmbedReportId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
47+
</div>
4948
</div>
50-
</div>
5149

52-
<div id="createModeInput">
50+
<div id="createModeInput">
5351

54-
<div class="inputLine">
55-
<div class="inputLineTitle">Embed Token</div>
56-
<input type="text" id="txtCreateAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
57-
</div>
58-
<div class="inputLine">
59-
<div class="inputLineTitle">Embed URL</div>
60-
<input type="text" id="txtCreateReportEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/ReportEmbed"/>
61-
</div>
62-
<div class="inputLine">
63-
<div class="inputLineTitle">Dataset Id</div>
64-
<input type="text" id="txtEmbedDatasetId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
52+
<div class="inputLine">
53+
<div class="inputLineTitle">Embed Token</div>
54+
<input type="text" id="txtCreateAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
55+
</div>
56+
<div class="inputLine">
57+
<div class="inputLineTitle">Embed URL</div>
58+
<input type="text" id="txtCreateReportEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/ReportEmbed"/>
59+
</div>
60+
<div class="inputLine">
61+
<div class="inputLineTitle">Dataset ID</div>
62+
<input type="text" id="txtEmbedDatasetId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
63+
</div>
6564
</div>
6665
</div>
6766
</div>

‎demo/v2-demo/settings_embed_tile.html‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,39 @@
11
<div id="tile-embed-table">
2-
<div class="pageTitle">
3-
<h4>Embed Tile</h4>
4-
</div>
5-
<h8>Select token type:</h8>
2+
<div class="editorTitle">Embed Tile</div>
3+
<div id="wrapper-settings-div">
4+
<h8>Select token type:</h8>
65

7-
<div id="typeSelector">
8-
<label class="radioContainer">
9-
<div onclick="SetSession(SessionKeys.TokenType, 1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input>
10-
<span class="checkmark"></span></div>
11-
</label>
12-
<label class="radioContainer">
13-
<div onclick="SetSession(SessionKeys.TokenType, 0);"><input type="radio" name="tokenType" value="0"> AAD token </input>
14-
<span class="checkmark"></span></div>
15-
</label>
16-
</div>
17-
<div id="embedModeInput">
18-
<h8>Fill in the fields below to get the code to embed your tile.</h8>
6+
<div id="typeSelector">
7+
<label class="radioContainer">
8+
<div onclick="SetSession(SessionKeys.TokenType, 1);"><input type="radio" name="tokenType" value="1" checked="checked"> Embed token </input>
9+
<span class="checkmark"></span></div>
10+
</label>
11+
<label class="radioContainer">
12+
<div onclick="SetSession(SessionKeys.TokenType, 0);"><input type="radio" name="tokenType" value="0"> AAD token </input>
13+
<span class="checkmark"></span></div>
14+
</label>
15+
</div>
1916
<div class="spacer" />
17+
<div id="embedModeInput">
18+
<h8>Fill in the fields below to get the code to embed your tile.</h8>
19+
<div class="spacer" />
2020

21-
<div class="inputLine">
22-
<div class="inputLineTitle">Embed Token</div>
23-
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
24-
</div>
25-
<div class="inputLine">
26-
<div class="inputLineTitle">Embed URL</div>
27-
<input type="text" id="txtTileEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/embed"/>
28-
</div>
29-
<div class="inputLine">
30-
<div class="inputLineTitle">Dashboard Id</div>
31-
<input type="text" id="txtEmbedDashboardId" onchange="UpdateSession(this, SessionKeys.DashboardId);"/>
32-
</div>
33-
<div class="inputLine">
34-
<div class="inputLineTitle">Tile Id</div>
35-
<input type="text" id="txtEmbedTileId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
21+
<div class="inputLine">
22+
<div class="inputLineTitle">Embed Token</div>
23+
<input type="text" id="txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" />
24+
</div>
25+
<div class="inputLine">
26+
<div class="inputLineTitle">Embed URL</div>
27+
<input type="text" id="txtTileEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" value="https://embedded.powerbi.com/embed"/>
28+
</div>
29+
<div class="inputLine">
30+
<div class="inputLineTitle">Dashboard ID</div>
31+
<input type="text" id="txtEmbedDashboardId" onchange="UpdateSession(this, SessionKeys.DashboardId);"/>
32+
</div>
33+
<div class="inputLine">
34+
<div class="inputLineTitle">Tile ID</div>
35+
<input type="text" id="txtEmbedTileId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/>
36+
</div>
3637
</div>
3738
</div>
3839
</div>

0 commit comments

Comments
 (0)