Difference between revisions of "External Content Properties"

From Mea Wiki
Jump to navigation Jump to search
(306991)
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
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 websites. It enables integrating multiple Web applications into a single UI.
+
External Content presentation object can be used to show content from other webpages in QPR UI, such as from Microsoft Sharepoint or other content management systems. One usecase for the External Content presentation object is that it enables integrating multiple web applications into a single UI.
 +
 
 +
The External Content presentation object uses html ''iframe'' element to embed the content.
  
 
== Properties Tab ==
 
== Properties Tab ==
Line 5: Line 7:
 
* '''Name''': Name of the External Content presentation object.
 
* '''Name''': Name of the External Content presentation object.
 
* '''Description''': Description for 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.
+
* '''External Content URL''': The URL of the external page you want to embed in QPR UI. 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 UI.
 +
 
 +
== Passing Context Variables in Url==
 +
You can pass context variable values in the iframe url using the [[Variable_Tag_in_QPR_UI|variable tags]]. Example:
 +
 
 +
'''<nowiki>http(s)://SERVERNAME/ExternalPresentationObjects/ExternalPresentationObject1#variable1=<#variable1>&variable2=<#variable2></nowiki>'''
 +
 
 +
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>
 +
window.onhashchange = function() {
 +
  var iFrameUrl = window.location.href;
 +
  var listOfParameters = iFrameUrl.substr(iFrameUrl.indexOf("#") + 1));
 +
}
 +
</pre>
  
== Context Tab ==
+
== Accessing Context Variables in the External Webpage ==
On the Context tab, you can define the [[Context|context variables]] for the External Content presentation object. You can also see what context variable values are in effect by selecting the '''Show effective context''' check box.
+
See the [[HTML Properties#Setting Context Variables in JavaScript|setSessionVariable function]] that can be called to change context variables in the external webpage. Note that the external webpage must be linked using the same server name and port as QPR UI, so that these JavaScript functions can be called. This is because of web browsers security features ([https://en.wikipedia.org/wiki/Same-origin_policy same origin policy]).
  
=== Accessing Context Variables in the External Content ===
+
There is a test page available in the QPR UI where the functioning of changing variables can be tested: '''/ui/examples/test.html'''.
The session [[Context#Effective_Context_and_Context_Inheritance|context variables]] and their values are available in the external content pages via the getSessionVariable() javascript function. In addition, the session context variables can be set in the external content pages via the setSessionVariable() javascript function. Check the examples in the http://<Your_Host_Name>:8080/mobiledash/examples/test.html file for using the functions.
 
  
 +
== 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).
 
{{MDBTutorialExternalContent}}
 
{{MDBTutorialExternalContent}}
  
[[Category: QPR MobileDashboard]]
+
[[Category: QPR UI]]

Latest revision as of 14:23, 17 April 2019

External Content presentation object can be used to show content from other webpages in QPR UI, such as from Microsoft Sharepoint or other content management systems. One usecase for the External Content presentation object is that it enables integrating multiple web applications into a single UI.

The External Content presentation object uses html iframe element to embed the content.

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 UI. 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 UI.

Passing Context Variables in Url

You can pass context variable values in the iframe url using the variable tags. 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));
}

Accessing Context Variables in the External Webpage

See the setSessionVariable function that can be called to change context variables in the external webpage. Note that the external webpage must be linked using the same server name and port as QPR UI, so that these JavaScript functions can be called. This is because of web browsers security features (same origin policy).

There is a test page available in the QPR UI where the functioning of changing variables can be tested: /ui/examples/test.html.

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).

Usage Example

  1. Click the External Content presentation object icon.
  2. Click the Properties button on the presentation object to open its properties.
    OpenExternalContentProperties.png
  3. Define the Name, Description, and the External content URL. In the Name and URL fields, you can use context variables by typing in the context variable name in the format "{#contextvariablename}".
  4. After defining these properties, click Close. The web page should now be visible:
    ExternalContent.png