Show TOC

Procedure documentationImplementing the Source and Target Components Locate this document in the navigation structure

 

The following section guides you through the implementation of server-side and client-side functionality of the source and target components:

  • Server side: business logic and data processing

  • Client side: Enterprise Portal Client Framework (EPCF) events to pass data

Procedure

Implementing the Source

  1. For the source iView, create a portal component and a JavaScript file.

  2. In the doContent() function of the component, create a variable to hold the iView ID:

    Example Example

    1. String fullComponentID = request.getComponentContext().getContextName();
String iviewID = fullComponentID.substring(fullComponentID.lastIndexOf('/') + 1); 
response.write("<SCRIPT language ='JavaScript'> var MashupHelloWorldPRT_Source_ID = '" + iviewID + "'</SCRIPT>");
    End of the code.

    Note Note

    We recommend using a unique name for the variable to ensure that it is not overridden by a variable with the same name in another iView, when both iViews are embedded on a page.

    End of the note.

  3. In the JavaScript file, at the point where you need to pass data, use the iView ID, received from the server side, and the port name to populate the eventData object of the Mashup API. Use this object to raise an event.

    Example Example

    1. if(EPCM.getSAPTop().MashupAPI != undefined){
	var data = document.getElementById('sayHelloWorld').value;

	// Receive new EventData object from MashupAPI
	var eventData = EPCM.getSAPTop().MashupAPI.getEventData();

	// Ports and parameters should match the port definition in ports.xml
	eventData.setID(MashupHelloWorldPRT_Source_ID);
	eventData.setPortID("p1");
	eventData.addData("saying", data);
	eventData.addData("whoami", "Mr. Smith");

	// Raise EPCM mashSourceEvent in com.sap.portal.mashup namespace, as defined by the API
	EPCM.raiseEvent("com.sap.portal.mashup", "mashSourceEvent", eventData.toString());
}
    End of the code.
Implementing the Target

  1. For the target iView, create a portal component and a JavaScript file.

  2. In the doContent() function of the component, create a variable to hold the iView ID:

    Example Example

    1. String fullComponentID = request.getComponentContext().getContextName();
String iviewID = fullComponentID.substring(fullComponentID.lastIndexOf('/') + 1); 
response.write("<SCRIPT language ='JavaScript'> var MashupHelloWorldPRT_Target_ID = '" + iviewID + "'</SCRIPT>");
    End of the code.

  3. In the event handler, implement any logic required to process the received input and display the target component accordingly. For example:

    Example Example

    1. function eventHandlerForPort_t1(eventData){  
// Read data from event 
var data = eval("(" + eventData.dataObject + ")");  

// Read parameter 'message' defined in ports.xml for port t1  
var message = data.message;      	  

// Display received message as label  
document.getElementById('mashup_message_viewer').value = message;
}
    End of the code.

  4. In the target JavaScript file, subscribe to the source event:

    Example Example

    1. // Subscribe to source event using MashupHelloWorldPRT_Target_ID var defined in target component
// Use eventHandlerForPort_t1 function to process source event
// Port should match port definition in ports.xml
// Event name should be iViewID + "_" + portID
if(MashupHelloWorldPRT_Target_ID != "undefined"){
	EPCM.subscribeEvent("com.sap.portal.mashup", MashupHelloWorldPRT_Target_ID + "_" + "t1", eventHandlerForPort_t1);
}
    End of the code.