Skip to content

Commit dade325

Browse files
ali-hamudali-hamud
committed
Live Demo with visible code.
1 parent ce5baeb commit dade325

File tree

14 files changed

+942
-0
lines changed

14 files changed

+942
-0
lines changed

‎demo/code-demo/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
9+
<link rel="stylesheet" type="text/css" href="style/style.css">
10+
</head>
11+
12+
<body>
13+
<header class="ms-font-xxl">
14+
<div class="logo-text">
15+
<span class="logo-text-span">Microsoft Power BI JavaScript SDK - Live Sample</span>
16+
</div>
17+
</header>
18+
19+
<div id="mainContent" class="jumbotron">
20+
</div>
21+
22+
<script src="/bower_components/jquery/dist/jquery.js"></script>
23+
<script src="/bower_components/es6-promise/es6-promise.js"></script>
24+
<script src="/bower_components/fetch/fetch.js"></script>
25+
<script src="/bower_components/powerbi-client/dist/powerbi.js"></script>
26+
27+
<script src="scripts/codesamples.js"></script>
28+
29+
<script src="scripts/index.js"></script>
30+
<script src="scripts/utils.js"></script>
31+
<script src="scripts/session_utils.js"></script>
32+
33+
34+
<script src="scripts/report.js"></script>
35+
36+
<script src="scripts/step_authorize.js"></script>
37+
<script src="scripts/step_embed.js"></script>
38+
<script src="scripts/step_interact.js"></script>
39+
</body>
40+
</html>

‎demo/code-demo/report.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<div>
3+
<div id="steps-nav-bar">
4+
<div class="main-title">Report Embed</div>
5+
<div id="steps-ul-dev">
6+
<ul id="steps-ul" class="steps-ul">
7+
<li id="steps-auth" class="steps-li-active" onclick="OpenAuthStep();"><a href="#">Authorize</a></li>
8+
<li id="steps-embed" onclick="OpenEmbedStepWithSample();"><a href="#">Embed</a></li>
9+
<li id="steps-interact" onclick="OpenInteractStep();"><a href="#">Interact</a></li>
10+
</ul>
11+
</div>
12+
</div>
13+
14+
<div id="embed-and-interact-panel">
15+
<div id="right-pane" class="halfWidth left">
16+
</div>
17+
18+
<div id="left-pane" class="halfWidth right">
19+
<div id="embedArea">
20+
<h3>Embedded Report Area</h3>
21+
<h5>The following div id is <b>reportContainer</b>. In code, we embed a report to it.</h5>
22+
<div id="reportContainer" style="width: 800px; height: 600px; background: #DDDDDD;"></div>
23+
</div>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<script>
29+
// Open Authorization Step after this page loads.
30+
OpenAuthStep();
31+
</script>

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

