Using Cross-origin Resource Sharing in Dundas BI
1. Overview
The goal of this article is to explain the necessary steps to enable and use Cross-origin Resource Sharing (CORS) in Dundas BI. This feature will allow a web application that has embedded Dundas BI to communicate with Dundas BI
2. Prerequisites
- Follow the Dundas BI Viewer Integration Sample
- Dundas BI Admin privileges
3. Setup
3.1. Add origins (domains) to the Admin Application Configuration
Open the Admin section of Dundas BI by clicking on the Gear Icon on the left hand side of the application.
Under Setup select Config.
Change the Setting scope drop down from Effective to Global.
Under the Web Application Category there is a setting called CORS (Cross-Domain) Origins.
In this text field you can enter the domains that will be communicating with Dundas BI. You can hover over the text field to get a summary and examples.
Place the domain that will be hosting the Dundas BI iframe into this text field.
save changes and exit the Admin menu.
3.2. Create a new Dashboard
On a new Dashboard we will need a chart with the Script Name chart1, and a label with the Script Name label1.
For this example we will be altering the text in the label and unhiding the chart. This will be done by sending a script from the host site into the iframe containing Dundas BI.
In order to unhide the chart, we need to hide it first.
Check the Hidden property of the chart, which is located in the Layout section.
In the Dashboard's properties, copy the dashboards ID from the Main section.
Now, lets check in the dashboard and switch over to Visual studio.
In Visual Studio, open the Constants.cs file and replace the DundasBIDashboardId value with the new Dashboard ID.
3.3. Add the CORS JavaScript
For simplicity sake, we will be adding the CORS example in the Default.aspx file.
Reference a jQuery library in your head tag.
Create a script tag in the head tag and add this script to it.
$(document).ready(function () {
// Synchronous Example
var abc = $("#iFrame").get(0);
$(abc).load(function () {
// Since the iframe will have loaded before the dashboard has,
// we need to pass in a script that waits for the dashboard to load.
// You can do this by storing the function in dundas.context.ready()
abc.contentWindow.postMessage({
"isAsync": false,
"script": "\n\
window.dundas.context.ready(function(){\n\
var myView = dundas.context.baseViewService.currentView;\n\
var myLabel = myView.getAdapters().toEnumerable().first(function(a){return a.name === \"label1\"});\n\
var myChart = myView.getAdapters().toEnumerable().first(function(a){return a.name === \"chart1\"});\n\
myChart.hidden = false;\n\
myLabel.labelText = \"There it is!!!\";\n\
});\n\
"
}, "*");
});
});
The code is simply waiting for the dashboard to load, and when it has finished loading, the function will store the chart and label objects, and then modify their properties.
The \n\ is required for each new line in the string.
3.4. Other CORS JavaScript Examples
$(document).ready(function() {
// Hook up to receive window postMessage calls.
$(window).bind("message", function(e) {
var result = e.originalEvent.data;
// result will be ‘hi’
});
// Synchronous Example
var abc = $("#iFrame").get(0);
$(abc).load(function() {
abc.contentWindow.postMessage({
"isAsync": false,
"script": " console.log(e);
window.dundas.context.baseViewService.viewOptions = dundas.ViewOptions.VIEW_ONLY;
window.dundas.context.updateViewFromViewOptions();
return 'hi';
"
}, "*");
});
});
$(document).ready(function() {
// Hook up to receive window postMessage calls.
$(window).bind("message", function(e) {
var result = e.originalEvent.data;
// result will be ‘hi’
});
// Asynchronous Example
var abc = $("#iFrame").get(0);
$(abc).load(function() {
abc.contentWindow.postMessage({
"isAsync": true,
"script": " console.log(e);
window.dundas.context.baseViewService.viewOptions = dundas.ViewOptions.VIEW_ONLY;
window.dundas.context.updateViewFromViewOptions();
var result = new $.Deferred();
window.setTimeout(function() {
result.resolve('hi')
}, 500);
return result.promise();
"
}, "*");
});
// Note that ‘e’ is the original message event given back to the method, so they can also use e.source.
// postMessage(..) to communicate with themselves, in addition to the return value if they desire.
});
$(document).ready(function() {
// REST WebAPI example
var def = $.ajax("http://localhost:[port]/api/dashboard/[dashboardId]?sessionId=[sessionId]");
def.done(function(dashboard) {
// perform action here.
});
// Note the ‘dashboard’ object that the method returns is not a Dundas API object
// It won’t have the standard methods
});
4. Publish and Test Sample
You can now build and publish the project to your IIS server.
You should now see the new label text and the chart should be visible.
5. Troubleshooting
Use your browsers developer tools to view the console for errors.
If everything went well, in the console you should see "Running window message received from origin '[domain]' which was in the accepted list. If this was not expected, this might be an XSS attack."
If you see "Attempt to post message from origin '[domain]', but this is not in the allowed list from configuration. Post ignored." you probably made an error in the admin config.