Build a Wizard using zeroCode
   
 
|Client-side Save
 <Previous 1
4
 Next>
   
Client-side Save
The Client Side approach towards wizard building involves gathering information from the user in a given step, and this information is used for displaying the HTML/DHTML content on the next step without any server interactions. This could also involve validations in the previous step before advancing to the next step. The details gathered across the various steps are sent to the database upon submission of the HTML page, in the final step.
The example below explains the building of a simple wizard for client side save in zeroCode. This three-step wizard involves gathering information related to an Employee who joins the organization. The information on an Employee’s Personal Details is captured in the first step (See. Step 1), current address details in the second step (See. Step 2) and the details of Permanent address in the third step (See Step 3). The form is submitted to the database in the final step.
The wizard is built on a single UDM (Insert Type) consisting of a node that collects the Employee’s Personal Details and two child nodes to capture the pertaining Current Address and Permanent Address information. The three-step operation of the Wizard is achieved with ease by segmenting the form details across three <DIV> elements in the HTML. Simple Java Scripting that is given below achieves the wizard navigation.
Functions
initialVisiblity(): This function shows the first <DIV> element contents (Employee Details) to the user when the form is loaded.(See Step 1)
doNext(): The navigation through the wizard is achieved through this function. This function displays the relevant segment based on click of the <<Next>> Button (See Step 1 & 2)
doUpdate(): This function submits the form with the details collected across the three segments to the database on click of <<Submit>> button.(See Step 3)
/* THIS FUNCTION SHOWS THE EMPLOYEE DETAILS (STEP-1) WHEN THE FORM LOADS*/
function initialVisibility(){
document.all.test1.style.visibility="visible"//shows the first “<DIV>” contents(Employee Details as shown in STEP-1)
document.all.test2.style.visibility="hidden";
document.all.test3.style.visibility="hidden";
  }
/* THIS FUNCTION ENABLES IN NAVIGATING THROUGH THE WIZARD BASED ON CLICK OF THE
<<NEXT>> BUTTON IN STEP-1 AND STEP-2.  */
function doNext(divname){
document.all.test1.style.visibility="hidden"; 
document.all.test2.style.visibility="hidden";
document.all.test3.style.visibility="hidden";
//SET THE VISIBILTY OF THE <DIV> SEGMENT.     
if(divname=="1")
document.all.test1.style.visibility = "visible";

else if(divname=="2")  

document.all.test2.style.visibility = "visible";
else
document.all.test3.style.visibility = "visible";
}
/* THIS FUNCTION SUBMITS THE DATA ADDED IN ALL THE STEPS(1 THROUGH 3) TO THE DATABASE */    
function doUpdate () {
document.mainForm.action = "${servlet_prefix}/custom/EmployeeAddWizard/editAction";

document.mainForm.submit();  

}
Step 1 - Adding Employee Details
<body class="PageBody"  onload="initialize();initialVisibility()" >
<h1 class="mystuffcaption">Add Employee Details</h1>
<form name=mainForm

method=post  

action="${servlet_prefix}/custom/EmployeeAddWizard/editAction"
onsubmit="return validate()">
<input type=hidden name="thisUdmsQueryString"

value="${thisUdmsQueryString}">  

<!-- THIS IS THE FIRST DIV SEGMENT THAT CONTAINS THE EMPLOYEE DETAILS -à
<div name ="test1" id="test1" style='position: absolute; top=100px: 165; left: 12; top: 41; height: 642' width="100%">
<table class="ZeroCodeList" id="node0">
<input type=hidden name="0-1-2" value="${EmployeeAddWizard.Employee.Id}" >
<tr>
<td valign=top class=TblHeadVertical>First  Name</td>
<td class="TblContVertical" valign=top>
<input type=text size=20 name="0-1-3"  value="${EmployeeAddWizard.Employee.First_Name}" maxlength=35>

</td>

</tr>
<tr>
<td valign=top class=TblHeadVertical>Last  Name</td>
<td class="TblContVertical" valign=top>
<input type=text size=20 name="0-1-4"  value="${EmployeeAddWizard.Employee.Last_Name}" maxlength=35>
</td>
</tr>
<tr>

<td valign=top class=TblHeadVertical><div class=nonNullableItemLabel>Employee  Number</div></td>

<td class="TblContVertical" valign=top>
<input type=text size=10 name="0-1-6"  value="${EmployeeAddWizard.Employee.Employee_Number}" maxlength=10>
</td>
</tr>
<tr>
<td valign=top class=TblHeadVertical>Join  Date</td>
<td class="TblContVertical" valign=top>
<table class=tableClass>
<tr>
<td class="TblContVertical"><input type=text size=12 maxlength=12 name="0-1-13__date"></td>
<td class="TblContVertical"><img src="/adeptPhaseII/images/calendar.gif"
style="cursor: hand"  alt="Show date chooser" onclick="calendar.attach (document.all ('0-1-13__date'))">
<input type=hidden name="0-1-13" value="${EmployeeAddWizard.Employee.Join_Date}">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign=top class=TblHeadVertical><div class=nonNullableItemLabel>Department</div></td>
<td class="TblContVertical" valign=top>
<select name="0-1-14">
<list EmployeeAddWizard.Employee.Department__deref.valueRange  as e14>
<option value="${e14.id}"
<if EmployeeAddWizard.Employee.Department == e14.id>
selected
</if>
>${e14.description}</option>
</list>
</select>
</td>

</tr>  

<tr>  

<td valign=top class=TblHeadVertical><div class=nonNullableItemLabel>Designation</div></td>
<td class="TblContVertical" valign=top>
<select name="0-1-20">
<list EmployeeAddWizard.Employee.Designation__deref.valueRange  as e20>
<option value="${e20.id}"
<if EmployeeAddWizard.Employee.Designation == e20.id>
selected
</if>

>${e20.description}</option>  

</list>
</select>
</td>
</tr>
<tr>
<td valign=top class=TblHeadVertical>Date Of Birth</td>
<td class="TblContVertical" valign=top>
<table class=tableClass>
<tr>
<td class="TblContVertical"><input type=text size=12 maxlength=12 name="0-1-26__date"></td>
<td class="TblContVertical"><img src="/adeptPhaseII/images/calendar.gif"
style="cursor: hand"  alt="Show date chooser" onclick="calendar.attach (document.all ('0-1-26__date'))">
<input type=hidden name="0-1-26" value="${EmployeeAddWizard.Employee.DOB}">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<a href="javascript:doNext('2')"><img src="/adeptPhaseII/images/btn_next.gif" border=0></a>
</td>

</tr>  

</table>
</div>
   
 
<Previous 1
4
 Next>