WebSphere Portal allows you to customize some of the Authoring Template’s elements look-and-feel using “Custom JSP” field and with some creativity, we can fulfil or further enhance our client’s WCM experience.
Naming a few requirements that we have encountered so far:
- “Are you able to display the email’s WCM url in the Authoring Template (refers to the email that is send by WCM Workflow Email Action)?”
- “Can we have a Color picker function like the JSColor (http://jscolor.com) for our sliding banners?”
- “Can we have a dynamic product list where we can sort using drag and drop action?”
- and so on…
Before we start, we need to decide where to store the custom jsp. There are currently 2 ways to call (reference) the custom jsp:
- Method 1: We can store the jsp within PA_WCM_Authoring_UI and PA_WCMLRingPortJSR286 application folders. Then we reference the custom jsp by /jsp/html/xxx.jsp. PA_WCM_Authoring_UI and PA_WCMLRingPortJSR286 can be found at <wp_profile>\installedApps\<cell> (example: C:\IBM\WebSphere\wp_profile\installedApps\WPS80Cell).
- Method 2 (Our Preferred Method): Create a web application to store the jsp and install the application via IBM Application Server console as “WebSphere enterprise applications”. Reference the jsp thru the context path as shown: contextPath;<jsp path> (example: “/MyCustomJSPs;/jsp/xxx.jsp“).This method is easier to maintain and less prone to cumulative fix patches.
Steps to create your own web application container using RAD 9.0:
- Create a new Web Project (File > New > Project > Web Project).
- Select “Basic” Project Templates and “Java EE” as programming model. Click on the “Next” button.
- Select “Web Module” and click on the “Finish” button.
What do you need to know?
In order to fully replicate existing Authoring Template’s behaviour (Read, Edit and Render modes), usually we would create at least 2 custom jsp (for Read and Edit modes). In some rare cases, we usually do not need Render mode to further “massage” the values in Presentation Template.
Below is a draggable Multiple Links example that we have created for one of our clients (I have omit out some of the codes to prevent the post from been draggy):
Step 1: Create AT-MultipleLinks_EditMode.jsp for Edit Mode
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean"%>
<%
String ENTRY_DELIM = "\\<\\<\\<entry\\>\\>\\>";
String VALUE_DELIM = "\\<\\<\\<delim\\>\\>\\>";
CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean");
String fieldName = customItem.getFieldName();
%>
<div class='<%=fieldName%>_related_links'><%
String value = (String) customItem.getFieldValue();
if(!value.equals("")){
// render existing values
String[] entries = value.split(ENTRY_DELIM);
for (int i=0,len=entries.length;i<len;i++){
String[] info = entries[i].split(VALUE_DELIM);
if(info.length==2){%>
<div class="entry">
<div class="row">
<div class="lbl">Description:</div>
<div class="txt"><input type="text" class="lotusText" value="<%= info[0]%>" size="80" /></div>
</div>
<div class="row">
<div class="lbl">Url:</div>
<div class="txt"><input type="text" class="lotusText" value="<%= info[1]%>" size="80" /></div>
</div>
<div class="row">
<div class="lbl"></div>
</div>
</div>
<% }
}
}
// set the javascript method to call when users clicks on the save button
customItem.setSubmitFunctionName(fieldName+"_submit");
%>
</div>
// ... codes been omit out
<script>
<!-- submit method to collect the links' values and insert them to the hidden field
function <%=fieldName%>_submit(){
var values = new Array();
$(".<%=fieldName%>_related_links").find(".entry").each(function(){
var info = $(this).find(".lotusText");
if(info.length==2){
var desc = info.get(0).value;
var url = info.get(1).value;
values.push(desc+"<%=VALUE_DELIM%>"+url);
}
});
$("#<%=fieldName%>").val(values.join("<%=ENTRY_DELIM%>"));
}
</script>
Step 2: Create AT-MultipleLinks_ReadMode.jsp for Read Mode.
The read mode custom jsp is almost the same as edit mode except that it should only contains codes that are sufficient for reading purpose.
<%@ page import="com.ibm.workplace.wcm.api.authoring.CustomItemBean"%>
<%
String ENTRY_DELIM = "\\<\\<\\<entry\\>\\>\\>";
String VALUE_DELIM = "\\<\\<\\<delim\\>\\>\\>";
CustomItemBean customItem = (CustomItemBean) request.getAttribute("CustomItemBean");
String fieldName = customItem.getFieldName();
%>
<div class='<%=fieldName%>_related_links'><%
String value = (String) customItem.getFieldValue();
if(!value.equals("")){
// render existing values
String[] entries = value.split(ENTRY_DELIM);
for (int i=0,len=entries.length;i<len;i++){
String[] info = entries[i].split(VALUE_DELIM);
if(info.length==2){%>
<div class="entry">
<div class="row">
<div class="lbl">Description:</div>
// noticed the readonly attribute?
<div class="txt"><input type="text" class="lotusText" value="<%= info[0]%>" size="80" readonly /></div>
</div>
<div class="row">
<div class="lbl">Url:</div>
// noticed the readonly attribute?
<div class="txt"><input type="text" class="lotusText" value="<%= info[1]%>" size="80" readonly /></div>
</div>
<div class="row">
<div class="lbl"></div>
</div>
</div>
<% }
}
}
%></div>
Step 3: Add in a Text element in Authoring Template and set the Custom JSP path
readMode=/wps/PA_WCM_Authoring_UI;/jsp/html/customJSP/AT-MultipleLinks_ReadMode.jsp,editMode=/wps/PA_WCM_Authoring_UI;/jsp/html/customJSP/AT-MultipleLinks_EditMode.jsp
Step 4: Create AT-MultipleLinks_RenderMode.jsp to render the result
After you have successfully create the render jsp, create a WCM JSP Component and point it to the render jsp. Call the JSP component that you have just created in the presentation template.
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page import="com.ibm.workplace.wcm.api.*, java.util.ArrayList, javax.portlet.*"%>
<%
String ENTRY_DELIM = "\\<\\<\\<entry\\>\\>\\>";
String VALUE_DELIM = "\\<\\<\\<delim\\>\\>\\>";
String I_WAN_TO_COMPONENT = "I Want To";
Content content = null;
RenderingContext renderingContext = (RenderingContext) request.getAttribute(Workspace.WCM_RENDERINGCONTEXT_KEY);
if (renderingContext == null) {
Object portletRequest = request.getAttribute("javax.portlet.request");
if (portletRequest != null && portletRequest instanceof PortletRequest) {
// JSR286 rendering
renderingContext = (RenderingContext) ((PortletRequest) portletRequest).getAttribute(Workspace.WCM_RENDERINGCONTEXT_KEY);
}
}
if (renderingContext != null) {
content = renderingContext.getContent();
}
if (content != null && content.hasComponent(I_WAN_TO_COMPONENT)) {
ContentComponent cmpt=content.getComponentByReference(I_WAN_TO_COMPONENT);
if (cmpt instanceof TextComponent) {
String iWantToLinks = ((TextComponent) cmpt).getText();
if(!iWantToLinks.equals("")){
out.print("<div class='i_want_to'><div class='title'>I Want To....</div><ul>");
String[] entries = iWantToLinks.split(ENTRY_DELIM);
for (int i=0,len=entries.length;i<len;i++){
String[] info = entries[i].split(VALUE_DELIM);
if(info.length==2){%>
<li><a href='<%=info[1]%>'><%=info[0]%></a></li>
<%}
}
out.print("</ul></div>");
}
}
}
%>
More Examples:
