Implementing the Source and Target Components

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:

   Sample Code

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

   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.

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.

   Sample Code

                           
   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());
   }
   
                        

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:

   Sample Code

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

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

   Sample Code

                           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;
   }
                        

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

   Sample Code

                           
   // 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);
   }