Exercise 5.2: Applying Web Settings

Before you begin, you must complete Exercise 5.1: Opening DDS display file source.

Now work with the Notebook underneath the Design page.

Creating a hyperlink for the option field

To create an hyperlink for the option field:

  1. Click the SCREEN1 tab.
  2. Locate the Web Settings tab.
    web Settings tab
  3. Place the cursor on line 8, column 7.
  4. Click the Web Settings tab.

    The Web Settings page in the CODE Designer window opens.
    Create hyperlink page

  5. On the Web Settings page, locate the list that shows the different Web Settings available for the Customer field.
  6. If not all Web Settings show, scroll down to the bottom of the list.
  7. Click Create hyperlink in the Web Settings list.
    Web Settings for Hyperlink
  8. Select the Create hyperlink check box to the right of the list.
  9. Clear the Override browser's hyperlink appearance with DDS appearance check box.
  10. Click the Action hyperlink radio button.
  11. Leave the Position cursor to field check box selected.
  12. From the list under the Position cursor to field select the &{OPT} value.
  13. In the Enter data list type 1.

    This indicates that you want a 1 to be entered in the Options field when the hyperlink is clicked.

  14. Select the Submit check box.
  15. Leave the Function key radio button selected.
  16. Select ENTER from the Function key list.

    Just to recap, you specified the following, when the application gets converted with the WebFacing Tool; the customer name cells in the subfile will be generated so they appear as links in the browser window. At run time, when the link is clicked, a 1 will be placed in the Option field. Also, a submit request will be initiated to generate the equivalent of pressing the Enter key and the cursor will be positioned in the Option field for the selected row.

    You have accomplished the basic task, but the user interface now has an Option column that doesn't belong there since it is useless with the new link. Also the instructions on the page on how to select a customer are wrong. You want you to fix this with Web Settings as well before you test this new feature.

Hiding the option field

On the Design page, you now need to select the Opt field to indicate that you want to work with it:
Web Settings visibility page
To hide the option heading:

  1. Click the Opt column on the first record in the subfile to select it.
  2. On the Web Settings page select Visibility from the list.
  3. Select the Hide field radio button.

    Now this column in the subfile will be hidden.

Hiding the option heading for the option field

You need to hide the heading for the Opt field as well. The heading is not in the subfile record; it is located in the subfile control record. Therefore you need to give focus to a different record format in the Design page. What does this mean? It looks like one record format but there are three record formats in this view.

Lets look at some of the CODE Designer features. Normally in the iSeries green screen world, your screens are made up out of multiple record formats that at runtime get assembled by the RPG or COBOL program to present the real screen your end user sees.

To make it easier for you at design time to get a feel how the record formats you create would look like at runtime, CODE Designer has added the notion of a group. You can assemble several record formats in a group. This feature gives you the capability of mimicking what happens at runtime with your record formats. So a group resembles the runtime grouping of record formats for you at development time. In the sample you are working with, there are already assembled three record formats in group SCREEN1. The record formats are:

To get a list of record formats belonging to a group you can expand the list of record formats.
Group SCREEN 1 and list of record formats

Only one record format in a group is active at a time. The record format name is listed in the top field of the record list. Also in the Design page all parts in the active record format are shown highlighted but the inactive record format content is half-intensity. You see this effect very clearly above. Until now you have been working with the subfile record format CUSTSFL only, but now you need to clean up the subfile control record format CUSTCTL, so you need to make it the active record format or another way to describe this, give it focus.

To hide the option heading Opt Customer:

  1. To shift focus to another record format, at the top of the Design page, click the arrow.
    CODE Designer, switching record formats in a group

    You will notice that the top area of the Design page is now highlighted, and the bottom one has only half-intensity. As mentioned before the highlighted area is the one you can work with.

    Next you clean up the subfile control record format.
    Subfile control record format in focus

  2. On the Design page, select the OPT Customer constant.
  3. On the Web Settings page, select Appearance and Text from the list.
  4. Select the Hide characters check box.
  5. Leave 1 in the From field.
  6. Type 3 in the To field.

    This hides the heading Opt. Now you need to remove the instructions on the panel that guide the user to put a 1 into the Opt field to select a specific customer.

Hiding the select instruction

You don't have to give focus to a different record format since this constant is also located on the CUSTCTL subfile control record format.

To hide the select instruction:

  1. Select the constant 1=Select in the Design page.
    Use Visibility Web Setting to hide constant
  2. On the Web Settings page select Visibility from the list.
  3. Click the Hide field radio button.

Changing the instruction (Type choice press Enter)

Now you need to add new instructions for the WebFacing page, so the end user knows to click the link to select a customer.

Note:
Note you can't just change the 5250 constant because you might still use this screen in a 5250 environment, you have to use Web Settings to apply this change to the Web user interface only.

To change the instruction text:

  1. Select the instruction constant (Type choices press Enter) on the Design page.
    Changing the instructions with Web Settings
  2. On the Web Settings page, select Appearance and Text from the list.
  3. Select the Override constant text check box, and type the new text Click on link to select in the field to the right of the check box.

    Now all Web Settings are in place and you can go ahead and save the DDS source and reconvert this DDS member.

Closing CODE Designer and reconverting the DDS source member

To close CODE Designer and re-convert the DDS member:

  1. Click the X button at the top right corner of CODE Designer.
    Close window
  2. Click Yes to save, when asked to do so.

    You return to the WebFacing perspective in the workbench.

  3. Select your project wflabxx in the WebFacing Projects view.
  4. Expand the project by clicking on the plus sign (+) in front of its icon, if you can't see the DDS folder as part of the project.
  5. Expand the DDS folder, if it is not expanded already, to show all members in this folder.
    WebFacing Project view popup menu for DDS source member
  6. Select the member SLTCUSTD that you just changed.
  7. Right-click SLTCUSTD member icon.
  8. Click Convert on the pop-up menu.

    Only this member will be converted. A conversion report opens after the conversion is finished. Now you test the new user interface.

    You return to the WebFacing perspective in the workbench.

You have created a hyperlink action for the option field, hidden the option field, the option heading and the select instruction, changed the appearance of text, closed CODE Designer and reconverted the DDS source member and now you are ready to begin Exercise 5.3: Testing the changed application.