Sample HTML Page
<html>
<head>
<title id="titleId">Page Title</title>
<div id="divHeadId">
<script language="JavaScript" src="javascripts/cal.js" type="text/javascript"></script>
<script language="JavaScript" src="javascripts/DateFormat.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript"></script>
<script>
// boolean flag to check if the page has already been submitted yet or not
// fixes the problem with double clicking on the save button
var alreadySubmitted = false;
function gotoInbox() {
document.WorkItemForm.submit();
}
function setAlreadySubmitted (submitted) {
alreadySubmitted = submitted;
}
function isAlreadySubmitted () {
return alreadySubmitted;
}
function doSubmit (command) {
setCommand(command);
if (!isAlreadySubmitted()) {
setAlreadySubmitted(true);
return true;
}
return false;
}
function setCommand(str){
document.WorkItemForm.command.value=str;
return;
}
</script>
</div>
</head>
<body topmargin="0" leftmargin="0">
<div id="divBodyId">
<form id="formTag" method="POST" action="Action" name="Name">
<!-- Mandatory id elements -->
<input id="hiddenRetURL" type="hidden" name="retURL" value="">
<input id="hiddenURLCtr" type="hidden" name="URLCtr" value="">
<input id="numberOfRows" type="hidden" name="numberOfRows" value="">
<input id="workitemid" type="hidden" NAME="workitemid" value="" >
<input id="command" type="hidden" name="command" value="">
<input id="status" type="hidden" name="status" value="">
<input id="endday" type="hidden" name="endday" value="">
<input id="endmonth" type="hidden" name="endmonth" value="">
<input id="endyear" type="hidden" name="endyear" value="">
<input id="startday" type="hidden" name="startday" value="">
<input id="startmonth" type="hidden" name="startmonth" value="">
<input id="startyear" type="hidden" name="startyear" value="">
<input id="buyer" type="hidden" name="buyer" value="">
<input id="marketplace" type="hidden" name="marketplace" value="">
<input id="recordcount" type="hidden" name="recordcount" value="">
<input id="pagebeginid" type="hidden" name="pagebeginid" value="">
<input id="pageendid" type="hidden" name="pageendid" value="">
<input id="dir" type="hidden" name="dir" value="">
<input id="doctype" type="hidden" name="doctype" value="">
<input id="setbeginid" type="hidden" name="setbeginid" value="">
<input id="tasktype" type="hidden" name="tasktype" value="">
<input id="FormResult" type="hidden" name="" value="Publish">
<input id="DocumentEffectiveDate"type="hidden" name="effectiveDate"-->
<br />
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td class="header" align="left" colSpan="2" width="100%"><span id="PageTitle" NAME=" ">Page Title</span></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td class="header" align="left" colSpan="2" width="100%"><span id="FormTitle" NAME=" ">Form Title</span></td>
</tr>
<tr id="trPrintableVersion">
<td class="subheader" colspan=2 align=center><div ><a id="aPrintablePO" href="DisplayPrintableDoc"></a></div></td>
</tr>
<tr id="trAttachments">
<td class="subheader" colspan=2 align="center"><div><a id="aAttachments" href="DisplayWorkItem"></a></div></td>
</tr>
<tr id="trLatestPO">
<td align="center" class="subheader" colspan="2">
<div>There is a <a id="aLatestPO" href="DisplayWorkItem"><font color="white">newer</font></a> workitem for this Order.</div>
</td>
</tr>
</table>
<!-- Add customization here -->
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<td width="15%" align="left" class="leftTD">Master Cataog Name</td>
<td width="85%" align="left" valign="middle" class="rightTD">
<span id="MessageRetailerMasterCatalogName" align="left"> </span>
</td>
</tr>
<tr>
<td align="left" class="leftTD">Trading Partner</td>
<td align="left" valign="middle" class="rightTD">
<span id="MessageChannelCredentialDomain" NAME=" "> </span> - <span id="MessageChannelCredentialIdentity" NAME=" "></span>
</td>
</tr>
<tr>
<td align="left" class="leftTD">Message Source</td>
<td align="left" valign="middle" class="rightTD">
<span id="MessageChannelOrganizationName" align="left"> </span>
</td>
</tr>
<tr>
<td align="left" class="leftTD">Date</td>
<td align="left" valign="middle" class="rightTD">
<span id="HeaderTimeStampDate" NAME=" "> </span> <span id="HeaderTimeStampTime" NAME=" "> </span> <span id="HeaderTimeStampZone" NAME=" "> </span>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="1" cellpadding="2">
<tr>
<td width="100%" colspan="2" align="left" class="subheader">
<div id="elementTableTitle">Product Details</div>
</td>
</tr>
<tr id="Line">
<td width="15%" class="leftTD">
<span id="LineProductID" name=" "> </span>
</td>
<td width="85%" class="rightTD">
<span id="LineProductName" name=" "> </span>
</td>
</tr>
</table>
<!-- Add customization here -->
<table border="0" cellpadding="2" cellspacing="1" id="closedgroup" width="100%">
<tr class="btns">
<td align="center" width="100%">
<A href="javascript:document.WorkItemForm.submit();" onclick="return doSubmit('PROCESS');" onmouseout="javascript:submitbtn.src='images/submit_btn.gif'; return true;" onmouseover="javascript:submitbtn.src='images/submit_btn.gif'; return true;">
<IMG alt="Submit" border="0" name="submitbtn" src="images/submit_btn.gif" />
</A>
<A href="javascript:document.WorkItemForm.submit();" onclick="return doSubmit('CANCEL');" onmouseout="javascript:cancelbtn.src='images/cancel_btn.gif'; return true;" onmouseover="javascript:cancelbtn.src='images/cancel_btn.gif';return true;">
<IMG alt="Cancel" border="0" name="cancelbtn" src="images/cancel_btn.gif" />
</A>
</td>
</tr>
</table>
<table border="0" cellpadding="2" cellspacing="1" id="opengroup" width="100%">
<tr class="btns">
<td align="center" colspan="2">
<a href="javascript:gotoInbox();" onclick="return doSubmit('CANCEL');" onmouseout="javascript:cancelbtn.src='images/cancel_btn.gif'; return true;" onmouseover="javascript:cancelbtn.src='images/cancel_btn.gif';return true;">
<IMG alt="Cancel" border="0" name="cancelbtn" src="images/cancel_btn.gif" />
</a>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Use an HTML editor to draw the layout and appearance of the form. Assign unique IDs to each HTML section that needs to be populated with a value. For example, if you have an HTML element like:
<table border="1">
<tr>
<td>Name</td>
<td id="Name">Name goes here.</td>
</tr>
</table>
Copyright © Cloud Software Group, Inc. All rights reserved.