Step 2. Create Visual Web Component

In this step, you will use the automated creation of Visual Web components to build a drop down list showing all departments in the DEPTAB file. The Visual Web component will be named iiiDEPT so that it will be automatically embedded into the HTML for the iiiFN07 function.

1.  Start the Web Function Editor. Use the File menu category and select the Open option to view a list of HTML pages in the partition. Notice that there is no page with the name iiiDEPT.

2.  Use the Components menu category and select the Generate Component - Visual option.

3.  Enter only the following information:

Component

iiiDEPT

Visual Type

Drop down

File

DEPTAB

Field for Value

DEPTMENT

Field for description

DEPTDESC

 

  

4.  Press OK. LANSA will use the information in the DEPTAB file to build the HTML code for the drop down.

5.  Recompile your iiiFN07 function.

6.  Use the File menu category and select the Open option to view a list of HTML pages in the partition. Open the iiiDEPT page. You will see a complete list of departments based on the DEPTAB file. (If the contents of the DEPTAB file are changed, you will need to rebuild the iiiDEPT component or you can manually edit the HTML.)

7.  Use the Component menu category and select the Maintain option to review the Web components in the registry.

8.  You should see that your iiiDEPT component is defined as INPUT mode. If you attempt to change this component, you can only modify the description and linked page.

9.  Check that the iiiFN07 function has compiled successfully, and then execute your iiiFN07. You will see a drop down for selecting the department code field.

     Using the drop down, select the Department Code of ADM and press the Search button.

     When the Sections in the Department are displayed, the iiiDEPT field is not displayed using the iiiDEPT component (i.e. it is not displayed as a drop down) as the mode of the display is output. For more details, refer to Automatic Embedding of Web Components.