Lines changed: 273 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,273 @@
1+
/*
2+
This file contains the code samples which will appear live in the web-page.
3+
Each sample method name starts with _Report_ or _Page or _Embed depends on which section it appears.
4+
Please keep this.
5+
*/
6+
7+
// ---- Embed Code ----------------------------------------------------
8+
9+
function _Embed_BasicEmbed() {
10+
var txtAccessToken = $('#txtAccessToken').val();
11+
var txtEmbedUrl = $('#txtReportEmbed').val();
12+
var txtEmbedReportId = $('#txtEmbedReportId').val();
13+
14+
var embedConfiguration = {
15+
type: 'report',
16+
accessToken: txtAccessToken,
17+
embedUrl: txtEmbedUrl,
18+
id: txtEmbedReportId,
19+
settings: {
20+
filterPaneEnabled: true,
21+
navContentPaneEnabled: true
22+
}
23+
};
24+
25+
var reportContainer = document.getElementById('reportContainer');
26+
powerbi.embed(reportContainer, embedConfiguration);
27+
}
28+
29+
function _Embed_EmbedWithDefaultFilter() {
30+
var txtAccessToken = $('#txtAccessToken').val();
31+
var txtEmbedUrl = $('#txtReportEmbed').val();
32+
var txtEmbedReportId = $('#txtEmbedReportId').val();
33+
34+
const filter = {
35+
$schema: "http://powerbi.com/product/schema#basic",
36+
target: {
37+
table: "Store",
38+
column: "Chain"
39+
},
40+
operator: "In",
41+
values: ["Lindseys"]
42+
};
43+
44+
var embedConfiguration = {
45+
type: 'report',
46+
accessToken: txtAccessToken,
47+
embedUrl: txtEmbedUrl,
48+
id: txtEmbedReportId,
49+
settings: {
50+
filterPaneEnabled: false,
51+
navContentPaneEnabled: false
52+
},
53+
filters: [filter]
54+
};
55+
56+
var reportContainer = document.getElementById('reportContainer');
57+
powerbi.embed(reportContainer, embedConfiguration);
58+
}
59+
60+
// ---- Report Operations ----------------------------------------------------
61+
62+
function _Report_GetId() {
63+
report = powerbi.embeds[0];
64+
$('#result').html(report.getId());
65+
}
66+
67+
function _Report_UpdateSettings() {
68+
const newSettings = {
69+
navContentPaneEnabled: true,
70+
filterPaneEnabled: false
71+
};
72+
73+
report = powerbi.embeds[0];
74+
report.updateSettings(newSettings)
75+
.then(function (result) {
76+
$("#result").html(result);
77+
})
78+
.catch(function (error) {
79+
$("#result").html(error);
80+
});
81+
}
82+
83+
function _Report_GetPages() {
84+
report = powerbi.embeds[0];
85+
86+
report.getPages()
87+
.then(function (pages) {
88+
var result = "";
89+
var index = 1;
90+
pages.forEach(function(page) {
91+
result = result + index + ") " + page.name + "(displayName: " + page.displayName + ")" + "<br/>";
92+
index++;
93+
});
94+
95+
$("#result").html("Done. <br/>" + result);
96+
})
97+
.catch(function (errors) {
98+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
99+
});
100+
}
101+
102+
function _Report_SetPage() {
103+
report = powerbi.embeds[0];
104+
report.setPage("ReportSection2")
105+
.then(function (result) {
106+
$("#result").html("Done. <br/>" + JSON.stringify(result));
107+
})
108+
.catch(function (errors) {
109+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
110+
});
111+
}
112+
113+
function _Report_GetFilters() {
114+
report = powerbi.embeds[0];
115+
116+
report.getFilters()
117+
.then(function (filters) {
118+
$("#result").html("Done. <br/>" + JSON.stringify(filters, null, " "));
119+
})
120+
.catch(function (errors) {
121+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
122+
});
123+
}
124+
125+
function _Report_SetFilters() {
126+
const filter = {
127+
$schema: "http://powerbi.com/product/schema#basic",
128+
target: {
129+
table: "Store",
130+
column: "Chain"
131+
},
132+
operator: "In",
133+
values: ["Lindseys"]
134+
};
135+
136+
report = powerbi.embeds[0];
137+
report.setFilters([filter])
138+
.then(function (result) {
139+
$("#result").html("Done. <br/>" + JSON.stringify(result));
140+
})
141+
.catch(function (errors) {
142+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
143+
});
144+
}
145+
146+
function _Report_RemoveFilters() {
147+
report = powerbi.embeds[0];
148+
report.removeFilters()
149+
.then(function (result) {
150+
$("#result").html("Done. <br/>" + JSON.stringify(result));
151+
})
152+
.catch(function (errors) {
153+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
154+
});
155+
}
156+
157+
function _Report_PrintCurrentReport() {
158+
report = powerbi.embeds[0];
159+
report.print()
160+
.then(function (result) {
161+
$("#result").html("Done. <br/>" + JSON.stringify(result));
162+
})
163+
.catch(function (errors) {
164+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
165+
});
166+
}
167+
168+
function _Report_Reload() {
169+
report = powerbi.embeds[0];
170+
report.reload()
171+
.then(function (result) {
172+
$("#result").html("Done. <br/>" + JSON.stringify(result));
173+
})
174+
.catch(function (errors) {
175+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
176+
});
177+
}
178+
179+
function _Report_FullScreen() {
180+
report = powerbi.embeds[0];
181+
report.fullscreen();
182+
183+
$("#result").html("Done!");
184+
}
185+
186+
function _Report_ExitFullScreen() {
187+
report = powerbi.embeds[0];
188+
report.exitFullscreen();
189+
190+
$("#result").html("Done!");
191+
}
192+
193+
// ---- Page Operations ----------------------------------------------------
194+
195+
function _Page_SetActive() {
196+
report = powerbi.embeds[0];
197+
198+
// Set the second page active
199+
report.getPages()
200+
.then(function (pages) {
201+
pages[1].setActive().then(function (result) {
202+
$("#result").html("Done. <br/>" + result)
203+
});
204+
})
205+
.catch(function (errors) {
206+
$("#result").html("getPages Error. " + errors);
207+
});
208+
}
209+
210+
function _Page_GetFilters() {
211+
report = powerbi.embeds[0];
212+
213+
// Get Filters of first page
214+
report.getPages()
215+
.then(function (pages) {
216+
pages[1].getFilters()
217+
.then(function (filters) {
218+
$("#result").html("Done. <br/>" + JSON.stringify(filters, null, " "))
219+
})
220+
.catch(function (errors) {
221+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
222+
});
223+
})
224+
.catch(function (errors) {
225+
$("#result").html("getPages Error. " + errors);
226+
});
227+
}
228+
229+
function _Page_SetFilters() {
230+
const filter = {
231+
$schema: "http://powerbi.com/product/schema#basic",
232+
target: {
233+
table: "Store",
234+
column: "Chain"
235+
},
236+
operator: "In",
237+
values: ["Lindseys"]
238+
};
239+
240+
report = powerbi.embeds[0];
241+
report.getPages()
242+
.then(function (pages) {
243+
pages[1].setFilters([filter])
244+
.then(function (result) {
245+
$("#result").html("Done. <br/>" + JSON.stringify(result));
246+
})
247+
.catch(function (errors) {
248+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
249+
});
250+
})
251+
.catch(function (errors) {
252+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
253+
});
254+
}
255+
256+
function _Page_RemoveFilters() {
257+
report = powerbi.embeds[0];
258+
259+
// Get Filters of first page
260+
report.getPages()
261+
.then(function (pages) {
262+
pages[1].removeFilters()
263+
.then(function (result) {
264+
$("#result").html("Done. <br/>" + JSON.stringify(result));
265+
})
266+
.catch(function (errors) {
267+
$("#result").html("Error. <br/>" + JSON.stringify(errors));
268+
});
269+
})
270+
.catch(function (errors) {
271+
$("#result").html("getPages Error. " + errors);
272+
});
273+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
$(function() {
2+
// Open Report Sample.
3+
$("#mainContent").load("report.html");
4+
});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const active_class = 'steps-li-active';
2+
3+
function OpenAuthStep() {
4+
$("#right-pane").load("step_authorize.html");
5+
6+
$("#steps-auth").addClass(active_class);
7+
$('#steps-embed').removeClass(active_class);
8+
$('#steps-interact').removeClass(active_class);
9+
10+
// Hide Embed view in authorization step.
11+
$("#embedArea").hide();
12+
}
13+
14+
function OpenEmbedStep() {
15+
$("#right-pane").load("step_embed.html");
16+
17+
$("#steps-auth").removeClass(active_class);
18+
$('#steps-embed').addClass(active_class);
19+
$('#steps-interact').removeClass(active_class);
20+
21+
// Show Embed view in Embed step.
22+
$("#embedArea").show();
23+
}
24+
25+
function OpenInteractStep() {
26+
$("#right-pane").load("step_interact.html");
27+
28+
$("#steps-auth").removeClass(active_class);
29+
$('#steps-embed').removeClass(active_class);
30+
$('#steps-interact').addClass(active_class);
31+
32+
// Show Embed view in Interact step.
33+
$("#embedArea").show();
34+
}

0 commit comments

Comments
 (0)