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 containing the level number being expanded (ONSUBLVL) and 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 above values.
- 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.
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)
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 := iiiTreeView
#selwrn := SECDET
Add_Entry To_List(#emptree)
Endselect
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 := iiiTreeView
#selwrn := EMPDET
* #selwam #selwrn := *blanks
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.
