Step 3.  Create the Employee Tree Form

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)





7.  Invoke GetEmployees from the form CreateInstance event

Evtroutine Handling(#com_owner.CreateInstance)

Set Com(#com_owner) Caption(*component_desc)




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.