Rewrite demo application to be split each scenario to separate file to match how the angular and ember demos work. This improves load times and allows easier linking.
This commit is contained in:
Matt Mazzola
Родитель
a43d98a0bd
Коммит
e58b2e9e7d
767
demo/app/app.js
767
demo/app/app.js
|
|
@ -1,767 +0,0 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
// Other
|
||||
var apiBaseUrl = 'https://powerbiembedapi.azurewebsites.net/api';
|
||||
var allReportsUrl = apiBaseUrl + '/reports';
|
||||
var staticReportId = 'c52af8ab-0468-4165-92af-dc39858d66ad';
|
||||
var staticReportUrl = allReportsUrl + '/' + staticReportId;
|
||||
var edogReportUrl = apiBaseUrl + '/dxt/reports/c4d31ef0-7b34-4d80-9bcb-5974d1405572';
|
||||
|
||||
// Scenario 1: Static Embed
|
||||
var $staticReportContainer = $('#reportstatic');
|
||||
|
||||
// Scenario 2: Dynamic Embed
|
||||
var $reportsList = $('#reportslist');
|
||||
var $dynamicReportContainer = $('#reportdynamic');
|
||||
|
||||
// Scenario 3: Custom Page Navigation
|
||||
var $customPageNavContainer = $('#reportcustompagenav');
|
||||
var customPageNavReport;
|
||||
var $reportPagesList = $('#reportpagesbuttons');
|
||||
|
||||
// Scenario 4: Custom Filter Pane
|
||||
var $customFilterPaneContainer = $('#reportcustomfilter');
|
||||
var customFilterPaneReport;
|
||||
var customFilterPaneReportPages;
|
||||
|
||||
// Scenario 5: Default Page and/or Filter
|
||||
var $defaultPageReportContainer = $('#reportdefaults');
|
||||
var defaultPageReport;
|
||||
var defaultPageName = 'ReportSection2';
|
||||
var defaultFilter = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "Or", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Wash"
|
||||
},
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Park"
|
||||
}
|
||||
]);
|
||||
|
||||
// Scenario 6: Update settings
|
||||
var $updateSettingsReport = $('#updatesettingsreport');
|
||||
var updateSettingsReport;
|
||||
var updateSettingsReportFilterPaneEnabled = false;
|
||||
var updateSettingsReprotNavContentPaneEnabled = false;
|
||||
var $toggleFilterPaneButton = $('#toggleFilterPane');
|
||||
var $toggleNavContentPaneButton = $('#toggleNavContentPane');
|
||||
|
||||
$toggleFilterPaneButton.on('click', function () {
|
||||
updateSettingsReportFilterPaneEnabled = !updateSettingsReportFilterPaneEnabled;
|
||||
updateSettingsReport.updateSettings({
|
||||
filterPaneEnabled: updateSettingsReportFilterPaneEnabled
|
||||
});
|
||||
});
|
||||
|
||||
$toggleNavContentPaneButton.on('click', function () {
|
||||
updateSettingsReprotNavContentPaneEnabled = !updateSettingsReprotNavContentPaneEnabled;
|
||||
updateSettingsReport.updateSettings({
|
||||
navContentPaneEnabled: updateSettingsReprotNavContentPaneEnabled
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Load
|
||||
*/
|
||||
fetch(staticReportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (report) {
|
||||
/**
|
||||
* Basic Embed
|
||||
*/
|
||||
var reportConfig = $.extend({
|
||||
settings: {
|
||||
filterPaneEnabled: false,
|
||||
navContentPaneEnabled: false
|
||||
}
|
||||
}, report);
|
||||
var staticReport = powerbi.embed($staticReportContainer.get(0), reportConfig);
|
||||
|
||||
/**
|
||||
* Default Page Report
|
||||
*/
|
||||
var defaultPageConfig = $.extend({}, reportConfig, {
|
||||
pageName: defaultPageName,
|
||||
filter: defaultFilter.toJSON(),
|
||||
settings: {
|
||||
filterPaneEnabled: true,
|
||||
navContentPaneEnabled: true
|
||||
}
|
||||
});
|
||||
|
||||
var defaultPageReport = powerbi.embed($defaultPageReportContainer.get(0), defaultPageConfig);
|
||||
|
||||
/**
|
||||
* Custom Page Navigation Embed
|
||||
*/
|
||||
var customPageNavConfig = $.extend({}, reportConfig, {
|
||||
settings: {
|
||||
filterPaneEnabled: false,
|
||||
navContentPaneEnabled: false
|
||||
}
|
||||
});
|
||||
|
||||
customPageNavReport = powerbi.embed($customPageNavContainer.get(0), customPageNavConfig);
|
||||
|
||||
customPageNavReport.on('loaded', function (event) {
|
||||
console.log('custom page nav report loaded');
|
||||
customPageNavReport.getPages()
|
||||
.then(function (pages) {
|
||||
console.log('pages: ', pages);
|
||||
if (pages.length > 0) {
|
||||
const firstPage = pages[0];
|
||||
firstPage.isActive = true;
|
||||
|
||||
pages
|
||||
.map(function (page) {
|
||||
return generateReportPage(page);
|
||||
})
|
||||
.forEach(function (element) {
|
||||
$reportPagesList.append(element);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
customPageNavReport.on('error', function (event) {
|
||||
console.log('customPageNavReport error', event);
|
||||
});
|
||||
|
||||
customPageNavReport.on('pageChanged', function (event) {
|
||||
console.log('pageChanged event received', event);
|
||||
updateActivePage(event.detail.newPage);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
fetch(edogReportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (report) {
|
||||
/**
|
||||
* Custom Filter Pane
|
||||
*/
|
||||
var customFilterPaneConfig = $.extend({}, report, {
|
||||
settings: {
|
||||
filterPaneEnabled: false,
|
||||
navContentPaneEnabled: true
|
||||
}
|
||||
});
|
||||
|
||||
customFilterPaneReport = powerbi.embed($customFilterPaneContainer.get(0), customFilterPaneConfig);
|
||||
|
||||
customFilterPaneReport.on('loaded', function (event) {
|
||||
createAppliedFiltersPane(null, customFilterPaneReport);
|
||||
|
||||
console.log('custom filter pane report loaded');
|
||||
customFilterPaneReport.getPages()
|
||||
.then(function (pages) {
|
||||
customFilterPaneReportPages = pages;
|
||||
var $pagesSelect = $('#filtertargetpage');
|
||||
var $removeFiltersPagesList = $('#removeFiltersPagesList');
|
||||
|
||||
pages
|
||||
.forEach(function (page) {
|
||||
var $pageOption = $('<option>')
|
||||
.val(page.name)
|
||||
.text(page.displayName)
|
||||
.data(page);
|
||||
|
||||
var $pageOption1 = $('<option>')
|
||||
.val(page.name)
|
||||
.text(page.displayName)
|
||||
.data(page);
|
||||
|
||||
$removeFiltersPagesList.append($pageOption);
|
||||
$pagesSelect.append($pageOption1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Update Settings
|
||||
*/
|
||||
var updateSettingsEmbedConfig = $.extend({}, report, {
|
||||
settings: {
|
||||
filterPaneEnabled: updateSettingsReportFilterPaneEnabled,
|
||||
navContentPaneEnabled: updateSettingsReprotNavContentPaneEnabled
|
||||
}
|
||||
});
|
||||
|
||||
updateSettingsReport = powerbi.embed($updateSettingsReport.get(0), updateSettingsEmbedConfig);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
fetch(allReportsUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (reports) {
|
||||
reports
|
||||
.map(generateReportListItem)
|
||||
.forEach(function (element) {
|
||||
$reportsList.append(element);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function updateActivePage(newPage) {
|
||||
// Remove active class
|
||||
var reportButtons = $reportPagesList.children('button');
|
||||
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
if (buttonPage.isActive) {
|
||||
buttonPage.isActive = false;
|
||||
$element.removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Set active class
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
if (buttonPage.name === newPage.name) {
|
||||
buttonPage.isActive = true;
|
||||
$element.addClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function generateReportListItem(report) {
|
||||
var button = $('<button>')
|
||||
.attr({
|
||||
type: 'button'
|
||||
})
|
||||
.addClass('btn btn-success')
|
||||
.data('report', report)
|
||||
.text('Embed!');
|
||||
|
||||
var reportName = $('<span />')
|
||||
.addClass('report-name')
|
||||
.text(report.name)
|
||||
|
||||
var element = $('<li>')
|
||||
.append(reportName)
|
||||
.append(button);
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
function generateReportPage(page) {
|
||||
var $page = $('<button>')
|
||||
.attr({
|
||||
type: 'button'
|
||||
})
|
||||
.addClass('btn btn-success')
|
||||
.data('page', page)
|
||||
.text(page.displayName);
|
||||
|
||||
if (page.isActive) {
|
||||
$page.addClass('active');
|
||||
}
|
||||
|
||||
return $page;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom Page Navigation Logic
|
||||
*/
|
||||
(function () {
|
||||
var $resetButton = $('#resetButton');
|
||||
var $prevButton = $('#prevbutton');
|
||||
var $nextButton = $('#nextbutton');
|
||||
var $cycleButton = $('#cyclebutton');
|
||||
var cycleIntervalId;
|
||||
|
||||
// When report button is clicked embed the report
|
||||
$reportsList.on('click', 'button', function (event) {
|
||||
var button = event.target;
|
||||
var report = $(button).data('report');
|
||||
var url = allReportsUrl + '/' + report.id;
|
||||
|
||||
fetch(url)
|
||||
.then(function (response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function (reportWithToken) {
|
||||
var reportConfig = $.extend({
|
||||
type: 'report',
|
||||
settings: {
|
||||
filterPaneEnabled: false,
|
||||
navContentPaneEnabled: false
|
||||
}
|
||||
}, reportWithToken);
|
||||
|
||||
powerbi.embed($dynamicReportContainer.get(0), reportConfig);
|
||||
});
|
||||
});
|
||||
|
||||
$prevButton.on('click', function (event) {
|
||||
changePage(false);
|
||||
});
|
||||
|
||||
$nextButton.on('click', function (event) {
|
||||
changePage(true);
|
||||
});
|
||||
|
||||
$cycleButton.on('click', function (event) {
|
||||
$cycleButton.toggleClass('active');
|
||||
$cycleButton.data('cycle', !$cycleButton.data('cycle'));
|
||||
|
||||
if ($cycleButton.data('cycle')) {
|
||||
cycleIntervalId = setInterval(function () {
|
||||
console.log('cycle page: ');
|
||||
changePage(true);
|
||||
}, 1000);
|
||||
}
|
||||
else {
|
||||
clearInterval(cycleIntervalId);
|
||||
}
|
||||
});
|
||||
|
||||
$resetButton.on('click', function (event) {
|
||||
powerbi.reset($dynamicReportContainer.get(0));
|
||||
});
|
||||
|
||||
$reportPagesList.on('click', 'button', function (event) {
|
||||
var button = event.target;
|
||||
var report = $(button).data('report');
|
||||
var page = $(button).data('page');
|
||||
|
||||
console.log('Attempting to set page to: ', page.name);
|
||||
customPageNavReport.setPage(page.name)
|
||||
.then(function (response) {
|
||||
console.log('Page changed request accepted');
|
||||
});
|
||||
});
|
||||
|
||||
function changePage(forwards) {
|
||||
// Remove active class
|
||||
var reportButtons = $reportPagesList.children('button');
|
||||
var $activeButtonIndex = -1;
|
||||
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
if (buttonPage.isActive) {
|
||||
$activeButtonIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (forwards) {
|
||||
$activeButtonIndex += 1;
|
||||
}
|
||||
else {
|
||||
$activeButtonIndex -= 1;
|
||||
}
|
||||
|
||||
if ($activeButtonIndex > reportButtons.length - 1) {
|
||||
$activeButtonIndex = 0;
|
||||
}
|
||||
if ($activeButtonIndex < 0) {
|
||||
$activeButtonIndex = reportButtons.length - 1;
|
||||
}
|
||||
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
if ($activeButtonIndex === index) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
|
||||
customPageNavReport.setPage(buttonPage.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
|
||||
/**
|
||||
* Custom Filter Pane
|
||||
*/
|
||||
(function () {
|
||||
var $customFilterForm = $('#customfilterform');
|
||||
var $filterType = $('#filtertype');
|
||||
var $typeFields = $('.filter-type');
|
||||
var $operatorTypeFields = $('input[type=radio][name=operatorType]');
|
||||
var $operatorFields = $('.filter-operators');
|
||||
var $targetTypeFields = $('input[type=radio][name=filterTarget]');
|
||||
var $targetFields = $('.filter-target');
|
||||
|
||||
var $predefinedFilter1 = $('#predefinedFilter1');
|
||||
var predefinedFilter1 = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "And", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Direct"
|
||||
}
|
||||
]);
|
||||
|
||||
var $predefinedFilter2 = $('#predefinedFilter2');
|
||||
var predefinedFilter2 = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "Or", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Wash"
|
||||
},
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Park"
|
||||
}
|
||||
]);
|
||||
|
||||
var $predefinedFilter3 = $('#predefinedFilter3');
|
||||
var predefinedFilter3 = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "Or", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Wash"
|
||||
},
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Park"
|
||||
}
|
||||
]);
|
||||
|
||||
$customFilterForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
console.log('submit');
|
||||
|
||||
var data = {
|
||||
target: getFilterTypeTarget(),
|
||||
operator: getFilterOperatorAndValues(),
|
||||
reportTarget: getReportTarget()
|
||||
};
|
||||
|
||||
var filter;
|
||||
var values = Array.prototype.slice.call(data.operator.values);
|
||||
|
||||
if (data.operator.type === "basic") {
|
||||
filter = new models.BasicFilter(data.target, data.operator.operator, values);
|
||||
}
|
||||
else if (data.operator.type === "advanced") {
|
||||
filter = new models.AdvancedFilter(data.target, data.operator.operator, values);
|
||||
}
|
||||
|
||||
var filterTargetLevel = customFilterPaneReport;
|
||||
if (data.reportTarget.type === "page") {
|
||||
filterTargetLevel = customFilterPaneReport.page(data.reportTarget.name);
|
||||
}
|
||||
else if (data.reportTarget.type === "visual") {
|
||||
// Need to finalize how visuals report whichp age they are on in order to construct correct page object.
|
||||
filterTargetLevel = customFilterPaneReport.page('ReportSection1').visual(data.reportTarget.name);
|
||||
}
|
||||
|
||||
var filterJson = filter.toJSON();
|
||||
filterTargetLevel.setFilters([filterJson]);
|
||||
});
|
||||
|
||||
$filterType.on('change', function (event) {
|
||||
console.log('change');
|
||||
var value = $filterType.val().toLowerCase();
|
||||
updateFieldsForType(value);
|
||||
});
|
||||
|
||||
$operatorTypeFields.on('change', function (event) {
|
||||
var checkedType = $('#customfilterform input[name=operatorType]:checked').val();
|
||||
console.log('operator change', checkedType);
|
||||
|
||||
updateFieldsForOperator(checkedType.toLowerCase());
|
||||
});
|
||||
|
||||
$targetTypeFields.on('change', function (event) {
|
||||
var checkedTarget = $('#customfilterform input[name=filterTarget]:checked').val();
|
||||
console.log('target change', checkedTarget);
|
||||
|
||||
updateTargetFields(checkedTarget.toLowerCase());
|
||||
});
|
||||
|
||||
$predefinedFilter1.on('click', function (event) {
|
||||
var filter = predefinedFilter1.toJSON();
|
||||
customFilterPaneReport.setFilters([filter]);
|
||||
|
||||
var $filtersSelection = $('.filters');
|
||||
$.each($filtersSelection, (index, filtersElement) => {
|
||||
var $filters = $(filtersElement);
|
||||
var filterable = $filters.data('filterable');
|
||||
|
||||
if (customFilterPaneReport === filterable) {
|
||||
$filters.empty()
|
||||
var $filter = generateFilterElement(filter);
|
||||
$filters.append($filter);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$predefinedFilter2.on('click', function (event) {
|
||||
customFilterPaneReport.setFilters([predefinedFilter1.toJSON()]);
|
||||
});
|
||||
|
||||
$predefinedFilter3.on('click', function (event) {
|
||||
customFilterPaneReport.page('ReportSection2').setFilters([predefinedFilter3.toJSON()]);
|
||||
});
|
||||
|
||||
function getFilterTypeTarget() {
|
||||
var filterType = $filterType.val().toLowerCase();
|
||||
var filterTypeTarget = {};
|
||||
filterTypeTarget.table = $('#filtertable').val();
|
||||
|
||||
if (filterType === "column") {
|
||||
filterTypeTarget.column = $('#filtercolumn').val();
|
||||
}
|
||||
else if (filterType === "hierarchy") {
|
||||
filterTypeTarget.hierarchy = $('#filterhierarchy').val();
|
||||
filterTypeTarget.hierarchyLevel = $('#filterhierarchylevel').val();
|
||||
}
|
||||
else if (filterType === "measure") {
|
||||
filterTypeTarget.measure = $('#filtermeasure').val();
|
||||
}
|
||||
|
||||
return filterTypeTarget;
|
||||
}
|
||||
|
||||
function getFilterOperatorAndValues() {
|
||||
var operatorType = $('#customfilterform input[name=operatorType]:checked').val();
|
||||
var operatorAndValues = {
|
||||
type: operatorType
|
||||
};
|
||||
|
||||
if (operatorType === "basic") {
|
||||
operatorAndValues.operator = $('#filterbasicoperator').val();
|
||||
operatorAndValues.values = $('.basic-value').map(function (index, element) {
|
||||
return $(element).val();
|
||||
});
|
||||
}
|
||||
else if (operatorType === "advanced") {
|
||||
operatorAndValues.operator = $('#filterlogicaloperator').val();
|
||||
operatorAndValues.values = $('.advanced-value')
|
||||
.map(function (index, element) {
|
||||
return {
|
||||
value: $(element).find('.advanced-value-input').val(),
|
||||
operator: $(element).find('.advanced-logical-condition').val()
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return operatorAndValues;
|
||||
}
|
||||
|
||||
function getReportTarget() {
|
||||
var checkedTarget = $('#customfilterform input[name=filterTarget]:checked').val();
|
||||
var target = {
|
||||
type: checkedTarget
|
||||
};
|
||||
|
||||
if (checkedTarget === "page") {
|
||||
target.name = $('#filtertargetpage').val();
|
||||
}
|
||||
else if (checkedTarget === "visual") {
|
||||
target.id = undefined; // Need way to populate visual ids
|
||||
}
|
||||
|
||||
return target;
|
||||
}
|
||||
|
||||
function updateFieldsForType(type) {
|
||||
$typeFields.hide();
|
||||
$('.filter-type--' + type).show();
|
||||
}
|
||||
|
||||
function updateFieldsForOperator(type) {
|
||||
$operatorFields.hide();
|
||||
$('.filter-operators--' + type).show();
|
||||
}
|
||||
|
||||
function updateTargetFields(target) {
|
||||
$targetFields.hide();
|
||||
$('.filter-target--' + target).show();
|
||||
}
|
||||
|
||||
// Init
|
||||
updateFieldsForType("column");
|
||||
updateFieldsForOperator("basic");
|
||||
updateTargetFields("report");
|
||||
})();
|
||||
|
||||
function generateFilterElement(filter) {
|
||||
var $removeButton = $('<button>')
|
||||
.addClass('btn')
|
||||
.addClass('btn-danger')
|
||||
.addClass('filter__remove')
|
||||
.data('filter', filter)
|
||||
.html('×')
|
||||
;
|
||||
|
||||
var $filterText = $('<div>')
|
||||
.addClass('filter__text')
|
||||
.text(JSON.stringify(filter, null, ' '))
|
||||
;
|
||||
|
||||
var $filter = $('<div>')
|
||||
.addClass('filter')
|
||||
.append($removeButton)
|
||||
.append($filterText)
|
||||
;
|
||||
|
||||
return $filter;
|
||||
}
|
||||
|
||||
/**
|
||||
* Applied Filters Pane
|
||||
*/
|
||||
function createAppliedFiltersPane($element, report) {
|
||||
var $appliedFiltersContainer = $('#appliedFilters');
|
||||
var $reportFilters = $('#reportFilters');
|
||||
var $pageFilters = $('#pageFilters');
|
||||
var $refreshAppliedFilters = $('#refreshAppliedFilters');
|
||||
let reportPages;
|
||||
|
||||
var filtersTree = {
|
||||
filterable: report,
|
||||
filters: [],
|
||||
nodes: []
|
||||
};
|
||||
|
||||
|
||||
|
||||
function generatePageFiltersContainer(page) {
|
||||
var $heading = $('<h4>')
|
||||
.text(page.name)
|
||||
;
|
||||
|
||||
var $filters = $('<div>')
|
||||
.addClass('filters')
|
||||
.data('filterable', page)
|
||||
;
|
||||
|
||||
var $filtersContainer = $('<div>')
|
||||
.append($heading)
|
||||
.append($filters)
|
||||
;
|
||||
|
||||
return $filtersContainer;
|
||||
}
|
||||
|
||||
// Setup static report filterable on element;
|
||||
$reportFilters
|
||||
.data('filterable', report);
|
||||
|
||||
// Setup page filters containers which have filterable
|
||||
report.getPages()
|
||||
.then(pages => {
|
||||
reportPages = pages;
|
||||
|
||||
pages
|
||||
.map(generatePageFiltersContainer)
|
||||
.forEach($pageFiltersContainer => {
|
||||
$pageFilters.append($pageFiltersContainer)
|
||||
});
|
||||
});
|
||||
|
||||
$refreshAppliedFilters.on('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
const $filters = $('.filters');
|
||||
|
||||
$.each($filters, (index, element) => {
|
||||
const $element = $(element);
|
||||
const filterable = $element.data('filterable');
|
||||
|
||||
console.log($element, filterable);
|
||||
|
||||
filterable.getFilters()
|
||||
.then(filters => {
|
||||
console.log(filterable.displayName, filters);
|
||||
$element.empty();
|
||||
filters
|
||||
.map(generateFilterElement)
|
||||
.forEach($filter => {
|
||||
$element.append($filter);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$appliedFiltersContainer.on('click', 'button.filter__remove', function (event) {
|
||||
event.preventDefault();
|
||||
const $element = $(event.target);
|
||||
const filterToRemove = $element.data('filter');
|
||||
const $filter = $element.closest('.filter');
|
||||
const $filtersContainer = $element.closest('.filters');
|
||||
const filterable = $filtersContainer.data('filterable');
|
||||
|
||||
console.log('remove filter', $element, $filtersContainer, filterToRemove, filterable);
|
||||
|
||||
filterable.getFilters()
|
||||
.then(filters => {
|
||||
let index = -1;
|
||||
filters.some(function (filter, i) {
|
||||
if (JSON.stringify(filter) === JSON.stringify(filterToRemove)) {
|
||||
index = i;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
if (index !== -1) {
|
||||
filters.splice(index, 1);
|
||||
filterable.setFilters(filters);
|
||||
$filter.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove Filters Buttons
|
||||
*/
|
||||
(function () {
|
||||
var $removeFiltersReportForm = $('#removeFiltersReportForm');
|
||||
var $removeFiltersPageForm = $('#removeFiltersPageForm');
|
||||
var $removeFiltersVisualForm = $('#removeFiltersVisualForm');
|
||||
var $removeFiltersPagesList = $('#removeFiltersPagesList');
|
||||
var $removeFiltersVisualsList = $('#removeFiltersVisualsList');
|
||||
|
||||
$removeFiltersReportForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
console.log('submit removeFiltersReportForm');
|
||||
customFilterPaneReport.removeFilters();
|
||||
});
|
||||
|
||||
$removeFiltersPageForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var pageName = $removeFiltersPagesList.val();
|
||||
console.log('submit removeFiltersPageForm', pageName);
|
||||
customFilterPaneReport.page(pageName).removeFilters();
|
||||
});
|
||||
|
||||
$removeFiltersVisualForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var visualName = $removeFiltersVisualsList.val();
|
||||
console.log('submit removeFiltersVisualForm', visualName);
|
||||
customFilterPaneReport.page('ReportSection2').visual(visualName).removeFilters();
|
||||
});
|
||||
})();
|
||||
});
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
console.log('Scenario 5: Default Page and/or Filter');
|
||||
|
||||
var staticReportUrl = 'https://powerbiembedapi.azurewebsites.net/api/dxt/reports/c4d31ef0-7b34-4d80-9bcb-5974d1405572';
|
||||
var $defaultPageReportContainer = $('#reportdefaults');
|
||||
var defaultPageReport;
|
||||
var defaultPageName = 'ReportSection2';
|
||||
var defaultFilter = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "Or", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Wash"
|
||||
},
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Park"
|
||||
}
|
||||
]);
|
||||
|
||||
// Init
|
||||
fetch(staticReportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (embedConfig) {
|
||||
var defaultsEmbedConfig = $.extend({}, embedConfig, {
|
||||
pageName: defaultPageName,
|
||||
filter: defaultFilter.toJSON(),
|
||||
settings: {
|
||||
filterPaneEnabled: true,
|
||||
navContentPaneEnabled: true
|
||||
}
|
||||
});
|
||||
|
||||
defaultPageReport = powerbi.embed($defaultPageReportContainer.get(0), defaultsEmbedConfig);
|
||||
return defaultPageReport;
|
||||
});
|
||||
}
|
||||
else {
|
||||
return response.json()
|
||||
.then(error => {
|
||||
throw new Error(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
console.log('Scenario 2: Dynamic Embed');
|
||||
|
||||
// Declare Variables
|
||||
var allReportsUrl = 'https://powerbiembedapi.azurewebsites.net/api/reports';
|
||||
var $reportsList = $('#reportslist');
|
||||
var $resetButton = $('#resetButton');
|
||||
var $dynamicReportContainer = $('#reportdynamic');
|
||||
|
||||
// When report button is clicked embed the report
|
||||
$reportsList.on('click', 'button', function (event) {
|
||||
var button = event.target;
|
||||
var report = $(button).data('report');
|
||||
var url = allReportsUrl + '/' + report.id;
|
||||
|
||||
fetch(url)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (embedConfig) {
|
||||
return powerbi.embed($dynamicReportContainer.get(0), embedConfig);
|
||||
});
|
||||
}
|
||||
else {
|
||||
return response.json()
|
||||
.then(function (error) {
|
||||
throw new Error(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// When reset button is clicked reset container
|
||||
$resetButton.on('click', function (event) {
|
||||
powerbi.reset($dynamicReportContainer.get(0));
|
||||
});
|
||||
|
||||
// Helper function to generate HTML for each report
|
||||
function generateReportListItem(report) {
|
||||
var button = $('<button>')
|
||||
.attr({
|
||||
type: 'button'
|
||||
})
|
||||
.addClass('btn btn-success')
|
||||
.data('report', report)
|
||||
.text('Embed!');
|
||||
|
||||
var reportName = $('<span />')
|
||||
.addClass('report-name')
|
||||
.text(report.name)
|
||||
|
||||
var element = $('<li>')
|
||||
.append(reportName)
|
||||
.append(button);
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
// Init
|
||||
fetch(allReportsUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (reports) {
|
||||
reports
|
||||
.map(generateReportListItem)
|
||||
.forEach(function (element) {
|
||||
$reportsList.append(element);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,429 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
console.log('Scenario 4: Custom Filter Pane');
|
||||
|
||||
var reportUrl = 'https://powerbiembedapi.azurewebsites.net/api/dxt/reports/c4d31ef0-7b34-4d80-9bcb-5974d1405572';
|
||||
var $customFilterPaneContainer = $('#reportcustomfilter');
|
||||
var customFilterPaneReport;
|
||||
var customFilterPaneReportPages;
|
||||
var $customFilterForm = $('#customfilterform');
|
||||
var $filterType = $('#filtertype');
|
||||
var $typeFields = $('.filter-type');
|
||||
var $operatorTypeFields = $('input[type=radio][name=operatorType]');
|
||||
var $operatorFields = $('.filter-operators');
|
||||
var $targetTypeFields = $('input[type=radio][name=filterTarget]');
|
||||
var $targetFields = $('.filter-target');
|
||||
|
||||
var $predefinedFilter1 = $('#predefinedFilter1');
|
||||
var predefinedFilter1 = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "And", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Direct"
|
||||
}
|
||||
]);
|
||||
|
||||
var $predefinedFilter2 = $('#predefinedFilter2');
|
||||
var predefinedFilter2 = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "Or", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Wash"
|
||||
},
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Park"
|
||||
}
|
||||
]);
|
||||
|
||||
var $predefinedFilter3 = $('#predefinedFilter3');
|
||||
var predefinedFilter3 = new models.AdvancedFilter({
|
||||
table: "Store",
|
||||
column: "Name"
|
||||
}, "Or", [
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Wash"
|
||||
},
|
||||
{
|
||||
operator: "Contains",
|
||||
value: "Park"
|
||||
}
|
||||
]);
|
||||
|
||||
$customFilterForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
console.log('submit');
|
||||
|
||||
var data = {
|
||||
target: getFilterTypeTarget(),
|
||||
operator: getFilterOperatorAndValues(),
|
||||
reportTarget: getReportTarget()
|
||||
};
|
||||
|
||||
var filter;
|
||||
var values = Array.prototype.slice.call(data.operator.values);
|
||||
|
||||
if (data.operator.type === "basic") {
|
||||
filter = new models.BasicFilter(data.target, data.operator.operator, values);
|
||||
}
|
||||
else if (data.operator.type === "advanced") {
|
||||
filter = new models.AdvancedFilter(data.target, data.operator.operator, values);
|
||||
}
|
||||
|
||||
var filterTargetLevel = customFilterPaneReport;
|
||||
if (data.reportTarget.type === "page") {
|
||||
filterTargetLevel = customFilterPaneReport.page(data.reportTarget.name);
|
||||
}
|
||||
else if (data.reportTarget.type === "visual") {
|
||||
// Need to finalize how visuals report whichp age they are on in order to construct correct page object.
|
||||
filterTargetLevel = customFilterPaneReport.page('ReportSection1').visual(data.reportTarget.name);
|
||||
}
|
||||
|
||||
var filterJson = filter.toJSON();
|
||||
filterTargetLevel.setFilters([filterJson]);
|
||||
});
|
||||
|
||||
$filterType.on('change', function (event) {
|
||||
console.log('change');
|
||||
var value = $filterType.val().toLowerCase();
|
||||
updateFieldsForType(value);
|
||||
});
|
||||
|
||||
$operatorTypeFields.on('change', function (event) {
|
||||
var checkedType = $('#customfilterform input[name=operatorType]:checked').val();
|
||||
console.log('operator change', checkedType);
|
||||
|
||||
updateFieldsForOperator(checkedType.toLowerCase());
|
||||
});
|
||||
|
||||
$targetTypeFields.on('change', function (event) {
|
||||
var checkedTarget = $('#customfilterform input[name=filterTarget]:checked').val();
|
||||
console.log('target change', checkedTarget);
|
||||
|
||||
updateTargetFields(checkedTarget.toLowerCase());
|
||||
});
|
||||
|
||||
$predefinedFilter1.on('click', function (event) {
|
||||
customFilterPaneReport.setFilters([predefinedFilter1.toJSON()]);
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
$predefinedFilter2.on('click', function (event) {
|
||||
customFilterPaneReport.setFilters([predefinedFilter2.toJSON()]);
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
$predefinedFilter3.on('click', function (event) {
|
||||
customFilterPaneReport.page('ReportSection2').setFilters([predefinedFilter3.toJSON()]);
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
function getFilterTypeTarget() {
|
||||
var filterType = $filterType.val().toLowerCase();
|
||||
var filterTypeTarget = {};
|
||||
filterTypeTarget.table = $('#filtertable').val();
|
||||
|
||||
if (filterType === "column") {
|
||||
filterTypeTarget.column = $('#filtercolumn').val();
|
||||
}
|
||||
else if (filterType === "hierarchy") {
|
||||
filterTypeTarget.hierarchy = $('#filterhierarchy').val();
|
||||
filterTypeTarget.hierarchyLevel = $('#filterhierarchylevel').val();
|
||||
}
|
||||
else if (filterType === "measure") {
|
||||
filterTypeTarget.measure = $('#filtermeasure').val();
|
||||
}
|
||||
|
||||
return filterTypeTarget;
|
||||
}
|
||||
|
||||
function getFilterOperatorAndValues() {
|
||||
var operatorType = $('#customfilterform input[name=operatorType]:checked').val();
|
||||
var operatorAndValues = {
|
||||
type: operatorType
|
||||
};
|
||||
|
||||
if (operatorType === "basic") {
|
||||
operatorAndValues.operator = $('#filterbasicoperator').val();
|
||||
operatorAndValues.values = $('.basic-value').map(function (index, element) {
|
||||
return $(element).val();
|
||||
});
|
||||
}
|
||||
else if (operatorType === "advanced") {
|
||||
operatorAndValues.operator = $('#filterlogicaloperator').val();
|
||||
operatorAndValues.values = $('.advanced-value')
|
||||
.map(function (index, element) {
|
||||
return {
|
||||
value: $(element).find('.advanced-value-input').val(),
|
||||
operator: $(element).find('.advanced-logical-condition').val()
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return operatorAndValues;
|
||||
}
|
||||
|
||||
function getReportTarget() {
|
||||
var checkedTarget = $('#customfilterform input[name=filterTarget]:checked').val();
|
||||
var target = {
|
||||
type: checkedTarget
|
||||
};
|
||||
|
||||
if (checkedTarget === "page") {
|
||||
target.name = $('#filtertargetpage').val();
|
||||
}
|
||||
else if (checkedTarget === "visual") {
|
||||
target.id = undefined; // Need way to populate visual ids
|
||||
}
|
||||
|
||||
return target;
|
||||
}
|
||||
|
||||
function updateFieldsForType(type) {
|
||||
$typeFields.hide();
|
||||
$('.filter-type--' + type).show();
|
||||
}
|
||||
|
||||
function updateFieldsForOperator(type) {
|
||||
$operatorFields.hide();
|
||||
$('.filter-operators--' + type).show();
|
||||
}
|
||||
|
||||
function updateTargetFields(target) {
|
||||
$targetFields.hide();
|
||||
$('.filter-target--' + target).show();
|
||||
}
|
||||
|
||||
function updateFiltersPane() {
|
||||
const $filters = $('.filters');
|
||||
|
||||
$.each($filters, (index, element) => {
|
||||
const $element = $(element);
|
||||
const filterable = $element.data('filterable');
|
||||
|
||||
console.log($element, filterable);
|
||||
|
||||
filterable.getFilters()
|
||||
.then(filters => {
|
||||
console.log(filterable.displayName, filters);
|
||||
$element.empty();
|
||||
filters
|
||||
.map(generateFilterElement)
|
||||
.forEach($filter => {
|
||||
$element.append($filter);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Init
|
||||
updateFieldsForType("column");
|
||||
updateFieldsForOperator("basic");
|
||||
updateTargetFields("report");
|
||||
|
||||
function generateFilterElement(filter) {
|
||||
var $removeButton = $('<button>')
|
||||
.addClass('btn')
|
||||
.addClass('btn-danger')
|
||||
.addClass('filter__remove')
|
||||
.data('filter', filter)
|
||||
.html('×')
|
||||
;
|
||||
|
||||
var $filterText = $('<div>')
|
||||
.addClass('filter__text')
|
||||
.text(JSON.stringify(filter, null, ' '))
|
||||
;
|
||||
|
||||
var $filter = $('<div>')
|
||||
.addClass('filter')
|
||||
.append($removeButton)
|
||||
.append($filterText)
|
||||
;
|
||||
|
||||
return $filter;
|
||||
}
|
||||
|
||||
/**
|
||||
* Applied Filters Pane
|
||||
*/
|
||||
function createAppliedFiltersPane($element, report) {
|
||||
var $appliedFiltersContainer = $('#appliedFilters');
|
||||
var $reportFilters = $('#reportFilters');
|
||||
var $pageFilters = $('#pageFilters');
|
||||
var $refreshAppliedFilters = $('#refreshAppliedFilters');
|
||||
let reportPages;
|
||||
|
||||
var filtersTree = {
|
||||
filterable: report,
|
||||
filters: [],
|
||||
nodes: []
|
||||
};
|
||||
|
||||
function generatePageFiltersContainer(page) {
|
||||
var $heading = $('<h4>')
|
||||
.text(page.name)
|
||||
;
|
||||
|
||||
var $filters = $('<div>')
|
||||
.addClass('filters')
|
||||
.data('filterable', page)
|
||||
;
|
||||
|
||||
var $filtersContainer = $('<div>')
|
||||
.append($heading)
|
||||
.append($filters)
|
||||
;
|
||||
|
||||
return $filtersContainer;
|
||||
}
|
||||
|
||||
|
||||
// Setup static report filterable on element;
|
||||
$reportFilters
|
||||
.data('filterable', report);
|
||||
|
||||
// Setup page filters containers which have filterable
|
||||
report.getPages()
|
||||
.then(pages => {
|
||||
reportPages = pages;
|
||||
|
||||
pages
|
||||
.map(generatePageFiltersContainer)
|
||||
.forEach($pageFiltersContainer => {
|
||||
$pageFilters.append($pageFiltersContainer)
|
||||
});
|
||||
});
|
||||
|
||||
$refreshAppliedFilters.on('click', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
$appliedFiltersContainer.on('click', 'button.filter__remove', function (event) {
|
||||
event.preventDefault();
|
||||
const $element = $(event.target);
|
||||
const filterToRemove = $element.data('filter');
|
||||
const $filter = $element.closest('.filter');
|
||||
const $filtersContainer = $element.closest('.filters');
|
||||
const filterable = $filtersContainer.data('filterable');
|
||||
|
||||
console.log('remove filter', $element, $filtersContainer, filterToRemove, filterable);
|
||||
|
||||
filterable.getFilters()
|
||||
.then(filters => {
|
||||
let index = -1;
|
||||
filters.some(function (filter, i) {
|
||||
if (JSON.stringify(filter) === JSON.stringify(filterToRemove)) {
|
||||
index = i;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
if (index !== -1) {
|
||||
filters.splice(index, 1);
|
||||
filterable.setFilters(filters);
|
||||
$filter.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Remove Filters Buttons
|
||||
*/
|
||||
var $removeFiltersReportForm = $('#removeFiltersReportForm');
|
||||
var $removeFiltersPageForm = $('#removeFiltersPageForm');
|
||||
var $removeFiltersVisualForm = $('#removeFiltersVisualForm');
|
||||
var $removeFiltersPagesList = $('#removeFiltersPagesList');
|
||||
var $removeFiltersVisualsList = $('#removeFiltersVisualsList');
|
||||
|
||||
$removeFiltersReportForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
console.log('submit removeFiltersReportForm');
|
||||
customFilterPaneReport.removeFilters();
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
$removeFiltersPageForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var pageName = $removeFiltersPagesList.val();
|
||||
console.log('submit removeFiltersPageForm', pageName);
|
||||
customFilterPaneReport.page(pageName).removeFilters();
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
$removeFiltersVisualForm.on('submit', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var visualName = $removeFiltersVisualsList.val();
|
||||
console.log('submit removeFiltersVisualForm', visualName);
|
||||
customFilterPaneReport.page('ReportSection2').visual(visualName).removeFilters();
|
||||
updateFiltersPane();
|
||||
});
|
||||
|
||||
// Init
|
||||
fetch(reportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (embedConfig) {
|
||||
var customFilterPaneConfig = $.extend({}, embedConfig, {
|
||||
settings: {
|
||||
filterPaneEnabled: false,
|
||||
navContentPaneEnabled: true
|
||||
}
|
||||
});
|
||||
|
||||
customFilterPaneReport = powerbi.embed($customFilterPaneContainer.get(0), customFilterPaneConfig);
|
||||
return customFilterPaneReport;
|
||||
});
|
||||
}
|
||||
else {
|
||||
return response.json()
|
||||
.then(error => {
|
||||
throw new Error(error);
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(function (report) {
|
||||
report.on('loaded', function (event) {
|
||||
createAppliedFiltersPane(null, report);
|
||||
|
||||
console.log('custom filter pane report loaded');
|
||||
report.getPages()
|
||||
.then(function (pages) {
|
||||
customFilterPaneReportPages = pages;
|
||||
var $pagesSelect = $('#filtertargetpage');
|
||||
var $removeFiltersPagesList = $('#removeFiltersPagesList');
|
||||
|
||||
pages
|
||||
.forEach(function (page) {
|
||||
var $pageOption = $('<option>')
|
||||
.val(page.name)
|
||||
.text(page.displayName)
|
||||
.data(page);
|
||||
|
||||
var $pageOption1 = $('<option>')
|
||||
.val(page.name)
|
||||
.text(page.displayName)
|
||||
.data(page);
|
||||
|
||||
$removeFiltersPagesList.append($pageOption);
|
||||
$pagesSelect.append($pageOption1);
|
||||
});
|
||||
});
|
||||
});
|
||||
})
|
||||
;
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
// Scenario 1: Static Embed
|
||||
var staticReportUrl = 'https://powerbiembedapi.azurewebsites.net/api/reports/c52af8ab-0468-4165-92af-dc39858d66ad';
|
||||
var $staticReportContainer = $('#reportstatic');
|
||||
var staticReport;
|
||||
|
||||
fetch(staticReportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (embedConfig) {
|
||||
staticReport = powerbi.embed($staticReportContainer.get(0), embedConfig);
|
||||
});
|
||||
}
|
||||
else {
|
||||
return response.json()
|
||||
.then(error => {
|
||||
throw new Error(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
console.log('Scenario 3: Custom Page Navigation');
|
||||
|
||||
// Declare Variables
|
||||
var staticReportUrl = 'https://powerbiembedapi.azurewebsites.net/api/reports/c52af8ab-0468-4165-92af-dc39858d66ad';
|
||||
var $customPageNavContainer = $('#reportcustompagenav');
|
||||
var customPageNavReport;
|
||||
var $reportPagesList = $('#reportpagesbuttons');
|
||||
var $prevButton = $('#prevbutton');
|
||||
var $nextButton = $('#nextbutton');
|
||||
var $cycleButton = $('#cyclebutton');
|
||||
var cycleIntervalId;
|
||||
|
||||
// Helper function to generate pages list
|
||||
function generateReportPage(page) {
|
||||
var $page = $('<button>')
|
||||
.attr({
|
||||
type: 'button'
|
||||
})
|
||||
.addClass('btn btn-success')
|
||||
.data('page', page)
|
||||
.text(page.displayName);
|
||||
|
||||
if (page.isActive) {
|
||||
$page.addClass('active');
|
||||
}
|
||||
|
||||
return $page;
|
||||
}
|
||||
|
||||
function updateActivePage(newPage) {
|
||||
// Remove active class
|
||||
var reportButtons = $reportPagesList.children('button');
|
||||
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
if (buttonPage.isActive) {
|
||||
buttonPage.isActive = false;
|
||||
$element.removeClass('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Set active class
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
if (buttonPage.name === newPage.name) {
|
||||
buttonPage.isActive = true;
|
||||
$element.addClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function changePage(forwards) {
|
||||
// Remove active class
|
||||
var reportButtons = $reportPagesList.children('button');
|
||||
var $activeButtonIndex = -1;
|
||||
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
if (buttonPage.isActive) {
|
||||
$activeButtonIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
if (forwards) {
|
||||
$activeButtonIndex += 1;
|
||||
}
|
||||
else {
|
||||
$activeButtonIndex -= 1;
|
||||
}
|
||||
|
||||
if ($activeButtonIndex > reportButtons.length - 1) {
|
||||
$activeButtonIndex = 0;
|
||||
}
|
||||
if ($activeButtonIndex < 0) {
|
||||
$activeButtonIndex = reportButtons.length - 1;
|
||||
}
|
||||
|
||||
reportButtons
|
||||
.each(function (index, element) {
|
||||
if ($activeButtonIndex === index) {
|
||||
var $element = $(element);
|
||||
var buttonPage = $element.data('page');
|
||||
|
||||
customPageNavReport.setPage(buttonPage.name);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$prevButton.on('click', function (event) {
|
||||
changePage(false);
|
||||
});
|
||||
|
||||
$nextButton.on('click', function (event) {
|
||||
changePage(true);
|
||||
});
|
||||
|
||||
$cycleButton.on('click', function (event) {
|
||||
$cycleButton.toggleClass('active');
|
||||
$cycleButton.data('cycle', !$cycleButton.data('cycle'));
|
||||
|
||||
if ($cycleButton.data('cycle')) {
|
||||
cycleIntervalId = setInterval(function () {
|
||||
console.log('cycle page: ');
|
||||
changePage(true);
|
||||
}, 1000);
|
||||
}
|
||||
else {
|
||||
clearInterval(cycleIntervalId);
|
||||
}
|
||||
});
|
||||
|
||||
$reportPagesList.on('click', 'button', function (event) {
|
||||
var button = event.target;
|
||||
var report = $(button).data('report');
|
||||
var page = $(button).data('page');
|
||||
|
||||
console.log('Attempting to set page to: ', page.name);
|
||||
customPageNavReport.setPage(page.name)
|
||||
.then(function (response) {
|
||||
console.log('Page changed request accepted');
|
||||
});
|
||||
});
|
||||
|
||||
// Init
|
||||
fetch(staticReportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (report) {
|
||||
var embedConfig = $.extend({
|
||||
settings: {
|
||||
filterPaneEnabled: false,
|
||||
navContentPaneEnabled: false
|
||||
}
|
||||
}, report);
|
||||
customPageNavReport = powerbi.embed($customPageNavContainer.get(0), embedConfig);
|
||||
return customPageNavReport;
|
||||
});
|
||||
}
|
||||
else {
|
||||
return response.json()
|
||||
.then(error => {
|
||||
throw new Error(error);
|
||||
});
|
||||
}
|
||||
})
|
||||
.then(function (report) {
|
||||
report.on('loaded', function (event) {
|
||||
console.log('custom page nav report loaded');
|
||||
report.getPages()
|
||||
.then(function (pages) {
|
||||
console.log('pages: ', pages);
|
||||
if (pages.length > 0) {
|
||||
const firstPage = pages[0];
|
||||
firstPage.isActive = true;
|
||||
|
||||
pages
|
||||
.map(function (page) {
|
||||
return generateReportPage(page);
|
||||
})
|
||||
.forEach(function (element) {
|
||||
$reportPagesList.append(element);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
report.on('error', function (event) {
|
||||
console.log('customPageNavReport error', event);
|
||||
});
|
||||
|
||||
report.on('pageChanged', function (event) {
|
||||
console.log('pageChanged event received', event);
|
||||
updateActivePage(event.detail.newPage);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
$(function () {
|
||||
var models = window['powerbi-client'].models;
|
||||
|
||||
console.log('Scenario 6: Update settings');
|
||||
|
||||
var reportUrl = 'https://powerbiembedapi.azurewebsites.net/api/dxt/reports/c4d31ef0-7b34-4d80-9bcb-5974d1405572';
|
||||
var $updateSettingsReport = $('#updatesettingsreport');
|
||||
var updateSettingsReport;
|
||||
var updateSettingsReportFilterPaneEnabled = false;
|
||||
var updateSettingsReprotNavContentPaneEnabled = false;
|
||||
var $toggleFilterPaneButton = $('#toggleFilterPane');
|
||||
var $toggleNavContentPaneButton = $('#toggleNavContentPane');
|
||||
|
||||
$toggleFilterPaneButton.on('click', function () {
|
||||
updateSettingsReportFilterPaneEnabled = !updateSettingsReportFilterPaneEnabled;
|
||||
updateSettingsReport.updateSettings({
|
||||
filterPaneEnabled: updateSettingsReportFilterPaneEnabled
|
||||
});
|
||||
});
|
||||
|
||||
$toggleNavContentPaneButton.on('click', function () {
|
||||
updateSettingsReprotNavContentPaneEnabled = !updateSettingsReprotNavContentPaneEnabled;
|
||||
updateSettingsReport.updateSettings({
|
||||
navContentPaneEnabled: updateSettingsReprotNavContentPaneEnabled
|
||||
});
|
||||
});
|
||||
|
||||
// Init
|
||||
fetch(reportUrl)
|
||||
.then(function (response) {
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
.then(function (embedConfig) {
|
||||
var updateSettingsEmbedConfig = $.extend({}, embedConfig, {
|
||||
settings: {
|
||||
filterPaneEnabled: updateSettingsReportFilterPaneEnabled,
|
||||
navContentPaneEnabled: updateSettingsReprotNavContentPaneEnabled
|
||||
}
|
||||
});
|
||||
|
||||
updateSettingsReport = powerbi.embed($updateSettingsReport.get(0), updateSettingsEmbedConfig);
|
||||
return updateSettingsReport;
|
||||
});
|
||||
}
|
||||
else {
|
||||
return response.json()
|
||||
.then(error => {
|
||||
throw new Error(error);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Power BI - Sample - Client - JavaScript</title>
|
||||
<base path="/" />
|
||||
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="styles/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Power BI - Sample - Client - Javascript</h1>
|
||||
<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>
|
||||
|
||||
<h2>Scenarios:</h2>
|
||||
<ul id="navigation" class="nav nav-pills">
|
||||
<li id="pageLinkStatic" class=""><a href="index.html">Scenario 1: Static Embed</a></li>
|
||||
<li id="pageLinkDynamic" class=""><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
|
||||
<li id="pageLinkPageNav" class=""><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
|
||||
<li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
|
||||
<li id="pageLinkDefaults" class="active"><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
|
||||
<li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Default Page and/or Default Filter</h2>
|
||||
<p>Load a report at a specified page and/or report level filter.</p>
|
||||
|
||||
<div id="reportdefaults" class="powerbi-container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/es6-promise/es6-promise.js"></script>
|
||||
<script src="bower_components/fetch/fetch.js"></script>
|
||||
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
|
||||
|
||||
<script src="app/defaults.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Power BI - Sample - Client - JavaScript</title>
|
||||
<base path="/" />
|
||||
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="styles/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Power BI - Sample - Client - Javascript</h1>
|
||||
<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>
|
||||
|
||||
<h2>Scenarios:</h2>
|
||||
<ul id="navigation" class="nav nav-pills">
|
||||
<li id="pageLinkStatic" class=""><a href="index.html">Scenario 1: Static Embed</a></li>
|
||||
<li id="pageLinkDynamic" class="active"><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
|
||||
<li id="pageLinkPageNav" class=""><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
|
||||
<li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
|
||||
<li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
|
||||
<li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Dynamic Embed</h2>
|
||||
<p>Report to embed is chosen by the user.</p>
|
||||
<ol id="reportslist">
|
||||
</ol>
|
||||
<p class="text-right">
|
||||
<button type="button" id="resetButton" class="btn btn-danger">Reset</button>
|
||||
</p>
|
||||
|
||||
<div id="reportdynamic" class="powerbi-container"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/es6-promise/es6-promise.js"></script>
|
||||
<script src="bower_components/fetch/fetch.js"></script>
|
||||
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
|
||||
|
||||
<script src="app/dynamic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Power BI - Sample - Client - JavaScript</title>
|
||||
<base path="/" />
|
||||
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="styles/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Power BI - Sample - Client - Javascript</h1>
|
||||
<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>
|
||||
|
||||
<h2>Scenarios:</h2>
|
||||
<ul id="navigation" class="nav nav-pills">
|
||||
<li id="pageLinkStatic" class=""><a href="index.html">Scenario 1: Static Embed</a></li>
|
||||
<li id="pageLinkDynamic" class=""><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
|
||||
<li id="pageLinkPageNav" class=""><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
|
||||
<li id="pageLinkFilters" class="active"><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
|
||||
<li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
|
||||
<li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Custom Filter Pane</h2>
|
||||
<p>Filter pane is hidden in the embedded report and recreated by developer to allow custom branding or focused experience on filters specialized for the report.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div id="reportcustomfilter" class="powerbi-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h4>Report</h4>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>Page</h4>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>Visual</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<form id="removeFiltersReportForm">
|
||||
<div class="form-group">
|
||||
<input class="form-control" disabled placeholder="N/A" />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning btn-block">Remove All Filters at Report Level</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<form id="removeFiltersPageForm">
|
||||
<div class="form-group">
|
||||
<select id="removeFiltersPagesList" class="form-control">
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning btn-block">Remove All Filters at Page Level</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<form id="removeFiltersVisualForm">
|
||||
<div class="form-group">
|
||||
<select id="removeFiltersVisualsList" class="form-control">
|
||||
<option value="visualId1">Visual Id 1</option>
|
||||
<option value="visualId2">Visual Id 2</option>
|
||||
<option value="visualId3">Visual Id 3</option>
|
||||
<option value="visualId4">Visual Id 4</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning btn-block">Remove All Filters at Visual Level</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<button type="button" id="predefinedFilter1" class="btn btn-primary btn-block">Predefined Advanced Report Filter</button>
|
||||
<p>Store > Name Contains 'Direct'</p>
|
||||
<button type="button" id="predefinedFilter2" class="btn btn-primary btn-block">Predefined Advanced Report Filter</button>
|
||||
<p>Store > Name contains 'Wash' or contains 'Park'</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="button" id="predefinedFilter3" class="btn btn-primary btn-block">Predefined Advanced Page Filter</button>
|
||||
<p>Store > Name contains 'Wash' or contains 'Park' (Page: District Monthly Sales)</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
N/A
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<form id="customfilterform" name="abc">
|
||||
<h2>Custom Filter Pane</h2>
|
||||
|
||||
<fieldset>
|
||||
<legend>Target Type:</legend>
|
||||
<div class="form-group">
|
||||
<select id="filtertype" class="form-control">
|
||||
<option value="column">Column</option>
|
||||
<option value="hierarchy">Hierarchy</option>
|
||||
<option value="measure">Measure</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="table">Table</label>
|
||||
<input type="text" class="form-control" id="filtertable" placeholder="Table" >
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--column">
|
||||
<label for="column">Column</label>
|
||||
<input type="text" class="form-control" id="filtercolumn" placeholder="Column" >
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--hierarchy">
|
||||
<label for="hierarchy">Hierarchy</label>
|
||||
<input type="text" class="form-control" id="filterhierarchy" placeholder="hierarchy" >
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--hierarchy">
|
||||
<label for="hierarchylevel">Hierarchy Level</label>
|
||||
<input type="text" class="form-control" id="filterhierarchylevel" placeholder="Hierarchy Level">
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--measure">
|
||||
<label for="measure">Measure</label>
|
||||
<input type="text" class="form-control" id="filtermeasure" placeholder="Measure" >
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Operator Type:</legend>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="operatorType" id="operatorType1" value="basic" checked>
|
||||
Basic
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="operatorType" id="operatorType2" value="advanced">
|
||||
Advanced
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-operators filter-operators--basic">
|
||||
<h5>Basic Operators</h5>
|
||||
<div class="form-group">
|
||||
<select id="filterbasicoperator" class="form-control">
|
||||
<option>In</option>
|
||||
<option>Out</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h5>Values</h5>
|
||||
<div class="basicvalues">
|
||||
<div class="form-group">
|
||||
<input class="form-control basic-value" placeholder="Value 1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control basic-value" placeholder="Value 2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-operators filter-operators--advanced">
|
||||
<h5>Advanced Operators</h5>
|
||||
|
||||
<p>Logical Operator</p>
|
||||
<div class="form-group">
|
||||
<select id="filterlogicaloperator" class="form-control">
|
||||
<option>And</option>
|
||||
<option>Or</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="advancedvalues">
|
||||
<div class="form-group advanced-value">
|
||||
<p>Value</p>
|
||||
<div class="form-group">
|
||||
<input class="form-control advanced-value-input" placeholder="Value 1" />
|
||||
</div>
|
||||
<p>Condition Operator</p>
|
||||
<select class="form-control advanced-logical-condition">
|
||||
<option>None</option>
|
||||
<option>LessThan</option>
|
||||
<option>LessThanOrEqual</option>
|
||||
<option>GreaterThan</option>
|
||||
<option>GreaterThanOrEqual</option>
|
||||
<option>Contains</option>
|
||||
<option>DoesNotContain</option>
|
||||
<option>StartWith</option>
|
||||
<option>DoesNotStartWith</option>
|
||||
<option>Is</option>
|
||||
<option>IsNot</option>
|
||||
<option>IsBlank</option>
|
||||
<option>IsNotBlank</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group advanced-value">
|
||||
<p>Value</p>
|
||||
<div class="form-group">
|
||||
<input class="form-control advanced-value-input" placeholder="Value 1" />
|
||||
</div>
|
||||
<p>Condition Operator</p>
|
||||
<select class="form-control advanced-logical-condition">
|
||||
<option>None</option>
|
||||
<option>LessThan</option>
|
||||
<option>LessThanOrEqual</option>
|
||||
<option>GreaterThan</option>
|
||||
<option>GreaterThanOrEqual</option>
|
||||
<option>Contains</option>
|
||||
<option>DoesNotContain</option>
|
||||
<option>StartWith</option>
|
||||
<option>DoesNotStartWith</option>
|
||||
<option>Is</option>
|
||||
<option>IsNot</option>
|
||||
<option>IsBlank</option>
|
||||
<option>IsNotBlank</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Filter Target:</legend>
|
||||
<div class="form-group">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="filterTarget" value="report" checked>
|
||||
Report
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="filterTarget" value="page">
|
||||
Page
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="filterTarget" value="visual">
|
||||
Visual
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-target filter-target--page">
|
||||
<div class="form-group">
|
||||
<select id="filtertargetpage" class="form-control">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-success">Add Filter</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="appliedFilters">
|
||||
<h2>Applied Filters</h2>
|
||||
<p>
|
||||
<button type="button" class="btn btn-success" id="refreshAppliedFilters">Refresh</button>
|
||||
</p>
|
||||
|
||||
<h3>Report Level</h3>
|
||||
<div class="filters" id="reportFilters">
|
||||
</div>
|
||||
|
||||
<h3>Page Level</h3>
|
||||
<div id="pageFilters">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/es6-promise/es6-promise.js"></script>
|
||||
<script src="bower_components/fetch/fetch.js"></script>
|
||||
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
|
||||
|
||||
<script src="app/filters.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
312
demo/index.html
312
demo/index.html
|
|
@ -15,310 +15,20 @@
|
|||
<h1>Power BI - Sample - Client - Javascript</h1>
|
||||
<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>
|
||||
|
||||
<h2>Scenarios:</h2>
|
||||
<ul id="navigation" class="nav nav-pills">
|
||||
<li id="pageLinkStatic" class="active"><a href="index.html">Scenario 1: Static Embed</a></li>
|
||||
<li id="pageLinkDynamic" class=""><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
|
||||
<li id="pageLinkPageNav" class=""><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
|
||||
<li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
|
||||
<li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
|
||||
<li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Static Embed</h2>
|
||||
<p>Report to embed is known by the developer.</p>
|
||||
|
||||
<div id="reportstatic" class="powerbi-container"></div>
|
||||
|
||||
<h2>Dynamic Embed</h2>
|
||||
<p>Report to embed is chosen by the user.</p>
|
||||
<ol id="reportslist">
|
||||
</ol>
|
||||
<p class="text-right">
|
||||
<button type="button" id="resetButton" class="btn btn-danger">Reset</button>
|
||||
</p>
|
||||
|
||||
<div id="reportdynamic" class="powerbi-container"></div>
|
||||
|
||||
<h2>Custom Page Navigation</h2>
|
||||
<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>
|
||||
|
||||
<div id="reportcustompagenav" class="powerbi-container"></div>
|
||||
|
||||
<div class="reportpageslist">
|
||||
<button type="button" id="prevbutton" class="reportpageslist__previous btn btn-primary">< Prev</button>
|
||||
<div id="reportpagesbuttons" class="reportpageslist__pages">
|
||||
</div>
|
||||
<button type="button" id="cyclebutton" class="reportpageslist__cycle btn btn-warning">Cycle</button>
|
||||
<button type="button" id="nextbutton" class="reportpageslist__next btn btn-primary">Next ></button>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Default Page and/or Default Filter</h2>
|
||||
<p>Load a report at a specified page and/or report level filter.</p>
|
||||
|
||||
<div id="reportdefaults" class="powerbi-container"></div>
|
||||
|
||||
<h2>Custom Filter Pane</h2>
|
||||
<p>Filter pane is hidden in the embedded report and recreated by developer to allow custom branding or focused experience on filters specialized for the report.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div id="reportcustomfilter" class="powerbi-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h4>Report</h4>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>Page</h4>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h4>Visual</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<form id="removeFiltersReportForm">
|
||||
<div class="form-group">
|
||||
<input class="form-control" disabled placeholder="N/A" />
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning btn-block">Remove All Filters at Report Level</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<form id="removeFiltersPageForm">
|
||||
<div class="form-group">
|
||||
<select id="removeFiltersPagesList" class="form-control">
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning btn-block">Remove All Filters at Page Level</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<form id="removeFiltersVisualForm">
|
||||
<div class="form-group">
|
||||
<select id="removeFiltersVisualsList" class="form-control">
|
||||
<option value="visualId1">Visual Id 1</option>
|
||||
<option value="visualId2">Visual Id 2</option>
|
||||
<option value="visualId3">Visual Id 3</option>
|
||||
<option value="visualId4">Visual Id 4</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-warning btn-block">Remove All Filters at Visual Level</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<button type="button" id="predefinedFilter1" class="btn btn-primary btn-block">Predefined Advanced Report Filter</button>
|
||||
<p>Store > Name Contains 'Direct'</p>
|
||||
<button type="button" id="predefinedFilter2" class="btn btn-primary btn-block">Predefined Advanced Report Filter</button>
|
||||
<p>Store > Name contains 'Wash' or contains 'Park'</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button type="button" id="predefinedFilter3" class="btn btn-primary btn-block">Predefined Advanced Page Filter</button>
|
||||
<p>Store > Name contains 'Wash' or contains 'Park' (Page: District Monthly Sales)</p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
N/A
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<form id="customfilterform" name="abc">
|
||||
<h2>Custom Filter Pane</h2>
|
||||
|
||||
<fieldset>
|
||||
<legend>Target Type:</legend>
|
||||
<div class="form-group">
|
||||
<select id="filtertype" class="form-control">
|
||||
<option value="column">Column</option>
|
||||
<option value="hierarchy">Hierarchy</option>
|
||||
<option value="measure">Measure</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="table">Table</label>
|
||||
<input type="text" class="form-control" id="filtertable" placeholder="Table" >
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--column">
|
||||
<label for="column">Column</label>
|
||||
<input type="text" class="form-control" id="filtercolumn" placeholder="Column" >
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--hierarchy">
|
||||
<label for="hierarchy">Hierarchy</label>
|
||||
<input type="text" class="form-control" id="filterhierarchy" placeholder="hierarchy" >
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--hierarchy">
|
||||
<label for="hierarchylevel">Hierarchy Level</label>
|
||||
<input type="text" class="form-control" id="filterhierarchylevel" placeholder="Hierarchy Level">
|
||||
</div>
|
||||
<div class="form-group filter-type filter-type--measure">
|
||||
<label for="measure">Measure</label>
|
||||
<input type="text" class="form-control" id="filtermeasure" placeholder="Measure" >
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Operator Type:</legend>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="operatorType" id="operatorType1" value="basic" checked>
|
||||
Basic
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="operatorType" id="operatorType2" value="advanced">
|
||||
Advanced
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="filter-operators filter-operators--basic">
|
||||
<h5>Basic Operators</h5>
|
||||
<div class="form-group">
|
||||
<select id="filterbasicoperator" class="form-control">
|
||||
<option>In</option>
|
||||
<option>Out</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h5>Values</h5>
|
||||
<div class="basicvalues">
|
||||
<div class="form-group">
|
||||
<input class="form-control basic-value" placeholder="Value 1" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input class="form-control basic-value" placeholder="Value 2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-operators filter-operators--advanced">
|
||||
<h5>Advanced Operators</h5>
|
||||
|
||||
<p>Logical Operator</p>
|
||||
<div class="form-group">
|
||||
<select id="filterlogicaloperator" class="form-control">
|
||||
<option>And</option>
|
||||
<option>Or</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="advancedvalues">
|
||||
<div class="form-group advanced-value">
|
||||
<p>Value</p>
|
||||
<div class="form-group">
|
||||
<input class="form-control advanced-value-input" placeholder="Value 1" />
|
||||
</div>
|
||||
<p>Condition Operator</p>
|
||||
<select class="form-control advanced-logical-condition">
|
||||
<option>None</option>
|
||||
<option>LessThan</option>
|
||||
<option>LessThanOrEqual</option>
|
||||
<option>GreaterThan</option>
|
||||
<option>GreaterThanOrEqual</option>
|
||||
<option>Contains</option>
|
||||
<option>DoesNotContain</option>
|
||||
<option>StartWith</option>
|
||||
<option>DoesNotStartWith</option>
|
||||
<option>Is</option>
|
||||
<option>IsNot</option>
|
||||
<option>IsBlank</option>
|
||||
<option>IsNotBlank</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group advanced-value">
|
||||
<p>Value</p>
|
||||
<div class="form-group">
|
||||
<input class="form-control advanced-value-input" placeholder="Value 1" />
|
||||
</div>
|
||||
<p>Condition Operator</p>
|
||||
<select class="form-control advanced-logical-condition">
|
||||
<option>None</option>
|
||||
<option>LessThan</option>
|
||||
<option>LessThanOrEqual</option>
|
||||
<option>GreaterThan</option>
|
||||
<option>GreaterThanOrEqual</option>
|
||||
<option>Contains</option>
|
||||
<option>DoesNotContain</option>
|
||||
<option>StartWith</option>
|
||||
<option>DoesNotStartWith</option>
|
||||
<option>Is</option>
|
||||
<option>IsNot</option>
|
||||
<option>IsBlank</option>
|
||||
<option>IsNotBlank</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Filter Target:</legend>
|
||||
<div class="form-group">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="filterTarget" value="report" checked>
|
||||
Report
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="filterTarget" value="page">
|
||||
Page
|
||||
</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="filterTarget" value="visual">
|
||||
Visual
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-target filter-target--page">
|
||||
<div class="form-group">
|
||||
<select id="filtertargetpage" class="form-control">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-success">Add Filter</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="appliedFilters">
|
||||
<h2>Applied Filters</h2>
|
||||
<p>
|
||||
<button type="button" class="btn btn-success" id="refreshAppliedFilters">Refresh</button>
|
||||
</p>
|
||||
|
||||
<h3>Report Level</h3>
|
||||
<div class="filters" id="reportFilters">
|
||||
</div>
|
||||
|
||||
<h3>Page Level</h3>
|
||||
<div id="pageFilters">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Update Settings</h2>
|
||||
<p>Change visibility of filter pane or page navigation dynamically</p>
|
||||
|
||||
<div id="updatesettingsreport" class="powerbi-container"></div>
|
||||
|
||||
<div>
|
||||
<br />
|
||||
<button type="button" class="btn btn-primary" id="toggleFilterPane">Toggle Filter Pane</button>
|
||||
<button type="button" class="btn btn-primary" id="toggleNavContentPane">Toggle Page Navigation</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
|
|
@ -326,6 +36,6 @@
|
|||
<script src="bower_components/fetch/fetch.js"></script>
|
||||
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
|
||||
|
||||
<script src="app/app.js"></script>
|
||||
<script src="app/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Power BI - Sample - Client - JavaScript</title>
|
||||
<base path="/" />
|
||||
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="styles/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Power BI - Sample - Client - Javascript</h1>
|
||||
<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>
|
||||
|
||||
<h2>Scenarios:</h2>
|
||||
<ul id="navigation" class="nav nav-pills">
|
||||
<li id="pageLinkStatic" class=""><a href="index.html">Scenario 1: Static Embed</a></li>
|
||||
<li id="pageLinkDynamic" class=""><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
|
||||
<li id="pageLinkPageNav" class="active"><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
|
||||
<li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
|
||||
<li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
|
||||
<li id="pageLinkSettings" class=""><a href="settings.html">Scenario 6: Update Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Custom Page Navigation</h2>
|
||||
<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>
|
||||
|
||||
<div id="reportcustompagenav" class="powerbi-container"></div>
|
||||
|
||||
<div class="reportpageslist">
|
||||
<button type="button" id="prevbutton" class="reportpageslist__previous btn btn-primary">< Prev</button>
|
||||
<div id="reportpagesbuttons" class="reportpageslist__pages">
|
||||
</div>
|
||||
<button type="button" id="cyclebutton" class="reportpageslist__cycle btn btn-warning">Cycle</button>
|
||||
<button type="button" id="nextbutton" class="reportpageslist__next btn btn-primary">Next ></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/es6-promise/es6-promise.js"></script>
|
||||
<script src="bower_components/fetch/fetch.js"></script>
|
||||
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
|
||||
|
||||
<script src="app/pagenavigation.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>Power BI - Sample - Client - JavaScript</title>
|
||||
<base path="/" />
|
||||
|
||||
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
|
||||
<link rel="stylesheet" href="styles/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Power BI - Sample - Client - Javascript</h1>
|
||||
<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>
|
||||
|
||||
<h2>Scenarios:</h2>
|
||||
<ul id="navigation" class="nav nav-pills">
|
||||
<li id="pageLinkStatic" class=""><a href="index.html">Scenario 1: Static Embed</a></li>
|
||||
<li id="pageLinkDynamic" class=""><a href="dynamic.html">Scenario 2: Dynamic Embed</a></li>
|
||||
<li id="pageLinkPageNav" class=""><a href="pagenavigation.html">Scenario 3: Custom Page Navigation</a></li>
|
||||
<li id="pageLinkFilters" class=""><a href="filters.html">Scenario 4: Custom Filter Pane</a></li>
|
||||
<li id="pageLinkDefaults" class=""><a href="defaults.html">Scenario 5: Default Page and/or Filter</a></li>
|
||||
<li id="pageLinkSettings" class="active"><a href="settings.html">Scenario 6: Update Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<h2>Update Settings</h2>
|
||||
<p>Change visibility of filter pane or page navigation dynamically</p>
|
||||
|
||||
<div id="updatesettingsreport" class="powerbi-container"></div>
|
||||
|
||||
<div>
|
||||
<br />
|
||||
<button type="button" class="btn btn-primary" id="toggleFilterPane">Toggle Filter Pane</button>
|
||||
<button type="button" class="btn btn-primary" id="toggleNavContentPane">Toggle Page Navigation</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/es6-promise/es6-promise.js"></script>
|
||||
<script src="bower_components/fetch/fetch.js"></script>
|
||||
<script src="bower_components/powerbi-client/dist/powerbi.js"></script>
|
||||
|
||||
<script src="app/settings.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче