In this step you will complete the WAM by adding WebRoutines to display details for sections and employees.

1. Define a Group_by SECDATA for fields SECTION, SECDESC, SECADDR1, SECADDR2 SECADDR3, SECPCODE and SECPHBUS. All fields should have an output attribute.
    
2. Create a new WebRoutine SecDet, based on the following:
   
   
   • Map for input field ONSUBID and list ANCESTOR
   • Map for output the Group_by SECDATA
   • Retrieve the first entry from list ANCESTOR and set the value of DEPTMENT from LISTID
   • Calculate STD_NUM based on the actual length of field DEPTMENT + 1
   • Assign SECTION by substringing from ONSUBID, starting from STD_NUM
   • Fetch department fields with the key DEPTMENT and SECTION
     
     Your code should look like the following:

          Webroutine Name(SecDet)
          Web_Map For(*input) Fields(#onsubid #ancestor)
          Web_Map For(*output) Fields(#secdata)
          Get_Entry Number(1) From_List(#ancestor)
          #deptment := #listid
          #std_num := (#deptment.CurSize + 1)
          #section := #onsubid.substring( #std_num )
          Fetch Fields(*all) From_File(sectab) With_Key(#deptment #section)
          Endroutine
     
     

3. Compile the WAM.
   
   
4. Define a Group_by EMPDATA for fields EMPNO, SURNAME, GIVENAME, ADDRESS1, ADDRESS2, ADDRESS3, POSTCODE, PHONEHME, PHONEBUS, DEPTMENT, SECTION, SALARY, STARTDTE, TERMDATE. All fields should have an output attribute.
   
   
5. Define a working list SKILLS, for fields SKILCODE, SKILDESC, GRADE, COMMENT, DATEACQ. All fields should have an output attribute.
   
   
6. Open the WebRoutine SecDet in the Design view. Drop the Simple blank layout onto the page.
   
   
7. Use the Web / Manage External Resources menu option to give the web page the theme styles to match your common layout.
   
   
8. Save your changes.
   
   
9. Create a new WebRoutine EmpDet.
   
   
   • Map field ONSUBID and list ANCESTOR for input
   • Map Group_by and list SKILLS for output
   • Assign EMPNO to the value of ONSUBID
   • Fetch employee data from file PSLMST using key EMPNO
   • Clear the list SKILLS
   • Build the list SKILLS from file PSLSKL with key EMPNO
   • Fetch SKILDESC for each employee skill with key SKILCODE
     
     Your code should look like the following:

          Webroutine Name(EmpDet)
          Web_Map For(*input) Fields(#onsubid #ancestor)
          Web_Map For(*output) Fields(#empdata #skills)
          #empno := #onsubid
          Fetch Fields(#empdata) From_File(pslmst) With_Key(#empno)
          Clr_List Named(#skills)
          Select Fields(#skills) From_File(pslskl) With_Key(#empno)
          Fetch Fields(#skildesc) From_File(skltab) With_Key(#SKILCODE)
          Add_Entry To_List(#skills)
          Endselect
          Endroutine
     
     

10. Compile the WAM.
    
    
11. Open the EmpDet WebRoutine in the Design view. Drop the Simple blank layout onto the web page.
    
    
12. On the Design ribbon use the External Resources button, then Manage External Resources dialog to add the Style external resources to match those used in your common layout.
    
    
13. Open the SecDet WebRoutine in the Design view. Drop the Simple blank layout onto the web page.
    
    
14. On the Design ribbon use the External Resources button, then Manage External Resources dialog to add the Style external resources to match those used in your common layout.
    
    
15. Save your changes.
    
    
16. Test your WAM by running the DeptView WebRoutine in the browser. You should be able to expand the tree view and select a department, a section or an employee to display its details.
    
    
17. You probably found that the Navigation panel needed more space to display employee details.
    
    
    1. Open the DeptView WebRoutine in the Design view.
    2. Select the table containing the tree view and Navigation panel. Do this by selecting a corner of the table. Alternatively, click anywhere inside the table and use the Outline tab to locate and select the table.
    3. Drag the right hand edge of the table to the right.
    4. Drag the bottom of edge of the table down.
    5. If you examine the Style properties for the table you will see its current size in pixels (for example, width: 800px and height: 560px).
    6. You can also hover over the center border and drag this to the left to match the size of the tree view weblet.
    7. If necessary adjust the size of the Navigation panel to use the space now available
    8. Save your changes
    9. Re-test your WAM.