(v24) Pass Your Application's JavaScript to the Client Application Example

Pass Your Application's JavaScript to the Client Application Example

This applies to: Managed Dashboards, Managed Reports

The following is an example of cross-origin resource sharing, where your own application's JavaScript passes JavaScript to run in Symphony's client application embedded within yours in the browser.

For the examples in this section where Symphony is embedded on the page, it is embedded using an inline frame (iFrame). You can also use the embed library and use its runScript method. See the viewer integration sample.

Create a New Dashboard

On a new dashboard, add a chart (with 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 Symphony.

Select the Hidden property of the chart, which is located in the Properties window in the Layout tab.

In the Dashboard's properties, copy the dashboard ID from the Main tab.

Now check in the dashboard, and use as the file ID in your web application that embeds Symphony.

Add the CORS JavaScript

JavaScript like the following could be added to your application/page, which calls postMessage. This particular example assumes a jQuery library reference is included on the page:

$(document).ready(function () { // Synchronous Example var element = $("iframe").get(0); $(element).load(function () { // Since the iframe will have loaded before the dashboard has, // we need to pass in a function that runs when the dashboard is ready. element.contentWindow.postMessage({ "isAsync": false, "script": "\n\ window.dundas.context.ready(function () {\n\ var myView = dundas.context.baseViewService.currentView;\n\ var myLabel = myView.getAdapters().filter(function(a) { return a.name == \"label1\" })[0];\n\ var myChart = myView.getAdapters().filter(function(a) { return a.name == \"chart1\" })[0];\n\ myChart.hidden = false;\n\ myLabel.labelText = \"There it is!!!\";\n\ });\n\ " }, "https://dundas.mysite.com"); }); });

The script sent to the embedded Symphony client application waits for the dashboard to load, then finds and modifies the properties of the chart and label.

The \n\ is required to include the line breaks in the string.

Test Your Sample

Build and publish your project's server-side changes (if applicable).

You should now see the new label text and the chart should be visible.