Customize elements using JSP

A "custom JSP" field is available on some element types when added to an authoring template. Use this to reference a JSP file to use instead of the element's 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.

The JSP page must be stored in the WAR file directory for the Authoring portlet: PortalServer_root/installedApps/WCM_Authoring_UI_PA_xxxxxxx.ear/PA_xxxxxxx.war/jsp/html, where xxxxxxx is unique to your installation.

The JSP page may also need to be stored in the client war directory of the servlet or portlet that calls the JSP, such as when using the authoring tool element, or if using the Web Content Management API.

For example, if displaying custom fields in content that is opened using the edit button on an authoring tool, you would need to also save the custom field JSP in the WAR file directory for the local rendering portlet.

Custom selection list example with authoring template property 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();
%>

<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 selection field example

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

<%@ 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();
%>

<SELECT id='<%=customItem.getFieldName()%>_mycustomdate'  >
<OPTION></OPTION>
<OPTION 
<% if (((String)fvalue).compareTo("July 4, 2005") == 0)  {%> SELECTED
<% } %>
>July 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 selection list 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();
%>

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

Text entry field example

This example is used to create a field to enter text in.

<%@ 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();
%>

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

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

User name entry field 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();
%>

<script language='Javascript'> function myusersubmit(){ document.getElementById['<%=customItem.getFieldName()%>'].value =  document.getElementById['<%=customItem.getFieldName()%>_mycustomuser'].value;}
</script>

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









Parent topic:
 Specifying default content settings




Previous topic:
 Defining display settings of fields and elements