Exercise 3.3: Creating the customer list page

Before you begin, you must complete Exercise 3.2: Opening the Web perspective.

You will create the customer list page using several Page Designer iSeries Web components which will pass the customer number to the inquiry page (inquiry.jsp).

Creating a new customer list file

To create a new customer list file:

  1. Locate the project WSSLABxx that you created in the previous tutorial.
    Selecting Web Project
  2. Expand the WSSLABxx folder, if not already expanded.
  3. Navigate to the WebContent folder in your project.
  4. Right-click the WebContent folder and click New > JSP File on the pop-up menu.
    Creating a JSP File

    The New JSP File page opens.
    Completing the New JSP File page

  5. In the File Name field, type custList.jsp.
  6. Click Finish to create a new JSP file.

    The Page Designer opens in the workbench:
    Page Designer in Workbench

Adding the iSeries table component

To add the iSeries table component:

  1. Click the Palette tab in the top right of the workbench.


    Selecting the iSeries Table Component

  2. Expand iSeries Web Components.
  3. Select Table and drag it to your JSP under the text "Place content here".

    Make sure the Design page is selected to place the table component on the new custList.jsp page.

    You have selected the iSeries Table Component.

  4. If you see this dialog, click Yes.
    use UTF-8 for encoding

    The Page Designer should look like this where the iSeries Table is on the Designer page.
    Placing the iSeries Table on the page

    Now you select the properties for the table.

Selecting properties for the table

To select properties for the table:

  1. The Properties pane in the bottom left of the workbench should open automatically. If not, right-click on your table object and click Properties on the pop-up menu.
    Selecting Properties

    Next you fill in the general properties for the iSeries Table.

  2. In the Properties pane, complete the following:
    Filling in the Properties of the iSeries Table
  3. In the Name field, type CUSTLIST.
  4. Select Single from the Selection mode list.
  5. Click the Parameters tab to set the parameters for the iSeries Table.
    Setting the Parameters of the iSeries Table

    To indicate that you want to provide the data by using a service program on the iSeries:

  6. Select the Get data from an iSeries service program check box to specify the service program information.
  7. In the Library field, type WSSLABxx.
  8. In the Object field, type wdscsrv.
  9. Click the Writes entire subfile radio button to indicate that you want to fill the table with all data available.

    Writes a page at a time allows you to programmatically control page down and page up.

    Writes a page as requested allows you to fill pages as needed.

    If no new data is needed the paging will be handled by the table component.

    Next you set the features for the iSeries Table.

  10. Click the Features tab.
    Setting the Features of the iSeries Table

    This will switch to the Features pane.

  11. In the Rows per page field, type 10.
  12. Click the Columns tab.

    This will switch to the Columns pane where you set the columns for the iSeries Table. There you specify the fields to be displayed.
    Setting the Columns of the iSeries Table

  13. Click Add.
  14. Fill in the following, and click Add after each row.
    NAME LENGTH HEADING TEXT
    custNumber 7 Customer Number
    custName 40 Customer Name
    custPhone 17 Customer Phone Number

    Your completed Properties pane for your table columns should look like this:
    Completed Table Column properties

    Now insert a form on the page.

Inserting a form on the page

An html form is needed to send back data with a request that you want to send the selected customer number back. You need a push button to send the request.

To insert a form on the page:

  1. Place your cursor below the table in the Page Designer (if not already), right-click and then click Insert > Form and Input Fields > Form on the pop-up menu.
    Inserting a Form on the page
  2. Place your cursor inside the dotted rectangle, which represents the form that you just created.
    Newly created form

    Next you want to access the Palette view again to select an iSeries Button Component.

Adding the iSeries button component

To add the iSeries Button Component:

  1. Navigate back to the Palette view. Click the Palette tab at the right of the workbench.
    Selecting an iSeries Button Component
  2. Expand iSeries Web Components if not already.
  3. Select Button then drag it to the form and drop it.

    You have placed the iSeries Button inside the form on the page.
    Placing the iSeries Button inside the form on the page

    Next you complete the iSeries Button properties.

Adding iSeries button properties

To add iSeries Button properties:

  1. The Properties pane for the button should automatically show up; if not, right-click the button and click Properties on the pop-up menu.
    Completing the iSeries Button properties
  2. In the Name field, type display.
  3. In the Label field, type Get Customer Number.

    You have finished creating and modifying the iSeries Web Components.

    Let's add a heading to this page.

Adding a heading to the page

Give the page a meaningful heading.

To add a heading to this page:

  1. Select the text Place content here.
  2. Replace it with the text Customer List.
  3. In the Properties pane at the bottom of the workbench, select Heading 2.
    Selecting Heading 2

    You are finished creating the JSP.

    Your finished page should look like this:
    JSP page

  4. If you haven't done so already, save and close custList.jsp.

You have created a JSP file for the Customer List Web page, added an iSeries table component, selected properties for the table, inserted a form, added an iSeries button component, added iSeries button properties and added a heading to the Customer List Web page and now you are ready to begin Exercise 3.4: Linking to the customer list page.