1. Create a New / Form / Blank Form
Name: iiiEmployeeTree
Description: Employee Tree with More / Less
2. Give the form a Theme of xDemoTheme. Use the ellipsis button to Find the Theme. Alternatively, select the Theme ribbon and select xDemoTheme from the list under Custom.
3. On the Controls tab, Expand Tree components. This will list all UDC reusable parts which implement the Prim_Tree.iTreeDesign component.
Drag the iiiTreeEmployeeItem onto the form, which will define a Tree List component which uses your Tree Item component.
Define_Com Class(#PRIM_TREE<#IIITRE_1>) Name(#Tree1) Displayposition(1) Left(0) Parent(#COM_OWNER) Tabposition(1) Top(0) Height(503) Width(704)
Class() refers to your Tree Item UDC component by its Identifier.
4. With the Tree component selected, select the Layout ribbon and change Size to Fit Both.
Your design should look like the following:
5. Copy and paste the Group_By definition from reusable part iiiEmployeeTreeItem:
Group_By Name(#Listfields) Fields(#xEmployeeIdentification #xEmployeeSurname #xEmployeeGivenNames #xEmployeeStreet #xEmployeeCity #xEmployeeState #xEmployeePostalCode #xEmployeeStartDate #xEmployeeTerminationDate #xDepartmentDescription #xDepartmentCode #xEmployeeImageThumbnail)
6. Create a GetEmployees method routine, which performs the following:
Clear list Tree1
Select fields ListFields from table xemployee
Fetch field xEmployeeImageThumbnail from table xEmployeeImages with key xEmployeeIdentification
Fetch field xDepartmentDescription from table xDepartments with key xDepartmentCode
Add entry to list Tree1
End Select
Your code should look like the following:
Mthroutine Name(GetEmployees)
Clr_List Named(#Tree1)
Select Fields(#Listfields) From_File(xEmployee)
Fetch Fields(#xEmployeeImageThumbnail) From_File(xEmployeeImages) With_Key(#xEmployeeIdentification)
Fetch Fields(#xDepartmentDescription) From_File(xdepartments) With_Key(#xDepartmentCode)
Add_Entry To_List(#Tree1)
Endselect
Endroutine
7. Invoke GetEmployees from the form CreateInstance event
Evtroutine Handling(#com_owner.CreateInstance)
Set Com(#com_owner) Caption(*component_desc)
#com_self.GetEmployees
Endroutine
8. Compile and test the form. Initially the tree should be displayed like this:
Hovering the mouse on a row highlights it in blue. This is the MouseOver style defined for the Control Theme DrawStyle ListItem, which we applied to the reusable part.
9. Clicking on ShowDetails (the MoreLess label) causes the UDC to resize and display more detail. Then clicking on Hide Details reduces the size of the UDC to hide employee details.
In the shipped employee table, none of the employees have a Termination Date. Modify form iiiMaintEmployeeAndNotes to change Termination Date, in order to test the style applied to label StartDate when this date is not SQLNULL.
