Customize elements using JSP

 

+

Search Tips   |   Advanced Search

 

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. We 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 within the...

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

...directory of the IWWCM server. The JSP page may also need to be stored in the client war directory of the servlet or portlet that calls the JSP if using the Web Content Management API.

 

Custom selection list example

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.app.ui.portlet.widget.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mysubmit");
    String fvalue = (String)customItem.getFieldValue();
%>

<SELECT name='<%=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.all['<%=customItem.getFieldName()%>_mycustom'].selectedIndex;

if (selIndex <= 0)
{
    alert("Please select value for mytext");
    return false;
}
document.all["<%=customItem.getFieldName()%>"].value = 
document.all['<%=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.app.ui.portlet.widget.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mydatesubmit");
    String fvalue = (String)customItem.getFieldValue();
%>

<SELECT name='<%=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.all['<%=customItem.getFieldName()%>_mycustomdate'].selectedIndex;

document.all["<%=customItem.getFieldName()%>"].value = 
document.all['<%=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.app.ui.portlet.widget.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("mynumbersubmit");
    String fvalue = (String)customItem.getFieldValue();
%>

<SELECT name='<%=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.all['<%=customItem.getFieldName()%>_mycustomnumber'].selectedIndex;


document.all["<%=customItem.getFieldName()%>"].value = 
document.all['<%=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.app.ui.portlet.widget.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("myoptionsubmit");
    String fvalue = (String)customItem.getFieldValue();
%>

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

<INPUT name='<%=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.app.ui.portlet.widget.CustomItemBean" %>

<portletAPI:init />


<% 
    CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean"); 
    customItem.setSubmitFunctionName("myusersubmit");
    String fvalue = (String)customItem.getFieldValue();
%>

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

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

 

Parent Topic

Specify default content settings

 

Previous topic

Define display settings of fields and elements

 

---