Build a Wizard using zeroCode
 
 
|Operationl Types
|Client-side Save |Code
  1
 
A “wizard” is a common user-interface paradigm used to step the user through a series of information-gathering steps, with decisions made along the way. At each step in the series, the user is presented with a form containing data elements gathered in previous steps. The parts that user is required to fill out at any particular step can depend on the choices made in previous steps.
 
   
Operational Types
From a programming perspective, there are two kinds of wizard operations:
Wizards that are affected by server-side data - where data received from the user in a given step is sent back to the server, additional data is retrieved from a data source based on that data and the retrieved data is sent back to the client, to display in the next step.
Wizards that are not affected by server-side data - where data received from the user in a given step is only used to impact the D/HTML that is displayed in the next step and is not used in any way on the server for additional data retrieval.
   
You can build a Type 2 operation with one of two approaches – with a server-side save or a client-side save. A server-side save wizard pushes the user’s data into the back end at each step and re-reads the data when the page for the subsequent step is created. In this case, you would use your favorite server-side scripting language (JSP, ASP, etc.) to take the data back to the server, massage it into the HTML and JavaScript that’s sent back to the browser and then shown. The client-side save is the simpler (albeit less powerful) alternative: you can propagate the chosen data elements through the steps in the wizard using hidden fields in the HTML.
This document discusses a Type 1 operation (using a UDM for every page) and then illustrates the second approach (client-side save) for a Type 2 operation (no UDMs for pages) in a zeroCode application, with simple examples.
Type 1 Operation
Consider a wizard that steps the user through the registration for a frequent user program for restaurants. Given a database that holds data about hundreds of restaurants all over the world, it would be impossible to create a one-time list of all those restaurants, the cuisine they carry and their price ranges and any other information that the user may need to make decisions along the way. A better approach would be a wizard that asks the user for his/her address in the first step, the types of cuisine in the second, available local restaurants of those chosen cuisine in the third and so on. While steps 1 and 2 can be achieved via Type 2 operations, the list of restaurants of a chosen cuisine-group can only be generated via data processing on the server. So the best mechanism would be to build two pages using the Type 2 capabilities described in the next section and then pass the choices back to the server to retrieve, from the database, relevant restaurants.
 
In such a situation, you would create a UDM that takes the chosen values as parameters and uses them to retrieve the list of restaurants. That UDM can use the parameters to filter retrieved data and then pass it back in the HTML to show to the user.
Type 2 Operation
In this case, as discussed earlier, there are no server-side data retrievals required. A typical example would be a list of magazines that you would want to tailor to a user’s preferences or demographics – since the list is not too long, all the items in the list can be included in the FreeMarker or JavaScript and a sub-set be presented to the user based on his/her responses in an earlier page. The choice of the list can be made in JavaScript (client-side) or in FreeMarker (server-side) – while the JavaScript is probably easier to use, using FreeMarker gives you the ability to hide the logic that makes the selection from the user. All JavaScript is available to the user in the HTML source-code, while the FreeMarker tags are not.
                                                                                                                                             
  1