Exercise 5.1: Generating another output page using the Web Interaction wizard

Now you will create the Web Interaction that will actually update the record on the iSeries. It will read the input fields from the custDispUpdateResults.jsp that you created in the previous exercise, pass the data in a structure as a parameter to the procedure doUpdate and display the new data in a Web page. In case of an error an error page gets displayed.

Generating another output page

To generate another output page:

  1. Right-click your project and click New > Other on the pop-up menu.
    New > Other

    The Select page opens.

  2. In the left pane, select Web.
  3. In the right pane, select Web Interaction.
    New dialog
  4. Click Next.
  5. In the Web Interaction name field, type custDoUpdate.
    New Web Interaction
  6. Click Next.

    Now you define the input and output pages. You use the page from the previous exercise as the input page.
    Defining Input and Output pages

  7. Leave the Use input pages radio button selected and click Add.

    You let the Web Interaction wizard generate the output page.

  8. Select custDispUpdateResults.jsp on the Input page dialog. Click OK.

    This is the page your original Web Interaction generated; you are now linking it with another Web Interaction.

  9. Click the Generate output JSP radio button to tell the Web Interaction wizard to make an output page.
  10. Click Next.

    Now you will add a program.

Adding a program

To add a program:

  1. Click Add Program.
  2. Fill in the program details as shown.
    Add a program
  3. Click OK when finished.

    You will see that the program has been added under Program call definitions.

    Now you need to add the structure you defined earlier.

Adding a parameter

The procedure doUpdate is provided to you in WDSCSRV. It receives a structure with the input data from the Web page and updates the customer record. It returns the string 'ok' in the parameter forward if the update completed successfully.

To add a parameter:

  1. Click Add Parameter.
  2. Define the structure for the customer data as an input/output parameter. Fill in the details as shown:
    Adding a structure
  3. Click OK.

    The feedback from the procedure to indicate success is a 20 character parameter. You use this parameter to decide which page to show next.

  4. Fill in the parameter details as shown:
    Add a parameter
  5. Click OK when finished.

    Your wizard page should now look like this:
    Completed parameters

    You can see the new parameters you have defined for this interaction.

  6. Click Next.

    The input parameter page opens.
    Linking the input page parameters

    To be able to generate the correct code, the Web Interaction wizard needs to know which field on the Web page is correlated to which parameter. You specify this correlation by linking the fields from the Web page to the correct parameter.

    Now you will link the input page parameters.

  7. Select an input page parameter under Input page fields.
  8. Select the respective program input parameter under Input parameters.
  9. Click the Link button in the middle of the page

    You have just linked a field from the input page to the input parameter of your program.

  10. Repeat for all remaining input page parameters.

Designing the output page

Now you design the output page.

To design the output page:

  1. Click Next.
    Changing the output page title.
  2. In the Properties table, click the Page tab.
  3. Change the value of the Page Title property to Update Complete.

    Now change the field labels to be readable.

  4. Click the Fields tab.
    Changing a field label
  5. Select custRec.CUSTNO from the left.
  6. Change the value of the Label property to Customer Number.
  7. Using the table below, change the values of the remaining properties:
    CUSTNA Customer Name
    REPNO Representative Number
    CONTAC Contact
    CPHONE Phone Number
    CFAX Fax Number
    CADDR Address
    CCITY City
    CCOUNT Country
    CZIP Zip

    Now, let's disable the values you don't want to be displayed.

    As a final step, you choose not to use the CZIPLO field and not to display the forward field.
    Finished page

  8. Clear their respective check boxes.
  9. Click Finish.

You have generated another output page, added a program, added a parameter and designed the output page and now you are ready to begin Exercise 5.2: Adding the flow control error page.