In Enterprise Workflow, when a user chooses a workpiece from a Workbasket Table of Contents (default: WorkbasketTOC.jsp), details of a workpiece display in the Workpiece Information Page (default: WorkpieceInfo.jsp). You may create your own custom pages and set up specific circumstances for certain pages to display.
The default Workpiece Information Page has five sections:
- Workpiece Information: the workpiece class, process, description, and routing options for a user to choose. These routing options come from the process design and vary with the workpiece's position in the process.
- The Workpiece Contents: a list of references associated with the workpiece and options for users to add and remove list items. Often, the reference is a link to a WebDocs document or search, but may reference any URL.
- Workpiece Attributes: a list of name/value pairs associated with the workpiece and options for users to add, change, or remove attributes.
- Workpiece Notes: a list of notes and a form for users to add a new note.
- History Button: opens a new window that shows all the process steps of the workpiece so far.
Use the following sample HTML and annotations to construct your custom Workpiece Information Page. The sample JSP page uses the following tag libraries:
- SQL, core, and functions - standard tag libraries that are part of the Java server page specification.
- workflow - an Enterprise Workflow tag library that allows access to the workpiece. For more information on this tag library see Enterprise Workflow Tag Library.
Default HTML for WorkpieceInfo.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<%@page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="wffn"
uri="http://www.rjssoft.com/jsp/taglib/workflow"%>
<%--
*******************************************************************************
Set up useBean for Enterprise Workflow with the user profile set from the cookies.
*******************************************************************************
--%>
<jsp:useBean id="beanWorkflowWebserviceBean"
class="com.rjssoft.workflow.webservice.security.WorkflowWebserviceProxySecurity">
<jsp:setProperty name="beanWorkflowWebserviceBean" property="user"
value="${pageContext.request.cookies}" />
</jsp:useBean>
<%--
*******************************************************************************
Get workpiece information and notes.
*******************************************************************************
--%>
<c:set var="workpieceInfo"
value="${wffn:getWorkpieceInfo(beanWorkflowWebserviceBean,param.workpieceID)}" />
<c:set var="workpieceNotes"
value="${wffn:getWorkpieceNotes(beanWorkflowWebserviceBean,param.workpieceID)}" />
<%--
*******************************************************************************
Get variables from naming context.
*******************************************************************************
--%>
<% try{pageContext.setAttribute("logValueChange",new javax.naming.InitialContext().lookup("java:comp/env/LogWorkpieceValueChange"));}catch (Exception e){} %>
<% try{pageContext.setAttribute("RJSWebDocsUrl",new javax.naming.InitialContext().lookup("java:comp/env/RJS WebDocs Url"));}catch (Exception e){} %>
<%--
*******************************************************************************
Begin HTML.
*******************************************************************************
--%>
<HTML>
<HEAD>
<TITLE>Workpiece Info</TITLE>
<SCRIPT type="text/javascript" src="WorkpieceInfoScript.js" ></script>
<script language="javascript" >
var drag = false;
var targetDiv = null;
var oldY = 0;
</script>
<link href="WorkFlow.css" rel="stylesheet" type="text/css">
<style>
div.popup {
width:0px;
z-index:1;
position:absolute;
}
div.popup ul {
width:100px;
background-color: #CDD5DC;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
div.popup li {
list-style-type: none;
margin: 0px;
padding-left: 1px;
padding-bottom: 2px;
padding-top: 1px;
}
ul.makeMenu {
font-weight : bold;
list-style: none;
width: 80px;
padding: 0px;
margin: 0px;
position: relative;
}
ul.makeMenu li {
height: 20px;
}
ul.makeMenu li.Hovering{
background-color: #B75312;
color: white;
}
ul.makeMenu li ul{
display: none;
width: 80px;
z-index: 2001;
list-style: none;
position: absolute;
left: 100%;
background-color: #B75312;
padding: 0px;
margin: 0px;
border: none;
}
ul.makeMenu li ul li a:link{
color: white;
}
ul.makeMenu li.Hovering ul {
display: block;
}
div#AddItemDiv {
width:92%;
display:none;
z-index:2001;
position:absolute;
background-color:white;
border: thin outset #E6E6E6;
}
</style>
</HEAD>
<%--
*******************************************************************************
Begin body.
*******************************************************************************
--%>
<BODY
style="margin-left:20px;margin-right:20px;margin-bottom:0px;margin-top:0px;"
onmousemove="if (!drag)return true; var xx=oldY-event.clientY;
oldY=event.clientY;
var zz=new RegExp('(\\d*)px','g').exec(targetDiv.style.height);
targetDiv.style.height=((y=parseInt(zz[1])-xx)>0?y:1 + 'px');"
onmouseup="drag=false;" >
<%--
*******************************************************************************
Advance the workpiece with this form.
*******************************************************************************
--%>
<!--
header section with general workpiece stuff
-->
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height=5>
<td width=15%><FONT size=2><STRONG>ID:</STRONG></FONT></td>
<td width=40%>${param.workpieceID}</td>
<td width=15%><font size=2><strong>Process:</strong></font></td>
<td width=30%>${workpieceInfo[3][2]}</td>
</tr>
<tr height=5>
<td><strong>Created By:</strong></td>
<td>${workpieceInfo[3][5]}</td>
<td><strong>Created Date:</strong></td>
<td>${workpieceInfo[3][6]}</td>
<!-- find way to format date ex. May 22, 2005, 11:17pm -->
</tr>
<tr height=5>
<td width=15%> </td>
<td width=25%> </td>
<TD><font size=2><strong>Action</strong></font></td>
<TD>
<FORM name='ActionForm' action="javascript: void();"
method="POST" target="_self">
<input type=hidden name='workpieceID'
value='${param.workpieceID}'>
<input type="hidden" name="workpieceClass"
value="${workpieceInfo[3][1]}">
<SELECT name='option'>
<wffn:WorkpieceInfoOptions var="option"
items="${workpieceInfo}" path="${param.use}" >
<OPTION value="${option.optionStep};${option.optionID};${option.optionString};${option.optionValidator};${option.optionPreAction};${option.optionPostAction}" >${option.optionString}</OPTION>
</wffn:WorkpieceInfoOptions>
</SELECT>
<INPUT type=submit class="BoxGo" onclick="return advanceWorkpiece(this.form);" value="">
</form>
</TD>
</tr>
</TABLE>
<%--
*******************************************************************************
Item reference form - the header part.
*******************************************************************************
--%>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="1">
<td colspan="2" class="SectionHeading" background="Graphics/BlueLine.gif">
Workpiece Contents</TD>
</tr>
<tr height="1">
<td height="1" colspan="2" valign=top background="Graphics/BlueLine.gif"> </td>
</tr>
<tr>
<TD align=left valign="top" width="85%"><strong>Item</strong></TD>
<TD align=left valign="top" width="15%"><strong>Remove</strong></TD>
</TR>
<tr height="1">
<td colspan=2 background="Graphics/BlueLine.gif"></td>
</tr>
<tr><td colspan=2 >
<%--
*******************************************************************************
Set the references from the workpieceInfo array.
*******************************************************************************
--%>
<c:set var="itemReferences" value="${workpieceInfo[1]}" />
<c:if test="${fn:length(itemReferences) > 0}">
<div style="${fn:length(itemReferences)<=3 ? '':'height:65px; overflow:auto;'}width:100%;">
<%--
*******************************************************************************
Contents of this div are replaced by javascript when items are added or removed
*******************************************************************************
--%>
<div id='div-referenceList' >
<%--
*******************************************************************************
Reference JSP tags are in WorkpieceInfoItems.txt.
*******************************************************************************
--%>
<%@include file="WorkpieceInfoItems.txt" %>
</div>
</div>
<tr>
<td colspan=4 background="Graphics/BlueLine.gif"></td>
</tr>
</c:if>
</td></tr>
</TABLE>
<%--
*******************************************************************************
Add item-form display-control line.
*******************************************************************************
--%>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td id="AddItemDivControl" bgcolor='#E6E6E6' style="cursor:hand;" onclick="toggleAddItemDiv()"><IMG src='Graphics/additem-show.png'></td>
</tr>
</table>
<%--
*******************************************************************************
Add item form - div can be non-display.
*******************************************************************************
--%>
<div id="AddItemDiv" >
<FORM action="javascript: void();" method="post" name="addItemForm" target="_self">
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="1">
<td align="left" width="60%">
<table border='0' cellspacing='0' cellpadding='0'>
<%--
*******************************************************************************
Line 1: Choice if RJSWebDocsUrl is found - can display browse menu or not.
*******************************************************************************
--%>
<tr>
<td>URL:</td>
<TD align="left">
<INPUT type="hidden" name="workpieceID" value="${param.workpieceID}">
<c:choose>
<c:when test='${RJSWebDocsUrl==null}'>
<INPUT type="text" name="url" size='50'>
</c:when>
<c:otherwise>
<table align="left">
<tr align="left"><td align='left'>
<INPUT type="text" name="url" size='45'>
</td><td>
<ul class="makeMenu" id="makeMenu" >
<LI onmouseover="this.className+=' Hovering';" onmouseout="this.className=this.className.replace(' Hovering','');">Browse
<ul>
<LI><a href="javascript:webDocsFolderBrowser('${RJSWebDocsUrl}/doc503',encodeURIComponent('${RJSWebDocsUrl}/DOC100R?ACTION=DOCINFO'),'addItemForm','url');">WebDocs</a> </li>
<LI><a href='FileSystemLookup.html' target='_blank'>File System</a> </li>
</ul>
</LI>
</ul>
</td>
</tr>
</table>
</c:otherwise>
</c:choose>
</TD>
</tr>
<%--
*******************************************************************************
Line 2
*******************************************************************************
--%>
<tr><td>Description:</TD><td><INPUT type="text" name="description" size='50'></td></tr>
</table>
</td>
<TD align="left" width="25%" >
<INPUT type="submit" class="BoxAdd" onclick="javascript:return addItem(this.form);" value="">
</TD>
</TR>
</table>
</FORM>
</div>
<%--
*******************************************************************************
End of add-item form.
*******************************************************************************
--%>
<%--
*******************************************************************************
Workpiece Values
*******************************************************************************
--%>
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="1">
<td colspan="4" class="SectionHeading" background="Graphics/BlueLine.gif">
Workpiece Attributes
</td>
</tr>
<tr height="1">
<td height="1" colspan=4 valign=top background="Graphics/BlueLine.gif"> </td>
</tr>
<%--
*******************************************************************************
Column headings and value changer div.
*******************************************************************************
--%>
<tr align="left">
<th style="width: 80px;"><strong>Name</strong></th>
<th style="width: 250px;"><strong>Value</strong></th>
<td colspan=2 rowspan=4 valign=top align=right>
<div id='valueChanger' >
<Form name="valueChanger" action="javascript: void();" method="post" enctype="application/x-www-form-urlencoded" target="_self">
<table border=0 width=100%>
<tr align="right" >
<td style='cursor:hand; width:60px;' onclick='doNamesFromClass(this);' title='Click to get a list of attribute names for the workpiece class.' >Name:<div class='popup' ></div></td>
<td >
<INPUT type="hidden" name="logValueChange" value="${logValueChange}">
<INPUT name="valueName" value="">
</td>
<%--
Do the AJAX addValue or removeValue function on button click
--%>
<td ><Input type=submit class="BoxAddChange" value="" onclick="addValueForm(this.form);this.form.reset();getValues('${param.workpieceID}');return(false);" <c:out value='${wffn:userIsAuthorizedToClass(beanWorkflowWebserviceBean,workpieceInfo[3][1],"addWorkpieceValue")?"":"disabled"}'/>></td>
</tr>
<tr align="right">
<td>Value:</td>
<td><INPUT type="hidden" name="oldValue" value=""><input name="valueValue" value=""></td>
<%--
Do the AJAX addValue or removeValue function on button click
--%>
<td>
<INPUT type="hidden" name="workpieceID" value="${param.workpieceID}">
<input type=submit value="" class="BoxRemove" onclick="removeValue(this.form);this.form.reset();getValues('${param.workpieceID}');return(false);" <c:out value='${wffn:userIsAuthorizedToClass(beanWorkflowWebserviceBean,workpieceInfo[3][1],"removeWorkpieceValue")?"":"disabled"}'/>>
</td>
</tr>
</table>
</Form>
</div>
</td>
</tr>
<%--
*******************************************************************************
Values List
*******************************************************************************
--%>
<tr height="1">
<td height="1" colspan=2 valign=top background="Graphics/BlueLine.gif"> </td>
</tr>
<tr>
<td colspan=2>
<div id='div-attributeList' style='overflow:auto;height:250px;'>
<c:set var="values" value="${workpieceInfo[2]}" />
<%@include file="WorkpieceInfoValues.txt" %>
</div>
</td>
</tr>
<%--
*******************************************************************************
Sizing row for value list div (div-attributeList)
*******************************************************************************
--%>
<TR>
<TD valign=top colspan=4 background="Graphics/BlueLine.gif" onmouseover='this.style.cursor="n-resize";' onmouseout='this.style.cursor="default";' onmousedown="drag=true;oldY=event.clientY;targetDiv = document.getElementById('div-attributeList');" ondblclick="yy = document.getElementById('div-attributeList'); yy.style.height=(yy.style.height=='0px'?'250px':'0px');" height="4px"></td>
</tr>
</table>
<%--
*******************************************************************************
Notes
*******************************************************************************
--%>
<form action="javascript: void();" method="post">
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="1">
<td colspan="2" class="SectionHeading" background="Graphics/BlueLine.gif">
Notes</td>
</tr>
<tr height="1">
<td height="1" colspan=2 valign=top background="Graphics/BlueLine.gif"> </td>
</tr>
<TR>
<td rowspan=2>
<div id='notesDiv' style='height:60px;overflow:auto;'>${workpieceNotes}</div></td>
<td align=right>
<textarea rows="2" cols="60" name="addNoteArea"></textarea></td>
</tr>
<%--
Do the AJAX addNote function on button click
--%>
<tr>
<td colspan='2' align=right>
<input type=hidden name='workpieceID' value='${param.workpieceID}'>
<input type="submit" class="BoxAdd" value="" onclick='addNote(this.form);return(false);'>
</td>
</tr>
</table>
</form>
<%--
*******************************************************************************
History
*******************************************************************************
--%>
<form action="WorkpieceHistory.jsp" target="_blank">
<TABLE border="0" cellspacing="0" cellpadding="0" width="100%">
<tr height="1">
<td class="SectionHeading" background="Graphics/BlueLine.gif">
History</td>
</tr>
<tr >
<td background="Graphics/BlueLine.gif" colspan=4>
<input type=hidden name='action' value='getList'>
<input type=hidden name='workpieceID' value='${param.workpieceID}'>
<input type=submit value="History">
</td>
</tr>
</TABLE>
</form>
</BODY>
</HTML> 
