Skip to content

Commit 44f7953

Browse files
ali-hamudali-hamud
authored
Merge pull request #160 from Microsoft/alihamud-moveOwnReport
Move embedding any report info to another tab
2 parents 38cd16e + 2e619d8 commit 44f7953

File tree

7 files changed

+104
-64
lines changed

7 files changed

+104
-64
lines changed

‎demo/code-demo/anyReport.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<div id="userReport" class="line">
2+
<div class="pageTitle">
3+
<h3>Embed your own report</h3>
4+
<h8>You can also embed your own report by following the instructions below.</h8>
5+
</div>
6+
<div class="settings">
7+
<div id="EmbedWithSpecificReportDiv">
8+
<div class="line">
9+
<h5>Prerequisites</h5>
10+
<ul>
11+
<li>A workspace in the <a href="https://azure.microsoft.com/en-us/documentation/articles/power-bi-embedded-get-started/">Power BI embedded service.</a></li>
12+
<li>Power BI report imported to your workspace.</li>
13+
</ul>
14+
</div>
15+
16+
<div class="line">
17+
<h5>Instructions to generate an embed App Token</h5>
18+
Once you have improted a report into Power BI workspace, you are ready to embed it.
19+
20+
To embed a report, you need to get an embed App Token. You can create this token in multiple ways.
21+
<ul>
22+
<li>Using <a href="https://github.com/Microsoft/PowerBI-cli">PowerBI-Cli</a> tool.</li>
23+
<li>From .Net Code using <a href="http://www.nuget.org/packages/Microsoft.PowerBI.Core/">Microsoft.PowerBI.Core</a> package.</li>
24+
<li>From NodeJS code using <a href="https://github.com/Microsoft/PowerBI-Node">powerbi-api</a> package.</li>
25+
</ul>
26+
</div>
27+
28+
<div id="authorizeParameterDiv" class="line">
29+
<h5>Enter embed details</h5>
30+
31+
<table id="user-embed-details">
32+
<tr>
33+
<td class="td-field-name">Embed App Token</td>
34+
<td><input type="text" id="auth_txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" /></td>
35+
</tr>
36+
<tr>
37+
<td class="td-field-name">Embed URL</td>
38+
<td>
39+
<input type="text" id="auth_txtReportEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" />
40+
</td>
41+
</tr>
42+
<tr>
43+
<td class="td-field-name">Report Id</td>
44+
<td><input type="text" id="auth_txtEmbedReportId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/></td>
45+
</tr>
46+
</table>
47+
<button id="nextStep" class="blueButton" onclick="OpenEmbedStepFromUserSettings()">Next step - Embed</button>
48+
</div>
49+
50+
</div>
51+
</div>
52+
</div>

‎demo/code-demo/docs.html‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,26 @@
1+
<div>
2+
<div class="title">
3+
<h2>Getting Started</h2>
4+
</div>
5+
<div>
6+
Please visit our
7+
<a href="https://docs.microsoft.com/en-us/azure/power-bi-embedded/power-bi-embedded-what-is-power-bi-embedded">documentation</a>
8+
to start using Power BI Embedded.
9+
</div>
10+
</div>
11+
12+
<h2>Videos</h2>
13+
114
<div>
215
<div class="title">
316
1. Learn how to Embed and Interact with Power BI Reports.
417
</div>
518
<iframe class="video" src="https://www.youtube.com/embed/nfkVljh_9O4" frameborder="0" allowfullscreen></iframe>
6-
</div>
19+
</div>
20+
21+
<div>
22+
<div class="title">
23+
2. Learn how to Create, Edit and Save Power BI reports in Embedded view.
24+
</div>
25+
<iframe class="video" src="https://www.youtube.com/embed/ibuN4DzCl5c?showinfo=0" frameborder="0" allowfullscreen></iframe>
26+
</div>

‎demo/code-demo/index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
<li id="top-sample" class="top-li-active" onclick="OpenSampleSection();">
2323
<div><a href="#">Sample</a></div>
2424
</li>
25+
<li id="top-anyReport" class="top-li-active" onclick="OpenAnyReportSection();">
26+
<div><a href="#">Any Report</a></div>
27+
</li>
2528
<li id="top-docs" onclick="OpenDocumentationSection();">
2629
<div><a href="#">Documentation</a></div>
2730
</li>
@@ -33,15 +36,13 @@
3336

3437
<div id="contentWrapper">
3538
<div id ="sampleContent" class="content">
36-
3739
</div>
38-
<div id ="documentationContent" class="content">
3940

41+
<div id ="documentationContent" class="content">
4042
</div>
41-
</div>
4243

