Customizing elements using JSP

A "custom JSP" field is available on some element types when added to an authoring template. You use this to reference a JSP file to use instead of the element default view in the user interface. You can write JSP to control the look and feel of an element, and to restrict the values that can be entered into an element.

Storing JSP Files:

JSP files can be located:

within the was_profile_root/installedApps/node-name/wcm.ear/ilwwcm.war directory of your server.
The JSP page is also stored in the client war directory of the local rendering portlet or of the servlet or portlet that calls the JSP, if using the Web Content Manager API. For example, to render a JSP page on a local rendering portlet, you would also need to store a copy of the JSP file under was_profile_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war
within any other web application running on portal. When referencing JSP files in another web application, use the following path: contextPath;jspPath
For example: /wps/customapplication;/jsp/editor.jsp

Custom bean and EditorBean API:

The CustomBean and EditorBean API can be found under com.ibm.workplace.wcm.api.authoring in the Javadoc located under the was_profile_root\installedApps\nodename\wcm.ear\ilwwcm.war\webinterface\ folder.

Referencing jsp files

When referencing a JSP file in the custom JSP field of the element properties view, you can use the following formats.

When located within the ilwwcm.war directory of your server use this format

was_profile_root/installedApps/node-name/wcm.ear/ilwwcm.war

Note: The JSP page is also stored in the client war directory of the local rendering portlet or of the servlet or portlet that calls the JSP, if using the Web Content Manager API. For example, to render a JSP page on a local rendering portlet, you would also need to store a copy of the JSP file under was_profile_root/installedApps/node-name/PA_WCMLocalRendering.ear/ilwwcm-localrende.war

When located within any other web application running on portal

contextPath;jspPath: Specifies an edit mode version of the field where the JSP is located in another application. For example: /wps/customapplication;/jsp/editor.jsp
jspPath: Specifies an edit mode version of the field where the JSP is located in same application as Web Content Manager.
editmode=contextPath;jspPath: Specifies an edit mode version of the field where the JSP is located in another application.
editmode=jspPath: Specifies an edit mode version of the field where the JSP is located in same application as Web Content Manager.
readmode=contextPath;jspPath: Specifies a read mode version of the field where the JSP is located in another application.
readmode=jspPath: Specifies a read mode version of the field where the JSP is located in same application as Web Content Manager.
readmode=contextPath;jspPath,editmode=contextPath;jspPath: Specifies an edit mode and read mode version of the field where the JSPs are located in another application.
readmode=jspPath,editmode=jspPath: Specifies an edit mode and read mode version of the field where the JSPs are located in same application as Web Content Manager.

Text element example

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("myoptionsubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<script language='Javascript'>
function myoptionsubmit()
{
document.getElementById('<%=customItem.getFieldName()%>').value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomoption').value;
}
</script>

<INPUT id='<%=customItem.getFieldName()%>_mycustomoption' value="<%=fvalue%>">

Rich Text element example

<%@ page import="com.ibm.workplace.wcm.app.ui.portlet.widget.EditorBean"%>
<%@ taglib uri="/WEB-INF/tld/wcm.tld" prefix="wcm" %>

<% 
   EditorBean editor = (EditorBean) request.getAttribute("EditorBean");
%>

<script language='Javascript'>
function setHtml(id, html) 
{
    document.getElementById(id + "_rte").value = html;
}

function getHtml(id)
{
     return document.getElementById(id + "_rte").value;
}

function setRichTextValue(theText)
{
    document.getElementById('<%= editor.getName()%>_rte').value = theText;
}
</script>

<textarea  cols="85" rows="15" id="<%= editor.getName() %>_rte"></textarea>

<script type="text/javascript">
   var initialValue = document.getElementById('<%= editor.getHiddenContentFieldName() %>_inithtml').value;
   var editorTextArea = document.getElementById('<%= editor.getName()%>_rte');
   editorTextArea.value = initialValue;

   if (initialisedRTEs != null)
   {
      initialisedRTEs = initialisedRTEs + 1;
   }
</script>

Custom option selection element example with validation

This example is used to create a selection list of predefined options.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mysubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustom'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option1") == 0)  {%>
SELECTED
<% } %>
>Option1</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option2") == 0)  {%>
SELECTED
<% } %>
>Option2</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option3") == 0)  {%>
SELECTED
<% } %>
>Option3</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Option4") == 0)  {%>
SELECTED
<% } %>
>Option4</OPTION>
</SELECT>

<script language='Javascript'>
function mysubmit()
{
	var selIndex=document.getElementById('<%=customItem.getFieldName()%>_mycustom').selectedIndex;
	
	if (selIndex <= 0)
	{
		document.getElementById("<%=customItem.getFieldName()%>").value = "";
	}
	else
	{
		document.getElementById("<%=customItem.getFieldName()%>").value = 
			document.getElementById('<%=customItem.getFieldName()%>_mycustom').options[selIndex].text;
	}
}
</script>

Date element example

This example is used to create a selection list of predefined dates.

Note: Only dates can be selected, not times.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mydatesubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustomdate'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Jul 4, 2005") == 0)  {%>
SELECTED
<% } %>
>Jul 4, 2005</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Aug 15, 2005") == 0)  {%>
SELECTED
<% } %>
>Aug 15, 2005</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Dec 25, 2005") == 0)  {%>
SELECTED
<% } %>
>Dec 25, 2005</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("Jan 26, 2006") == 0)  {%>
SELECTED
<% } %>
>Jan 26, 2006</OPTION>
</SELECT>



<script language='Javascript'>
function mydatesubmit()
{
var selIndex=document.getElementById('<%=customItem.getFieldName()%>_mycustomdate').selectedIndex;

document.getElementById("<%=customItem.getFieldName()%>").value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomdate').options[selIndex].text;
}
</script>

Number element example

This example is used to create a selection list of predefined numbers.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mynumbersubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustomnumber'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("6") == 0)  {%>
SELECTED
<% } %>
>6</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("8.5") == 0)  {%>
SELECTED
<% } %>
>8.5</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("12") == 0)  {%>
SELECTED
<% } %>
>12</OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("15.45") == 0)  {%>
SELECTED
<% } %>
>15.45</OPTION>
</SELECT>



<script language='Javascript'>
function mynumbersubmit()
{
var selIndex=document.getElementById('<%=customItem.getFieldName()%>_mycustomnumber').selectedIndex;


document.getElementById("<%=customItem.getFieldName()%>").value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomnumber').options[selIndex].text;
}
</script>

User selection element example

This example is used to create a field to enter a user name.

<%@ taglib uri="/WEB-INF/tld/portlet.tld" prefix="portletAPI" %>
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = 
    (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("myusersubmit");
    String fvalue = (String)customItem.getFieldValue();
    fvalue = fvalue.replaceAll("\"", "&quot;").replaceAll("\"","&#39;");
%>
<script language='Javascript'>
function myusersubmit()
{
document.getElementById('<%=customItem.getFieldName()%>').value = 
document.getElementById('<%=customItem.getFieldName()%>_mycustomuser').value;
}
</script>

<INPUT id='<%=customItem.getFieldName()%>_mycustomuser' value="<%=fvalue%>">