Skip to content

Commit 489f5cd

Browse files
mattmazzolamattmazzola
committed
Add demo application with automatic deployment via gulp ghpage task.
1 parent 93c21fb commit 489f5cd

File tree

7 files changed

+414
-1
lines changed

7 files changed

+414
-1
lines changed

‎.publish

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Subproject commit cd5c0897ce89b19b4079ef8209f53ada160a02a4

‎demo/app/app.js

+270
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
$(function () {
2+
3+
var $staticReport = $('#reportstatic');
4+
var $reportsList = $('#reportslist');
5+
var $dynamicReport = $('#reportdynamic');
6+
var $customPageNavReport = $('#reportcustompagenav');
7+
var customPageNavReport;
8+
var customPageNavReportPages;
9+
var $reportPagesList = $('#reportpagesbuttons');
10+
var $resetButton = $('#resetButton');
11+
var $prevButton = $('#prevbutton');
12+
var $nextButton = $('#nextbutton');
13+
var $cycleButton = $('#cyclebutton');
14+
var cycleIntervalId;
15+
var apiBaseUrl = 'http://powerbipaasapi.azurewebsites.net/api/reports';
16+
17+
var localReportOverride = {
18+
embedUrl: 'https://portal.analysis.windows-int.net/appTokenReportEmbed',
19+
id: 'c4d31ef0-7b34-4d80-9bcb-5974d1405572',
20+
accessToken: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ2ZXIiOiIwLjEuMCIsImF1ZCI6Imh0dHBzOi8vYW5hbHlzaXMud2luZG93cy5uZXQvcG93ZXJiaS9hcGkiLCJpc3MiOiJQb3dlckJJU0RLIiwidHlwZSI6ImVtYmVkIiwid2NuIjoiV2FsbGFjZSIsIndpZCI6IjUyMWNkYTJhLTRlZDItNDg5Ni1hYzA0LWM5YzM4MWRjMjUyYSIsInJpZCI6ImM0ZDMxZWYwLTdiMzQtNGQ4MC05YmNiLTU5NzRkMTQwNTU3MiIsIm5iZiI6MTQ2ODAxNTg5NSwiZXhwIjoxNDY4MDE5NDk1fQ.exh-qIpdEoa5lLxJleyGFli8ZvdNNyiDjVyHl9XBAiA'
21+
};
22+
23+
/**
24+
* Basic Embed
25+
*/
26+
var staticReportId = '5dac7a4a-4452-46b3-99f6-a25915e0fe55';
27+
var staticReportUrl = apiBaseUrl + '/' + staticReportId;
28+
29+
fetch(staticReportUrl)
30+
.then(function (response) {
31+
return response.json();
32+
})
33+
.then(function (report) {
34+
var reportConfig = $.extend({
35+
type: 'report',
36+
settings: {
37+
filterPaneEnabled: false,
38+
navContentPaneEnabled: false
39+
}
40+
}, report, localReportOverride);
41+
var staticReport = powerbi.embed($staticReport.get(0), reportConfig);
42+
43+
staticReport.on('loaded', function (event) {
44+
console.log('static report loaded');
45+
});
46+
staticReport.on('error', function (event) {
47+
console.log('static report error');
48+
});
49+
50+
var customPageNavConfig = $.extend({}, reportConfig, {
51+
settings: {
52+
filterPaneEnabled: false,
53+
navContentPaneEnabled: true
54+
}
55+
});
56+
57+
customPageNavReport = powerbi.embed($customPageNavReport.get(0), customPageNavConfig);
58+
customPageNavReport.on('loaded', function (event) {
59+
console.log('custom page nav report loaded');
60+
customPageNavReport.getPages()
61+
.then(pages => {
62+
console.log('pages: ', pages);
63+
if(pages.length > 0) {
64+
customPageNavReportPages = pages;
65+
const firstPage = customPageNavReportPages[0];
66+
firstPage.isActive = true;
67+
68+
pages
69+
.map(function (page) {
70+
return generateReportPage(page);
71+
})
72+
.forEach(function (element) {
73+
$reportPagesList.append(element);
74+
});
75+
}
76+
});
77+
});
78+
customPageNavReport.on('error', function (event) {
79+
console.log('customPageNavReport error', event);
80+
});
81+
82+
customPageNavReport.on('pageChanged', function (event) {
83+
console.log('pageChanged event received', event);
84+
updateActivePage(event.detail.newPage);
85+
});
86+
});
87+
88+
function updateActivePage(newPage) {
89+
// Remove active class
90+
var reportButtons = $reportPagesList.children('button');
91+
92+
reportButtons
93+
.each(function (index, element) {
94+
var $element = $(element);
95+
var buttonPage = $element.data('page');
96+
if(buttonPage.isActive) {
97+
buttonPage.isActive = false;
98+
$element.removeClass('active');
99+
}
100+
});
101+
102+
// Set active class
103+
reportButtons
104+
.each(function (index, element) {
105+
var $element = $(element);
106+
var buttonPage = $element.data('page');
107+
if(buttonPage.name === newPage.name) {
108+
buttonPage.isActive = true;
109+
$element.addClass('active');
110+
}
111+
});
112+
}
113+
114+
function changePage(forwards) {
115+
// Remove active class
116+
var reportButtons = $reportPagesList.children('button');
117+
var $activeButtonIndex = -1;
118+
119+
reportButtons
120+
.each(function (index, element) {
121+
var $element = $(element);
122+
var buttonPage = $element.data('page');
123+
if(buttonPage.isActive) {
124+
$activeButtonIndex = index;
125+
}
126+
});
127+
128+
if(forwards) {
129+
$activeButtonIndex += 1;
130+
}
131+
else {
132+
$activeButtonIndex -= 1;
133+
}
134+
135+
if($activeButtonIndex > reportButtons.length - 1) {
136+
$activeButtonIndex = 0;
137+
}
138+
if($activeButtonIndex < 0) {
139+
$activeButtonIndex = reportButtons.length - 1;
140+
}
141+
142+
reportButtons
143+
.each(function (index, element) {
144+
if($activeButtonIndex === index) {
145+
var $element = $(element);
146+
var buttonPage = $element.data('page');
147+
148+
customPageNavReport.setPage(buttonPage.name);
149+
}
150+
});
151+
}
152+
153+
/**
154+
* Dynamic Embed
155+
*/
156+
function generateReportListItem(report) {
157+
var button = $('<button>')
158+
.attr({
159+
type: 'button'
160+
})
161+
.addClass('btn btn-success')
162+
.data('report', report)
163+
.text('Embed!');
164+
165+
var reportName = $('<span />')
166+
.addClass('report-name')
167+
.text(report.name)
168+
169+
var element = $('<li>')
170+
.append(reportName)
171+
.append(button);
172+
173+
return element;
174+
}
175+
176+
function generateReportPage(page) {
177+
var $page = $('<button>')
178+
.attr({
179+
type: 'button'
180+
})
181+
.addClass('btn btn-success')
182+
.data('page', page)
183+
.text(page.displayName);
184+
185+
if(page.isActive) {
186+
$page.addClass('active');
187+
}
188+
189+
return $page;
190+
}
191+
192+
var allReportsUrl = apiBaseUrl;
193+
fetch(allReportsUrl)
194+
.then(function (response) {
195+
return response.json();
196+
})
197+
.then(function (reports) {
198+
reports
199+
.map(generateReportListItem)
200+
.forEach(function (element) {
201+
$reportsList.append(element);
202+
});
203+
});
204+
205+
// When report button is clicked embed the report
206+
$reportsList.on('click', 'button', function (event) {
207+
var button = event.target;
208+
var report = $(button).data('report');
209+
var url = apiBaseUrl + '/' + report.id;
210+
211+
fetch(url)
212+
.then(function (response) {
213+
return response.json();
214+
})
215+
.then(function (reportWithToken) {
216+
var reportConfig = $.extend({
217+
type: 'report',
218+
settings: {
219+
filterPaneEnabled: false,
220+
navContentPaneEnabled: false
221+
}
222+
}, reportWithToken, localReportOverride);
223+
224+
powerbi.embed($dynamicReport.get(0), reportConfig);
225+
});
226+
});
227+
228+
$prevButton.on('click', function (event) {
229+
changePage(false);
230+
});
231+
232+
$nextButton.on('click', function (event) {
233+
changePage(true);
234+
});
235+
236+
$cycleButton.on('click', function (event) {
237+
$cycleButton.toggleClass('active');
238+
$cycleButton.data('cycle', !$cycleButton.data('cycle'));
239+
240+
if($cycleButton.data('cycle')) {
241+
cycleIntervalId = setInterval(function () {
242+
console.log('cycle page: ');
243+
changePage(true);
244+
}, 1000);
245+
}
246+
else {
247+
clearInterval(cycleIntervalId);
248+
}
249+
});
250+
251+
$resetButton.on('click', function (event) {
252+
powerbi.reset($dynamicReport.get(0));
253+
});
254+
255+
256+
/**
257+
* Custom Page Navigation
258+
*/
259+
$reportPagesList.on('click', 'button', function (event) {
260+
var button = event.target;
261+
var report = $(button).data('report');
262+
var page = $(button).data('page');
263+
264+
console.log('Attempting to set page to: ', page.name);
265+
customPageNavReport.setPage(page.name)
266+
.then(function (response) {
267+
console.log('Page changed request accepted');
268+
});
269+
});
270+
});

