Show TOC

Procedure documentationEnabling Connections Between Content Items in a Page Locate this document in the navigation structure

 

You can enhance Web Page Composer by enabling connections between iViews running on the same page. This is also referred to by the term “mashups”. During page editing, these connections can be configured to pass data from one iView to another, so that their behavior can change according to this data.

As a first step, you need to determine which data can be passed from or to your iViews. Then, you define the respective output and input ports and parameters, through which the iViews can pass data.

An iView can have both input and output ports, thus serving both as a source and as a target. For each iView, you can define multiple ports, and multiple parameters for each port.

Procedure

The following procedure guides you through the steps necessary to implement the mashup capabilities. In the following example, the source iView passes a message entered by the user to the target iView, which displays this message.

Defining the Ports and Parameters

In your portal application project, create a ports.xml file in the same folder as portalapp.xml, and define ports and parameters. For example:

Syntax Syntax

  1. <?xml version="1.0" encoding="UTF-8"?>
<application  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="ports_def.xsd">
<component name="Source" >
<port id="p1" direction="OUT" label="HelloWorld" description="HelloWorld">
	<parameters>
		<parameter id="saying" description="Say Hello" label="World">
		<tags>
			<tag value="Message" category="INFO" technical="true"/>
		</tags> 
		</parameter>
		<parameter id="whoami" description="Author" label="Author">		
		</parameter>
	</parameters>
</port>
</component>
<component name="Target" >
	<port id="t1" direction="IN" label="Message" description="Show message">
	<parameters>
		<parameter id="message" description="Message" label="Message">	
		<tags>
			<tag value="Text" category="Data" technical="true"/>
		</tags>						  					  
		</parameter>
	</parameters>
</port>
</component>	
</application>
End of the code.
More Information