43-
<div id="oldSample">
44-
<a href="../static.html">Old Sample</a>
44+
<div id ="anyReportContent" class="content">
45+
</div>
4546
</div>
4647

4748
<script src="../node_modules/jquery/dist/jquery.js"></script>

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
var sampleContentLoaded = false;
22
var documentationContentLoaded = false;
3-
3+
var anyReportSectionLoaded = false;
44

55
$(function() {
66
OpenSampleSection();
77
});
88

99
function OpenSampleSection() {
10+
OpenEmbedWorkspace("#top-sample", "step_authorize.html");
11+
}
12+
13+
function OpenAnyReportSection() {
14+
OpenEmbedWorkspace("#top-anyReport", "anyReport.html");
15+
}
16+
17+
function OpenEmbedWorkspace(activeTabSelector, authStepHtml)
18+
{
19+
// Any report, uses the same settings as sample report. ony changes the auth step.
1020
if (!sampleContentLoaded)
1121
{
1222
// Open Report Sample.
@@ -16,10 +26,12 @@ function OpenSampleSection() {
1626
});
1727
}
1828

19-
SetActiveStyle("#top-sample");
29+
$("#authorize-step-wrapper").load(authStepHtml);
30+
SetActiveStyle(activeTabSelector);
2031

2132
$(".content").hide();
2233
$("#sampleContent").show();
34+
OpenAuthStep();
2335
}
2436

2537
function OpenDocumentationSection() {

‎demo/code-demo/step_authorize.html‎

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,61 +9,6 @@ <h3>Sample Report</h3>
99
<button id="GoToEmbedStepButton" class="blueButton" onclick="OpenEmbedStepWithSample()">Embed sample report</button>
1010
</div>
1111
</div>
12-
13-
<hr />
14-
15-
<div id="userReport" class="line">
16-
<div class="pageTitle">
17-
<h3>Embed your own report</h3>
18-
<h8>You can also embed your own report by following the instructions below.</h8>
19-
</div>
20-
<div class="settings">
21-
<div id="EmbedWithSpecificReportDiv">
22-
<div class="line">
23-
<h5>Prerequisites</h5>
24-
<ul>
25-
<li>A workspace in the <a href="https://azure.microsoft.com/en-us/documentation/articles/power-bi-embedded-get-started/">Power BI embedded service.</a></li>
26-
<li>Power BI report imported to your workspace.</li>
27-
</ul>
28-
</div>
29-
30-
<div class="line">
31-
<h5>Instructions to generate an embed App Token</h5>
32-
Once you have improted a report into Power BI workspace, you are ready to embed it.
33-
34-
To embed a report, you need to get an embed App Token. You can create this token in multiple ways.
35-
<ul>
36-
<li>Using <a href="https://github.com/Microsoft/PowerBI-cli">PowerBI-Cli</a> tool.</li>
37-
<li>From .Net Code using <a href="http://www.nuget.org/packages/Microsoft.PowerBI.Core/">Microsoft.PowerBI.Core</a> package.</li>
38-
<li>From NodeJS code using <a href="https://github.com/Microsoft/PowerBI-Node">powerbi-api</a> package.</li>
39-
</ul>
40-
</div>
41-
42-
<div id="authorizeParameterDiv" class="line">
43-
<h5>Enter embed details</h5>
44-
45-
<table id="user-embed-details">
46-
<tr>
47-
<td class="td-field-name">Embed App Token</td>
48-
<td><input type="text" id="auth_txtAccessToken" onchange="UpdateSession(this, SessionKeys.AccessToken);" /></td>
49-
</tr>
50-
<tr>
51-
<td class="td-field-name">Embed URL</td>
52-
<td>
53-
<input type="text" id="auth_txtReportEmbed" onchange="UpdateSession(this, SessionKeys.EmbedUrl);" />
54-
</td>
55-
</tr>
56-
<tr>
57-
<td class="td-field-name">Report Id</td>
58-
<td><input type="text" id="auth_txtEmbedReportId" onchange="UpdateSession(this, SessionKeys.EmbedId);"/></td>
59-
</tr>
60-
</table>
61-
<button id="nextStep" class="blueButton" onclick="OpenEmbedStepFromUserSettings()">Next step - Embed</button>
62-
</div>
63-
64-
</div>
65-
</div>
66-
</div>
6712
</div>
6813

6914
<script>

‎demo/code-demo/style/layout.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,16 @@ header
127127
}
128128
}
129129

130+
@media screen and (max-width: 500px) {
131+
.top-ul li {
132+
float: left;
133+
margin-right: 15px;
134+
text-align: center;
135+
line-height: 22px;
136+
font-size: 13px;
137+
}
138+
}
139+
130140
@media screen and (min-width: 321px) {
131141
header
132142
{

‎dist/powerbi.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)