External Content: Difference between revisions

From QPR ProcessAnalyzer Wiki
Jump to navigation Jump to search
(403760)
No edit summary
 
(23 intermediate revisions by the same user 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 the websites. Using the External Content presentation object enables integrating multiple Web applications into a single UI.
External Content component shows content from other webpages in dashboards. For example Microsoft Sharepoint or other content management systems can be integrated into QPR ProcessAnalyzer. The External Content component uses the HTML ''iframe'' element to embed the content.


== Properties Tab ==
By default, only websites from the same origin than the QPR ProcessAnalyzer server can be embedded. This is due to the Content security policy (CSP) HTTP header (more information: [[QPR_ProcessAnalyzer_Security_Hardening#Added_HTTP_Headers|Security Hardening]]). The CSP HTTP header can be set in the [[Installing_QPR_ProcessAnalyzer_Server#Server_settings_file_(appsettings.json)|appsettings.json file]].
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.


== Accessing session context in the external webpage ==
== External Content Component Settings ==
Session [[Context#Effective_Context_and_Context_Inheritance|context variables]] can be get and set from the external content webpage using following javascript functions:
Following properties can be set on the Properties tab:
* '''getSessionVariable(variableName)''' where following parameter is available:
* '''Name''': Name of the External Content component.
** '''variableName''' is the name of the read session context variable. This parameter is mandatory.
* '''Description''': Description for the External Content component.
* '''setSessionVariable(variableName, variableValue, noNewHistoryEntry)''' where following parameters are available:
* '''External content URL''': The URL of the external page you want to embed. 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.
** '''variableName''' is the name of the set session context variable. This parameter is mandatory.
** '''variableValue''' is its value (the value must be string). This parameter is mandatory.
** '''noNewHistoryEntry''' is a boolean value defining whether to create a new browser history entry of the context variable change. '''true''' defines that no new browser history entry is created. This means that when user click the Back button, it reverts both that context variable change and the latest history entry that existed before the context variable change. The parameter is optional and by default it's '''false'''.


Following code example shows how the context variables can be set and get through the '''window.parent''' object:
== Passing Variables in Url==
<pre>
You can pass context variable values in the iframe url using the variable tags. Example:
window.parent.setSessionVariable("variable1", "value1");
var variable1 = window.parent.getSessionVariable("variable1");
</pre>


The external webpage must be referenced 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]).
'''<nowiki>http(s)://SERVERNAME/ExternalPresentationObjects/ExternalPresentationObject1#variable1=<#variable1>&variable2=<#variable2></nowiki>'''


There is a test page available in the QPR UI where the functioning of these variables can be tested: '''/mobiledash/examples/test.html'''.
== Web Browser Security Considerations ==
 
Some websites prevent themselves to be embedded into other websites using iframe. In those cases, the component will be left blank (in Chrome and Firefox) or there may be an error message "This content cannot be displayed in a frame". 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).
These functions interact only with the session context - not the external presentation object's effective context. To use presentation object's effective context in the external webpage, continue reading to the next chapter.
 
== Passing effective context in the url==
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>'''
 
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>
 
== 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}}
 
[[Category: QPR UI]]

Latest revision as of 15:53, 2 December 2024

External Content component shows content from other webpages in dashboards. For example Microsoft Sharepoint or other content management systems can be integrated into QPR ProcessAnalyzer. The External Content component uses the HTML iframe element to embed the content.

By default, only websites from the same origin than the QPR ProcessAnalyzer server can be embedded. This is due to the Content security policy (CSP) HTTP header (more information: Security Hardening). The CSP HTTP header can be set in the appsettings.json file.

External Content Component Settings

Following properties can be set on the Properties tab:

  • Name: Name of the External Content component.
  • Description: Description for the External Content component.
  • External content URL: The URL of the external page you want to embed. 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.

Passing 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>

Web Browser Security Considerations

Some websites prevent themselves to be embedded into other websites using iframe. In those cases, the component will be left blank (in Chrome and Firefox) or there may be an error message "This content cannot be displayed in a frame". 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).

Retrieved from "https://wiki.onqpr.com/pa/index.php?title=External_Content&oldid=25525"