Step 2. Make the Tree View Expand

WAM075 - Using a Tree View Weblet

In this step you will add a new treeexpand WebRoutine to handle expanding departments to add the department's sections and expanding sections to add employees for the selected section.

• The tree view weblet is AJAX enabled and will invoke the expand WebRoutine when an entry in the tree is selected.

• The response WebRoutine invoked by the tree view must have a WebRoutine statement with the keyword Response(*JSON)

• As before the lists are mapped as JSON data.

• Two additional fields must be mapped into the WebRoutine, one containing the level number being expanded (ONSUBLVL) and the other the id of the selected entry (ONSUBID).

• Depending on the value of field ONSUBLVL , the WebRoutine should add entries from the section table (SECTAB) or the employees file (PSLMST).

• Table DEPTAB is keyed on DEPTMENT

• Table SECTAB is keyed in DEPTMENT and SECTION

• File PSLMST is keyed on EMPNO

• Field LISTID contains a unique id for each list entry. Its value must be constructed based on these key relationships.

• LISTID for sections = DEPTMENT + SECTION

• LISTID for employees = EMPNO

• The parent id field LISTPID must be set using the same values. For example, LISTPID for an employee will be a DEPTMENT + SECTION value.

• The list ancestors is returned by the tree view weblet and contains 1 to 3 entries, depending on the level being expanded. As its name suggests, an entry contains one field corresponding to the parent of the expanding entry.

• The WebRoutine must retrieve the appropriate entry in the ancestors list to construct the key(s) to read the file and expand the selected entry.

• For section entries, field LISTID contains the concatenated value of DEPTMENT plus SECTION. The value of SECTION can be extracted from LISTID using the SUBSTRING intrinsic function with a start position calculated from the actual length of field DEPTMENT. For example:

#std_num := (#deptment.CurChars + 1)

. . . . . .

#section := #listid.substring( #std_num )

1.  Add the following code and then review its logic. Change iii to your initials. Ensure that the WAM name contains your WAM Identifier.

Webroutine Name(treeexpand) Response(*json)
Web_Map For(*input) Fields((#ancestor *json))
Web_Map For(*output) Fields((#emptree *json))
Web_Map For(*input) Fields(#onsubid #onsublvl)
Clr_List Named(#emptree)
Case (#onsublvl)

* Level 1 expanding – add sections
When (= '1')
#deptment := #onsubid
Select Fields(#deptment #section #secdesc) From_File(sectab) With_Key(#deptment)
#listid := #deptment + #section
#listcapt := #secdesc
#listpid := #deptment
#haschld := Y
#selwam := iiiTRE_2
#selwrn := SECDET
Add_Entry To_List(#emptree)
Endselect

* Level 2 expanding – add employees
When (= '2')
Get_Entry Number(1) From_List(#ancestor)
#deptment := #listid
#std_num := (#deptment.CurChars + 1)
Get_Entry Number(2) From_List(#ancestor)
#section := #listid.substring( #std_num )
Clr_List Named(#emptree)
Select Fields(#empno #surname #givename) From_File(pslmst1) With_Key(#deptment #section)
#listid := #empno
#listcapt := #surname + ', ' + #givename
#listpid := #deptment + #section
#haschld := N
#selwam := iiiTRE_2
#selwrn := EMPDET
Add_Entry To_List(#emptree)
Endselect
Endcase
Endroutine

 

2.  Compile your WAM and open the deptview WebRoutine in the Design view. Select the tree view and complete setting up its properties, as follows:

Property Value onexpand_wrname TREEEXPAND onsubmit_id_field ONSUBID onsubmit_level_field ONSUBLVL onsubmit_ancestor_list ANCESTOR

3.  Save your changes and execute your WAM in the browser. Click the Expand icon to test the expanding. (Clicking the text to display the details for this level, will be completed in the next step.)

     You should now be able to expand a department to add sections belonging to this department and then expand a section, adding employees belonging to this section.