Using doPortletMode to handle portlet mode change on client side

In client-side aggregation, you can provide an event handler for changes of portlet mode and portlet window state. This handler gets called when a mode change or a window state change is triggered.

The Infocenter for WebSphere Portal has Changing portlet mode and window state on the client side document that describes how you can handle the portlet mode change on the client side

Note: This function is currently only supported in the portal CSA theme and the CSA skin. You can adapt the CSA theme and skin to write your own custom themes and skins to support this feature.

The return value of your handler determines whether or not the default action is executed:

• A return value of true allows execution of the default action, in this case the portlet mode or window state change.


• A return value of false cancels the default action.

This allows the portlet to handle these changes entirely on the client, with no server interaction.

I tried adding JavaScript function as described in the Infocenter in my portlet but that function never gets called.

function doPortletMode( portletMode, div ){
 console.log("Entering namespace specific doPortletMode ");
 var retVal = true;
    if ( portletMode == ibm.portal.portlet.PortletMode.EDIT) {
      div.innerHTML = "
Edit Mode from client side 
";
      retVal = false;
    }
 console.log("Exiting namespace specific doPortletMode ");
 return retVal;
}

THen i looked the ibmCSA.js to find out what is it looking for and it appears that it is looking for PC_<%=portletWindowID%>_doPortletMode function name so i made change in my portlet to create function like this

function PC_<%=portletWindowID%>_doPortletMode( portletMode, div ){
 console.log("Entering PC_WindowIdspecific doPortletMode ");
 var retVal = true;
    if ( portletMode == ibm.portal.portlet.PortletMode.EDIT) {
      div.innerHTML = "
Edit Mode from client side 
";
      retVal = false;
    }
 console.log("Exiting PC_WindowIdspecific doPortletMode ");
 return retVal;
}

After this change i could see that function was getting called when i clicked on personalized but the div which i am changing in my code is hidden so even though the setting of innerHTML works user does not see anything.

I made change to set div.style.display=""; after setting innerHTML and now i can see that the innerHTML that i am setting gets displayed to the user but problem is when is that when i exit back to view mode it does not hide the div