External Content Properties: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
Line 7: Line 7:
* '''External Content URL''': The URL of the external page you want to embed in QPR MobileDashboard. You can also use a relative path (e.g. "/examples/test.html"), if the page you want to embed is accessible by the same protocol, host, and port as QPR MobileDashboard.
* '''External Content URL''': The URL of the external page you want to embed in QPR MobileDashboard. You can also use a relative path (e.g. "/examples/test.html"), if the page you want to embed is accessible by the same protocol, host, and port as QPR MobileDashboard.


== Accessing context variables in external content webpages ==
== Accessing context variables in the external content webpage ==
[[Context#Effective_Context_and_Context_Inheritance|Context variables]] in the session context can be get and set in the external content webpage using the following javascript functions:
Session [[Context#Effective_Context_and_Context_Inheritance|context variables]] can be get and set in the external content webpage using following javascript functions:
* '''getSessionVariable(variableName)''' where variableName is the name of the read session context variable
* '''getSessionVariable(variableName)''' where variableName is the name of the read session context variable
* '''setSessionVariable(variableName, variableValue)''' where variableName is the name of the set session context variable and variableValue is its value (the value must be string)
* '''setSessionVariable(variableName, variableValue)''' where variableName is the name of the set session context variable and variableValue is its value (the value must be string)


Following code example demonstrates how the context variables can be set and get through '''window.parent''' object:
Following code example shows how the context variables can be set and get through the '''window.parent''' object:
<pre>
<pre>
window.parent.setSessionVariable("variable1", "value1");
window.parent.setSessionVariable("variable1", "value1");
Line 18: Line 18:
</pre>
</pre>


Note that the external webpage must be in the same server and port, so that the javascript variables can be accessed. This is because of web browsers security restrictions (same origin policy).
The external webpage must be referenced using the same server name and port, so that these javascript functions can be accessed. This is because of web browsers security features ([https://en.wikipedia.org/wiki/Same-origin_policy same origin policy]).


There is also a text page available in QPR MobileDashboard installation where the functioning of the variables can be tested: '''http(s)://SERVERNAME:8080/mobiledash/examples/test.html'''
There is a test page available with the QPR MobileDashboard installation where the functioning of these variables can be tested: '''http(s)://SERVERNAME:8080/mobiledash/examples/test.html'''


Note that these functions read only the session context - not the external presentation object's effective context. To access the external presentation object's effective context, you can pass context variable values in the iFrame url. Example url:
These functions read only the session context - not the external presentation object's effective context. To access the external presentation object's effective context, you can pass context variable values in the iFrame url using the '''{#variableName}''' syntax. Example:


'''<nowiki>http(s)://SERVERNAME/ExternalPresentationObjects/ExternalPresentationObject1#?variable1={#variable1}&variable2={#variable2}</nowiki>'''
'''<nowiki>http(s)://SERVERNAME/ExternalPresentationObjects/ExternalPresentationObject1#?variable1={#variable1}&variable2={#variable2}</nowiki>'''


If the variables are after the hashtag (#) sign, the whole external web page is not updated. Url changes can be monitored through '''onhashchange''' event of the '''window''' object. Example:
If the variable references appear after the hash mark (#), the external web page is not refreshed when the context variables values change. In the external web page, url changes can be monitored through '''onhashchange''' javascript event of the '''window''' object. The following example registers a function that is called when the url changes:
<pre>
<pre>
window.onhashchange = function() {
window.onhashchange = function() {

Revision as of 18:14, 16 April 2017

With the External Content presentation object you can show content from some other website or web portal. The External Content presentation object uses html's iframe element to embed the websites. Using the External Content presentation object enables integrating multiple Web applications into a single UI.

Properties Tab

The following properties can be set on the Properties tab:

  • Name: Name of the External Content presentation object.
  • Description: Description for the External Content presentation object.
  • External Content URL: The URL of the external page you want to embed in QPR MobileDashboard. You can also use a relative path (e.g. "/examples/test.html"), if the page you want to embed is accessible by the same protocol, host, and port as QPR MobileDashboard.

Accessing context variables in the external content webpage

Session context variables can be get and set in the external content webpage using following javascript functions:

  • getSessionVariable(variableName) where variableName is the name of the read session context variable
  • setSessionVariable(variableName, variableValue) where variableName is the name of the set session context variable and variableValue is its value (the value must be string)

Following code example shows how the context variables can be set and get through the window.parent object:

window.parent.setSessionVariable("variable1", "value1");
var variable1 = window.parent.getSessionVariable("variable1");

The external webpage must be referenced using the same server name and port, so that these javascript functions can be accessed. This is because of web browsers security features (same origin policy).

There is a test page available with the QPR MobileDashboard installation where the functioning of these variables can be tested: http(s)://SERVERNAME:8080/mobiledash/examples/test.html

These functions read only the session context - not the external presentation object's effective context. To access the external presentation object's effective context, you can pass context variable values in the iFrame url using the {#variableName} syntax. Example:

http(s)://SERVERNAME/ExternalPresentationObjects/ExternalPresentationObject1#?variable1={#variable1}&variable2={#variable2}

If the variable references appear after the hash mark (#), the external web page is not refreshed when the context variables values change. In the external web page, url changes can be monitored through onhashchange javascript event of the window object. The following example registers a function that is called when the url changes:

window.onhashchange = function() {
  var iFrameUrl = window.location.href;
  var listOfParameters = iFrameUrl.substr(iFrameUrl.indexOf("#") + 1));
}

Web browser security considerations

Some websites prevent themselves to be embedded into other websites using iFrame. In those cases, the external content presentation object will be left blank (in Chrome and Firefox) or there may be an error message "This content cannot be displayed in a frame" (in Internet Explorer). The way to workaround the issue is to have X-Frame-Options HTTP response header changed in the embedded website (more information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options). Template:MDBTutorialExternalContent