WebSphere Portal Client Side API - Working with preferences

This is sample of how you can add, update, delete and read portlet preferences on the client side

<%@page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" session="false"%>
<%@taglib uri="http://java.sun.com/portlet" prefix="portlet"%>
<%@taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.1/portlet-client-model" prefix="portlet-client-model"%>
<%@taglib uri="http://java.sun.com/portlet" prefix="portletx"%>
<portlet-client-model:init>
 <portlet-client-model:require module="ibm.portal.xml.*" />
 <portlet-client-model:require module="ibm.portal.portlet.*" />
</portlet-client-model:init>
<portlet:defineObjects />
<script>
    
    _portletWindow = new ibm.portal.portlet.PortletWindow("<%=portletWindowID%>");
    function handleReadPreference(portletWindow, status, portletPrefs) { 
        if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
            console.log("Preferences.getValue()\n"+portletPrefs.getValue("testPref"));
            var prefs = portletPrefs.getMap();
            var mapStr = "Preferences.getMap()\number of preferences: "+prefs.length + "\n";
            for (var i=0; i<prefs.length; i++) {
                mapStr += i+" - "+prefs[i].name+" - "+prefs[i].values+" - "+prefs[i].readonly + "\n";
            }
            console.log(mapStr);
        }
        else { console.log("error loading feed"); }
    }
    function listPreferences(){
     console.log('Entering test.listPreferences()');
     _portletWindow.getPortletPreferences(handleReadPreference);
     console.log('Exiting test.listPreferences()');
    }
   
    function handleAddPreference(portletWindow, status, portletPrefs){
     if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
      portletPrefs.setValue('testPref','testPrefValue');
      //Print the modified preferences on console using the handleReadPreference
      _portletWindow.setPortletPreferences(portletPrefs,handleReadPreference);
     } else { console.log("error loading feed"); }
    }
    
    function addPreference(){
     console.log('Entering test.addPreference()');
     _portletWindow.getPortletPreferences(handleAddPreference);
     console.log('Entering test.addPreference()');
    }

    function handleDeletePreference(portletWindow, status, portletPrefs){
     if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
      portletPrefs.reset('testPref');
      //Print the modified preferences on console using the handleReadPreference
      _portletWindow.setPortletPreferences(portletPrefs,handleReadPreference);
     } else { console.log("error loading feed"); }
    }
    
    function deletePreference(){
     console.log('Entering test.deletePreference()');
     _portletWindow.getPortletPreferences(handleDeletePreference);
     console.log('Entering test.deletePreference()');
    }
    function handleUpdatePreference(portletWindow, status, portletPrefs){
     if (status==ibm.portal.portlet.PortletWindow.STATUS_OK) {
      portletPrefs.setValue('testPref','testUpdatedValue');
      //Print the modified preferences on console using the handleReadPreference
      _portletWindow.setPortletPreferences(portletPrefs,handleReadPreference);
     } else { console.log("error loading feed"); }
    }
    function updatePreference(){
     console.log('Entering test.updatePreference()');
     _portletWindow.getPortletPreferences(handleUpdatePreference);
     console.log('Entering test.updatePreference()');
    }
</script>
<p>This is sample preference</p>
<a href='<portlet:actionURL/> '>Set Preference</a>
<table>
 <tr>
  <td>
   <input type="button" onclick='javascript:listPreferences()' name="Read" value="Read"/>
  </td>
 </tr>
  <tr>
  <td>
   <input type="button" onclick='javascript:addPreference()' name="Add" value="Add"/>

  </td>
 </tr> 
  <tr>
  <td>
   <input type="button" onclick='javascript:updatePreference()' name="Update" value="Update"/>
  </td>
 </tr> 
  <tr>
  <td>
   <input type="button" onclick='javascript:deletePreference()' name="Delete" value="Delete"/>
  </td>
 </tr> 
</table>
<p></p>