View Source

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 on 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:

Visual LANSA Version 15 > Step 2. Add Logic to Reusable Part > step 2 add logic to reusable part.png

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.