Terry Yang

December 2, 2015 4 minute read

Request Dispatcher SDK – In-frame(opendoc) jump and ds/html wrapper interaction

/* Download Address is in the below of this blog */

[Introduction]

Request Dispatcher SDK is a component for the user who uses an HTML as a wrapper/portal to achieve the interaction between Design Studio dashboard and outer HTML framework.

This SDK component is easy to use. What the dashboard designer should know is only the API/method signature the javascript in the TOP-level frame HTML offered (Because this component always calls window.top.methondName() method). Native methods of window objects is also supported.

[System Overview]

This component is compiled by SDK 1.5 and working in DS 1.6. No test in the DS version under 1.5.

[Scenario]

The idea of this component is driven from the our customer’s request: A main webpage (HTML+javascript based) with navigation panel and dashboard panel. Dashboard holds in an iframe. When user click certain area on dashboards to open a new dashboard via opendoc, selected item in navigation menu should be changed accordingly and the new dashboard should be opened inside the frame.

The interactions between dashboard and outer frame are:

1. Open new dashboard inside the iframe, not open new window. (by method window.open(“opendoc”,”_self”))

2. Update selected item in navigation panel. (by a javascript method)

[Instructions]

After installation, there will be a new component group named “SDK Connectivity” and a component named “Request Dispatcher”.

Special properties opened for this components are:

1. Configuration->API Name: string, the method name;

2. Configuration->API Paramenter List: string, json array style. For number parameter, put number only. For string parameter, put string with double quotation marks (single quotation marks invalid);

3. Display->Visibility: boolean. To set if the component is visible at runtime. Note: please do not use “Visible” property under “General” otherwise the API this component exposed will not work anymore.

Example

A method signature named updateMenu(1,”itemSel”):

API Name:updateMenu

API Paramenter List:[1,”itemSel”]

Setter and Getter APIs are exposed in this component as well so that the methods can be called during runtime.

DISPATCHER_1.setAPI(string newAPI) — set API name

DISPATCHER_1.getAPI() — get API name

DISPATCHER_1.setParaList(string newParaList) — set API Parameter List

DISPATCHER_1.getParaList() — get Parameter List

DISPATCHER_1.sendRequest() should be invoked at the end of the script to trigger the method.

A typical usage in Script Editor is (take On Click event of a button as an example):

In this way, when user clicks the button, dashboard will call updateText(“Button 1 Clicked”).(Click pic to see the animation)

This demo is a html webpage with a javascript:


function updateText(newText)
{
    document.getElementById('textToChange').innerHTML=newText;
}

When I click Button 1, then the method updateText(“Button 1 Clicked”) is invoked and the text in the upper corner of the page will change to “Button 1 Clicked”.

When no such method exists in top-level frame, an error will throw

[Limitations]

1. If you would like to use this component to achieve the interaction between dashboard and wrapper webpage, please always deploy the website with the same web application as BIP to guarantee the domains of the wrapper webpage and the dashboard are the same. Cross-domain promblem always be there by design. Otherwise you’ll see the following error:

2. For security reason, this component does not support more than one level object (i.e. chage.text.changeText()). This component always calls the method window.top.methodName(), so in API name property, only “methodName” is supported. Moreover, code snippet is also forbidden as API name.

[Use Cases]

1. Interaction between top-level wrapper and dashboard:

In my previous example, I have shown how to achieve this requirement. Please always bear in mind that this requirement requests the same domain of webpage wrapper and BIP.

2. In-frame open of new dashboard:

Natural API Design Studio provided to open new dashboard is APPLICATION.openNewWindow(newUrl) which always opens new dashboard in new browser window. Sometimes this kind of jump is not really good especially for mobile app (openNewWindow is not supported). By using this component, it is easy to resolve this issue.

API Name: open

API Parameter List:[“opendoc URL”,”_self”]

The final result is like this (Click pic to see the animation):

However, there still exists a problem that the new dashboard will open in the self browser, not the self frame. So if you test this function in BI Launchpad, you’ll see after clicking the button, the whole webpage will change to new dashboard, not the old dashboard frame.

This inside-frame jump is perfect for mobile app and the scenario only using opendocument.

[Summary]

1. This component is to achieve the interaction between self-developed HTML wrapper and dashboard. Open new dashboard in self page also matches the goal of this component.

2. Cross-domain issue will not be avoid by using this component. Please keep everything under the same domain.

3. open(“opendoc URL”,”_self”) will open new dashboard in the root frame so in BI Launchpad, new dashboard will cover the BI Launchpad. This method is working perfect under mobile app or only opendoc scenario. If in-frame jump is also necessary in BI Launchpad, please feel free to leave comments.

Request Dispatcher SDK – In-frame(opendoc) jump and ds/html wrapper interaction

Assigned Tags