Display XPages as iWidgets in fullpage Mode in Connections

Widget.xml (e.g. stored as file resource):

<iw:iwidget name="WidgetName" id="WidgetId" 
	xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget" 
	iScope="xspScopeClass" allowInstanceContent="false" 
	title="Widget Title" supportedModes="view fullpage">
 	<iw:resource 
 		uri="http://openntf.org/domjs/dojo-1.4.3/ibm/xsp/widget/layout/xspScopeClass.js"/>
	<iw:content mode="view">
		<![CDATA[ 
<iframe id="_IWID_xspFrame_view" name="_IWID_xspFrame_view" 
	frameborder="0" marginheight="0" marginwidth="0" 
	width="100%" height="385" scrolling="no"></iframe>
<script>
var xspc__IWID_view={
   	xspComponentId: "_IWID_",
   	xspMode: "view",
   	xspProxyMode: "",
   	xspRunningContext: "iWidget",
   	_xspUrl: "http://openntf.org/Widgets.nsf/View.xsp"
}
</script>
<form id="_IWID_xspForm_view" name="_IWID_xspForm_view" 
	method="POST" target="_IWID_xspFrame_view" 
	style="display:none">
	<input type="hidden" name="xspComponentId" value="">
	<input type="hidden" name="xspMode" value="">
	<input type="hidden" name="xspProxyMode" value="">
	<input type="hidden" name="xspProxyUrl" value="">
	<input type="hidden" name="xspRunningContext" value="">
	<input type="hidden" name="xspTimeZone" value="">
	<input type="hidden" name="_xspUrl" value="">
	<input type="hidden" name="xspParameters" value="">
</form>
		]]>
	</iw:content>
    <iw:content mode="fullpage">
		<![CDATA[ 
<iframe id="_IWID_xspFrame_view" name="_IWID_xspFrame_view" 
	frameborder="0" marginheight="0" marginwidth="0" 
	width="100%" scrolling="no"></iframe>
<script>
var xspc__IWID_view={
   	xspComponentId: "_IWID_",
   	xspMode: "fullpage",
   	xspProxyMode: "",
   	xspRunningContext: "iWidget",
   	_xspUrl: "http://www.openntf.org/Widgets.nsf/Fullpage.xsp"
};
window.addEventListener( "message",
	function (event) {
		console.log('Received event: ', event.data);
  		var xpageiFrame = document.getElementById("_IWID_xspFrame_view");
		xpageiFrame.style.height = event.data;
	}, false);
</script>
<form id="_IWID_xspForm_view" name="_IWID_xspForm_view" 
	method="POST" target="_IWID_xspFrame_view" 
	style="display:none">
	<input type="hidden" name="xspComponentId" value="">
	<input type="hidden" name="xspMode" value="">
	<input type="hidden" name="xspProxyMode" value="">
	<input type="hidden" name="xspProxyUrl" value="">
	<input type="hidden" name="xspRunningContext" value="">
	<input type="hidden" name="xspTimeZone" value="">
	<input type="hidden" name="_xspUrl" value="">
	<input type="hidden" name="xspParameters" value="">
</form>
		]]>
	</iw:content>
</iw:iwidget>

To be added to XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<!-- add your XPages code here -->
	<xp:scriptBlock type="text/javascript">
		<xp:this.value>
			<![CDATA[	
var sendEvent = function() { 
	var height = document.body.scrollHeight;
	parent.postMessage(height + "px", "*");
};			
window.onresize = function(){
	sendEvent();
};
			]]>
		</xp:this.value>
	</xp:scriptBlock>
	<xp:eventHandler event="onClientLoad" submit="true"
		refreshMode="norefresh">
		<xp:this.script>
			<![CDATA[		
sendEvent();
setTimeout(sendEvent, 500);
			]]>
		</xp:this.script>
	</xp:eventHandler>
</xp:view>

To be added in domjs/dojo-1.4.3/ibm/xsp/widget/layout/xspScopeClass.js:

onfullpage: function sc_ov() {
 	this.displayMode(this.iContext.constants.mode.VIEW);
},





This snippet shows how to display XPages as iWidgets in fullpage mode in IBM Connections. See http://heidloff.net/home.nsf/dx/09.05.2012091955NHEALZ.htm for details.

The snippet solves two issues:
1. In Domino 8.5.3 neither Designer, nor the XPages runtime can handle the fullpage mode out of the box
2. Since the XPage is displayed in an iFrame extra code needs to be written to handle the automatic resizing

Here is a short video showing it in action: heidloff.net/home.nsf/dx/ResizeXPageIWidget.mov/$file/ResizeXPageIWidget.mov

I've tested this in Domino 8.5.3, Connections 3.0.1 and the latest versions of FF, Chrome and Safari.

XML
Niklas Heidloff
May 10, 2012 1:46 AM
Rating
304

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



No comments yetLogin first to comment...