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.

Author: Matt Mazzola

demo/app/app.js

@@ -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);
+          });
+      }
+    });
+});

demo/app/defaults.js

@@ -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);
+              });
+          });
+      }
+    });
+});