‎demo/bower.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "powerbi-client-demo",
3+
"homepage": "https://github.com/Microsoft/PowerBI-JavaScript",
4+
"authors": [
5+
"Microsoft Power BI Team"
6+
],
7+
"description": "Demonstration of embedding powerbi using core library.",
8+
"main": "",
9+
"license": "MIT",
10+
"private": true,
11+
"ignore": [
12+
"**/.*",
13+
"node_modules",
14+
"bower_components",
15+
"test",
16+
"tests"
17+
],
18+
"dependencies": {
19+
"fetch": "^1.0.0",
20+
"es6-promise": "^3.2.2",
21+
"bootstrap": "^3.3.6",
22+
"jquery": "^3.1.0",
23+
"powerbi-client": "^1.1.1"
24+
},
25+
"devDependencies": {}
26+
}

‎demo/index.html

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
<meta http-equiv="x-ua-compatible" content="ie=edge">
7+
<title>Power BI - Sample - Client - JavaScript</title>
8+
<base path="/" />
9+
10+
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
11+
<link rel="stylesheet" href="styles/app.css" />
12+
</head>
13+
<body>
14+
<div class="container">
15+
<h1>Power BI - Sample - Client - Javascript</h1>
16+
<p>Demonstrate how to consume Power BI API and render using core library. <a href="https://github.com/microsoft/PowerBI-JavaScript" target="_blank">PowerBI-JavaScript</a></p>
17+
18+
<h2>Static Embed</h2>
19+
<p>Report to embed is known by the developer.</p>
20+
21+
<div id="reportstatic" class="powerbi-container"></div>
22+
23+
<h2>Dynamic Embed</h2>
24+
<p>Report to embed is chosen by the user.</p>
25+
<ol id="reportslist">
26+
</ol>
27+
<p class="text-right">
28+
<button type="button" id="resetButton" class="btn btn-danger">Reset</button>
29+
</p>
30+
31+
<div id="reportdynamic" class="powerbi-container"></div>
32+
33+
<h2>Custom Page Navigation</h2>
34+
<p>Page navigation is hidden in the embedded report and recreated by developer to allow custom branding or even automation to tell stories and navigate user.</p>
35+
36+
<div id="reportcustompagenav" class="powerbi-container"></div>
37+
38+
<div class="reportpageslist">
39+
<button type="button" id="prevbutton" class="reportpageslist__previous btn btn-primary">&lt; Prev</button>
40+
<div id="reportpagesbuttons" class="reportpageslist__pages">
41+
</div>
42+
<button type="button" id="cyclebutton" class="reportpageslist__cycle btn btn-warning">Cycle</button>
43+
<button type="button" id="nextbutton" class="reportpageslist__next btn btn-primary">Next &gt;</button>
44+
</div>
45+
46+
<h2>Custom Filter Pane</h2>
47+
<p></p>
48+
</div>
49+
50+
<script src="bower_components/jquery/dist/jquery.js"></script>
51+
<script src="bower_components/es6-promise/es6-promise.js"></script>
52+
<script src="bower_components/fetch/fetch.js"></script>
53+
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
54+
55+
<script src="app/app.js"></script>
56+
</body>
57+
</html>

0 commit comments

Comments
 (0)