This describes the "cookbook" recipes for building the HR Vacation Management Application.

(Updated 6/7/11 for WaveMaker 6.3)

Project source file to download

Download AnonLogin application files here:

  1. WaveMaker Anonymous User Login project: HrApp WM 6.3 Project Export
  2. hrdb database: this application uses the built-in hrdb database

HrApp Features and Screenshot

The HR Vacation Management app shows how to build a more advanced form-driven application with WaveMaker. It uses the built-in hrdb database and highlights the following capabilities:

  • Link one grid to the selection of another grid. Selecting a department shows the employees for that department
  • Navigation upon selecting a grid row. Selecting an employee navigates to an employee detail form that also shows all vacations for that employee
  • Database Widget LiveForm with dialog boxes. User can double click a vacation to update it or use the new/update/delete buttons to manage vacations
  • Grid data management. Don't show employees if no department is selected
  • Default dates. Set default start and end dates for a vacation
  • Multi-field form validation. Validate that vacation end date is not earlier than start date
Here is a screenshot of the running application: hrapp.png

Getting Started

This is a an application that demonstrates how to use the WaveMaker security services.

This project is an open source project licensed under the Apache license.

To build this project:

  1. Download and install WaveMaker
  2. Run WaveMaker and use File->import to copy the file to the appropriate WaveMaker project directory
  3. The project is already configured to use the built-in HSQLDB database named "hrdb"
  4. Press Run in the WaveMaker studio to deploy and run the web application. The deployment will use the Tomcat server bundled with WaveMaker

Application Structure

The HrApp application is structured as a single page with several tab layers:

  • Main: shows a grid with departments. When a department is selected, shows the employees for that department. When an employee is selected, navigates to a different tab layer to show employee details.
  • Details: shows details for the selected employee and a grid with all vacation entries for that employee. Double clicking a vacation row brings up a dialog to update that vacation.

Service Variables and Navigation Variables Used in the Application

  • departmentLiveVar: returns list of departments
  • employeeLiveVar: updated by department grid onClick event and filtered to show only employees for selected department
  • vacationLiveVar: updated by detailNav navigation call onResult event and filtered to show only vacations for selected employee
  • detailNav: called by onClick event for employee grid and navigates to detail tab. Fires onResult event to update vacation live variable.

Notes on the application

This sample application assumes you have already completed the basic WaveMaker tutorials.

  1. Create a new project and use the Tabs Template
  2. Go to Servicess->Import Database and import the hrdb database (Database system: HSQLDB, Username: sa, File:hrdb)
  3. Go to Insert->Live Variable. Set the name property to departmentLiveVar and the operation property to hrdb.Department
  4. Drag a Grid into the Tab 1/layer1 container. Set the name property to departmentGrid and the dataSet property to departmentLiveVar
  5. Go to Insert->Live Variable. Set the name property to employeeLiveVar and the operation property to hrdb.Employee
  6. Click the filter properties group for employeeLiveVar. Bind the department* Data property to departmentGrid. This will filter the employeLiveVar to only show employees who are related to the currently selected department.
  7. Drag a Grid into the Tab 1/layer1 container. Set the name property to employeeGrid and the dataSet property to employeeLiveVar
  8. In the canvas, click on Tab 2/layer2
  9. Drag a Form widget into Tab2. Set the dataSet property to employeeGrid.selectedItem
  10. Drag a Vacation database widget into Tab 2 below the Employee Form. Click the Dialog layout for how you want your data to look.
  11. In the Vacation dialog box, select the employeeLookup editor. Bind the defaultInsert property to employeeGrid.selectedItem.
  12. In the Vacation dialog box, uncheck the showing property for the ID and TenantId editors. Select the Vacation dialog and click the Esc key to dismiss the dialog
  13. Right click the Vacation grid and select editColumns. Remove all the columns but start date, end date and employee.lastname
  14. Click the Services tab to show the LiveVariables. Click the vacationLiveVariable1. Click the filter property group. Bind the employee* data property to employeeGrid.selectedItem
  15. In the canvas, click on Tab 1/layer1
  16. Select the employeeGrid. Click the Events property group. For the onClick event, select New Navigation.
  17. For the new navigation, change the name property to detailsNav. Click the input properties group. For the Layers property, select layer2. This will cause a navigation to tab2 whenever an employee is selected from the list.

Fancy stuff

Don't show grid contents until related grid row selected

Don't show employees until department is selected

  1. Click the Services tab and select employeeLiveVar. Uncheck the autoUpdate and startUpdate properties
  2. In the canvas, select the departmentGrid. Click the Events property group and from the onClick drop-down, select the employeeLiveVar. This will cause the employeeLiveVar to be updated each time a department is selected.
Don't show vacations until employee is selected
  1. Click the Services tab and select vacationLiveVar. Uncheck the autoUpdate and startUpdate properties
  2. Note that the onClick event for the employeeGrid widget is being used to call a navigation service. Select the detailNav service from the services tree. Click the Events property group. From the onResult event drop-down, select the vacationLiveVar item. This will cause the vacationLiveVar variable to be updated each time an employee is selected and the navigation to the details tab is completed.

Set default date for date editor

  1. Select the Model tab and click on the vacationDialog component to bring up the vacationDialog window
  2. Select the startDate editor. For the defaultInsert property, call up the binding editor and select the Expression radio button. Enter the expression, "new Date()". This will cause a new vacation request to default to a start date of today's date
  3. Do the same thing for the endDate editor

Validate multiple fields in form

Validate that vacation end date is not earlier than start date

  1. Select the Source->Script tab. Add a custom validation method as follows:
// Called by the customGetValidate event for the vacationLiveForm1 widget
   validateVacation: function() {
       // Check if the enddate for the vacation is after the startdate
       if (this.enddateEditor1.getDataValue() < this.startdateEditor1.getDataValue()) {
           // Display an error message
           this.vacMessagelabel.setCaption("Vacation start date must be earlier than end date!");   
           // This will automatically disable the save button in the form
           return false;
       } else {
           // Clear the error message
           return true;
  1. Select the vacationLiveForm1 widget. Click the CustomMethods property group
  2. From the customGetValidate drop-down select the validateVacation function. This will ensure that this function is called whenever a form field changes.
  3. Add a label to the vacationLiveForm1 container and set the name to vacMessageLabel and the caption to "". This will hold any error message from the validation function

© 2004-  WaveMaker, Inc