Employee Information Form

An Employee Information Form is a document that collects personal and professional details about each employee during the onboarding process. The form is usually titled with an employee's name and consists of several sections, such as contact information, work details, emergency contact, education and employment history, and other relevant information. The purpose of the form is to create a comprehensive employee profile and store important information for HR and payroll purposes.

This demo shows how to create an all-in-one Employee Information Form that allows you to add new employees on the fly. Enter an employee name and click Edit Details to open a detail form where you can fill out employee details. On the last page, you can view a summary table of all employees.

To create an Employee Information Form, use a Dynamic Matrix question. It displays data in a tabular form and allows users to add new entries. In this demo, a Dynamic Matrix displays a single column in which you can enter employee names.

Each matrix row displays an Edit Details button that opens a detail form for an individual employee. To add this button, handle the onGetMatrixRowActions event.

Employee detail forms are built upon a Dynamic Panel question where each panel is an individual employee form. To configure the Dynamic Panel question, follow the steps below:

1. Specify a panel template.
   Use the templateTitle property to set a dynamic title and specify the templateElements array to define panel content. In this demo, the Dynamic Panel template contains several static panels with survey questions.

2. Associate the Dynamic Panel with the Dynamic Matrix.
   In JavaScript code, call Serializer's addProperty method to add a custom detailForm property to Dynamic Matrix questions. This property will be used to associate a Dynamic Panel with a Dynamic Matrix question. In the survey JSON schema, set the detailForm property to the Dynamic Panel's name value.

3. Disallow users to add and remove panels.
   In the use case you implement, the number of panels equals the number of entered employee names. Users should not be able to delete or add new panels. Disable the allowAddPanel and allowRemovePanel properties.

4. (Optional) Configure minor usability enhancements.
   Since you configured a dynamic title in step 1, you can hide the static title. Set the titleLocation property to "hidden". In addition, you can add a progress bar that indicates the number of filled out employee forms. To display the progress bar, set the renderMode property to "progressTop".

A summary table allows users to preview key employee data. This table is a Dynamic Matrix with read-only columns. To populate the columns, set their names to data fields that contain survey result values. In this demo, the matrix contains two columns that display values from the name and phone data fields. You may also want to disable the allowAddRows and allowRemoveRows properties to disallow row addition and removal.

All parts of the Employee Information Form should save values to and take them from the same data fields. Use the valueName property to implement this behavior. Set this property to the same value for those elements that should share data. In this demo, the Dynamic Panel and both Dynamic Matrix elements save data to an employees array. Refer to the following help topic for more information: Merge Question Values.