In this step you will create an OnAdd method which will be invoked when the web page uses ADD_ENTRY to add employee details from the list returned by the xEmployeeDataServer server module.
1. Switch to the Source tab.
Extend the Role keyword on the Begin_Com statement to include the following highlighted code:
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #prim_tree.iTreeDesign *listfields #ListFields) Displayposition(1) Height(270) Left(0) Tabposition(1) Top(0) Width(500) Layoutmanager(#TableLayout1) Themedrawstyle('listitem')
*implements #Prim_Tree.iTreeDesign means this reusable part implements a User Defined Control which will be implemented as the row of a tree control in the web page.
*listfields #ListFields defines a Group_By defining the fields to be mapped into this component when a row is added to the Tree list. That is, when an instance of this component is created.
2. Define a Group_by, named ListFields as shown:
* Fields mapped in when the entry is added to the Tree
Group_By Name(#ListFields) Fields(#xEmployeeIdentification #xEmployeeSurname #xEmployeeGivenNames #xEmployeeStreet #xEmployeeCity #xEmployeeState #xEmployeePostalCode #xEmployeeStartDate #xEmployeeTerminationDate #xDepartmentCode #xDepartmentDescription #xEmployeeImageThumbnail)
3. Define a method routine, named OnAdd which redefines the method in Prim_Tree.iTreeItem, based on the following:
Set up the initial Height for the reusable part, so that initially the height is down to the bottom of the MoreLess label.
For example: #Com_owner.Height := #MoreLess.Top + #MoreLess.height
Set up the iiiFullName field from the related fields for the employee.
For example: #iiiFullName := #xEmployeeGivenNames + ', ' + #xEmployeeSurname + ' (' + #xEmployeeIdentification + ')'
Set up the Department label from the department fields.
For example: #Department := #xDepartmemtDescription + ' (' + #DepartmentCode + ')'
Set up Street, City and State labels from their field value
e.g. #Street := #xEmployeeStreet */label Caption is default property /*
If field xEmployeeTerminationDate is not SQLNULL:
Set the StartDate label's ThemeDrawStyle property to 'poor':
Set the StartDate label's Caption property to contain the terminate date:
#StartDate.caption := 'No longer employed - ' + #xEmployeeTerminationDate.asdisplayString
else
Set StartDate's ThemeDrawStyle property to 'good'.
Set StartDate Caption to 'Employed - ' + #xEmployeeSTartDate.asdisplaystring
Endif
Set up the EmployeeImage by setting FileName property to the field xEmployeeImageThumbnail
Your completed code should look like the following:
Mthroutine Name(OnAdd) Options(*REDEFINE)
#COM_OWNER.Height := #MoreLess.top + #MoreLess.height
#iiiFullName := #xEmployeeGivenNames + ', ' + #xEmployeeSurname + '(' + #xEmployeeIdentification + ')'
#Department := #xDepartmentDescription + ' (' + #xDepartmentCode + ')'
#Street := #xEmployeeStreet
#City := #xEmployeeCity
#State := #xEmployeeState
#PostalCode := #xEmployeePostalCode
If (#xEmployeeTerminationDate *IsNot *sqlnull)
#StartDate.ThemeDrawStyle := POOR
#StartDate.Caption := 'Left company: ' + #xEmployeeTerminationDate.AsDisplayString
Else
#StartDate.ThemeDrawStyle := GOOD
#StartDate.Caption := 'Employed - ' + #xEmployeeStartDate.asdisplaystring
Endif
#EmployeeImage.filename := #xEmployeeImageThumbnail
Endroutine
Note: The above code uses ThemeDrawStyles which are defined by the Theme xDemoTheme which will be applied to the web page. With a Theme applied to a web page, the Theme ribbon shows the DrawStyle's available:
This xDemoTheme is part of the shipped demonstration applications.
4. Create an event handling routine for a Click event on the label MoreLess.
If the reusable part height is greater than the value of Top plus Height of the MoreLess label
Set the reusable part Height to the value Top + Height of the MoreLess label
change its Caption to "Show Details".
Otherwise
Set the reusable part's Height to Top plus Height of the PostalCode field
change the MoreLess Caption to "Hide Details".
End if.
Your code should look like the following
Evtroutine Handling(#MoreLess.Click)
If (#COM_OWNER.height > (#MoreLess.top + #MoreLess.height))
#COM_OWNER.Height := #MoreLess.top + #MoreLess.Height
#MoreLess.Caption := 'Show details'
Else
#COM_OWNER.Height := #PostalCode.top + #PostalCode.Height
#MoreLess.Caption := 'Hide Details'
Endif
Endroutine
5. Compile the reusable part.
