1. Execute your Employees Tree web page. Initially the list should show employee details on the UDC, hiding the address details.
The StartDate label has a ThemeDrawStyle of good (this value is not case sensitive), if field Termination Date is SQLNULL. The ThemDrawStyle is changed to Poor, if Termination Date is not SQLNULL. The ThemeDrawStyle "good" and "poor" are defined in the Theme xDemoTheme, which is applied to the web page.
2. As you move the cursor over each row it should be highlighted with a light blue background. The UDC has a ThemeDrawStyle of ListItem, which is defined in the Theme, xDemoTheme applied to the web page.
3. If you move the cursor over the "Show Details" text, notice the cursor changes to the Windows hand cursor.
4. Clicking the "Show Details" text should display the employee address for that employee:
5. Click Hide Details text (which is the MoreLess label) to hide the address details again. This is controlled by the If condition which compares the height of the UDC panel with "MoreLess.Top + MoreLess.Height". The rows are defined as having a fixed height so that they can be controlled in this way.
6. Use the iiiAddEmployee application to set Termination Date for one or two employees. You just need to add xEmployeeTerminationDate to the web page, define its layout items. and compile.
Execute the Employee Tree web page again. The Start Date label should now show the terminate date with a red background for employees with a Termination Date.
This is controlled by the If condition "Terminate Date is not SQLNull", which sets the StartDate label's ThemeDrawStyle to poor, which is again defined by theme xDemoTheme.
