Form fill in play framework scala doesn't work

Question

I'm creating an application with list of employees. An admin can see the list of employees and change their data. When he clicks "change" button, html form should be filled with chosen employee data so he could change it. I used standard mechanism in play framework but it doesn't work. I was debugging it and everything looks ok (employee data is set to form) but it doesn't display on my html form... I have no idea why...

  def loadEmployee(id: Int) = Action { implicit request =>
    val loadedEmployee = EmployeeService.getEmployee(id)
    val employee = Await.result(loadedEmployee, Duration(5, SECONDS)).get

    val employees = Await.result(EmployeeService.listAllEmployees, Duration(5, SECONDS))

    val form = EmployeeForm.form.fill(EmployeeFormData(employee.name, employee.additionalInformation, employee.resume))

    Ok(views.html.index(form,employees))
  }

View file:

@(employeeForm: Form[models.EmployeeFormData],employees : Seq[models.Employee])
@main() {


    <form id="employee-data-form" role="form" action='@routes.ApplicationController.addInformation()' method="post" class="form-horizontal" align="center" autocomplete="off">

        <fieldset class="employee-fieldset">

            <div class="employee-form">
                <label class="form-title" style="color: #F8741B; font-size: 22px;font-weight: bold; text-decoration:none">title</label>
            </div>
            <br/>
            <table align="center" cellspacing="20">
                <tr>
                    <td align="left">
                        <div class="employee-form" id="name_field_label">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <strong>name</strong> :
                                </div>
                            </div>
                        </div>
                    </td>
                    <td align="center">
                        <div class="employee-form" id="name_field_value">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>                               
                                    <input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>                                
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <div class="employee-form" id="additionalInformation_field_label">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <strong>Additional information</strong> :
                                </div>
                            </div>
                        </div>
                    </td>
                    <td align="center">
                        <div class="employee-form" id="additionalInformation_field_value">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <textarea rows="4" cols="50" id="additionalInformation" name="additionalInformation" value="" class="form-control input-lg" required></textarea>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td align="left">
                        <div class="employee-form" id="resume_field_label">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <strong>resume</strong> :
                                </div>
                            </div>
                        </div>
                    </td>
                    <td align="center">
                        <div class="employee-form" id="resume_field_value">
                            <div class="controls col-xs-offset-3 col-xs-9">
                                <div class="input-group">
                                    <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
                                    <textarea rows="4" cols="50" id="resume" name="resume" class="form-control input-lg" required></textarea>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>

            </table>
            <br/>
            <div class="form-actions controls ynt-btn-xlarge">
                <button type="submit" class="btn btn-primary ynt-btn-orange">Add</button>
            </div>

        </fieldset>
    </form>

    <div class="employee-display" >
        <fieldset>
            <legend align="center"><h3>Registered Employees</h3></legend>
            <table cellspacing="20">
                <tr>
                    <th>employeeid</th>
                    <th>firstname</th>
                    <th>lastname</th>
                    <th>resume</th>
                </tr>
                @for(employee <- employees){
                    <tr>
                        <td>@employee.id</td>
                        <td>@employee.name</td>
                        <td>@employee.additionalInformation</td>
                        <td>@employee.resume</td>
                        <td><a href="@routes.ApplicationController.deleteEmployee(employee.id)">delete</a></td>     
                        <td><a href="@routes.ApplicationController.loadEmployee(employee.id)">loadEmployee</a></td>                   
                    </tr>
                    }
            </table>
        </fieldset>
    </div>

}

Answer 1

Your controller code looks OK - you're filling a Form[EmployeeFormData] and passing it to your template. The trouble is, you never use your employeeForm inside the template - there's no way that form can be populated.

If you read up on the Play documentation for showing forms in a view template you'll see that there is a whole family of helpers available for this purpose. In many cases, they are almost as easy to write as the "plain HTML" version such as you've used. Here's an example:

Where you had:

<div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
  <input type="text" id="name" name="name" value="" placeholder="First Name" class="form-control input-lg" required>
</div>

You will need:

<div class="input-group">
  <span class="input-group-addon"><span class="glyphicon glyphicon-employee"></span></span>
  @helper.inputText(
    employeeForm("name"),
    'id -> "name",
    'placeholder -> "First Name",
    'class -> "form-control input-lg",
    'required -> "true"      
  )
</div>

Notice how you can pass any number of arbitrary arguments into the generated HTML by prefixing with the ' character. This can be very handy, for example if you would like to set extra data- attributes on the input.