Forms

Overview

This example demonstrates the process of editing data using a form, which consists of several steps:

First, we'll display the data in a view mode.
When the individual clicks the 'Edit' button we'll call back to the Lava Endpoint to show a form.
After clicking 'Save' we'll call an endpoint to save the data and redisplay the data in a view state.

Step 1: View Mode

This Lava is placed in the Application Content Blocks initial content.

<div id="person-detail">
    <dl>
        <dt>Name</dt>
        <dd></dd>
    </dl>
    
    <dl>
        <dt>Email</dt>
        <dd></dd>
    </dl>
    
    <dl>
        <dt>Employer</dt>
        <dd></dd>
    </dl>
    
    <a class="btn btn-primary" 
        hx-get="^/helix-gallery/person-edit-show" 
        hx-target="#person-detail">Edit</a>
</div>

Step 2: Edit Mode

The Lava below comes from our first call back to the 'person-edit-show' endpoint.

<lava-form>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group rock-text-box required">
    
        <label class="control-label" for="rc-09c4b57e-0fa1-4c54-b43c-843f3adb9e17">Nick Name</label>
    
    <div class="control-wrapper">
        <input name="nickname" type="text" id="rc-09c4b57e-0fa1-4c54-b43c-843f3adb9e17" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-09c4b57e-0fa1-4c54-b43c-843f3adb9e17" class="validation-error help-inline" style="display:none;">Please enter a value.</span>
    
</div>
        </div>
        <div class="col-md-6">
            <div class="form-group rock-text-box required">
    
        <label class="control-label" for="rc-0c496e35-f8d3-4ba0-be8d-92729dea22d8">Last Name</label>
    
    <div class="control-wrapper">
        <input name="lastname" type="text" id="rc-0c496e35-f8d3-4ba0-be8d-92729dea22d8" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-0c496e35-f8d3-4ba0-be8d-92729dea22d8" class="validation-error help-inline" style="display:none;">Please enter a value.</span>
    
</div>
        </div>
        <div class="col-md-6">
            <div class="form-group rock-text-box required">
    
        <label class="control-label" for="rc-6939c42e-086d-4bbf-a8d6-2e66c3a9012e">Email</label>
    
    <div class="control-wrapper">
        <input name="email" type="email" id="rc-6939c42e-086d-4bbf-a8d6-2e66c3a9012e" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-6939c42e-086d-4bbf-a8d6-2e66c3a9012e" class="validation-error help-inline" style="display:none;">Please enter a value.</span>
    
</div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group rock-text-box ">
    
        <label class="control-label" for="rc-af6b7d3c-8b7e-4f18-ba1b-1c48beb2e704">Employer</label>
    
    <div class="control-wrapper">
        <input name="employer" type="text" id="rc-af6b7d3c-8b7e-4f18-ba1b-1c48beb2e704" class="form-control  " value=""  >
    </div>
    
</div>
        </div>
    </div>
    
    <a class="btn btn-primary" 
        hx-post="^/helix-gallery/person-edit-save"
        hx-target="#person-detail">Save</a>
        
    <a class="btn btn-link" 
        hx-get="^/helix-gallery/person-view"
        hx-target="#person-detail">Cancel</a>
</lava-form>

Step 4: Save

The Lava below comes from our second call to the 'person-edit-save' endpoint.

{% modifyperson id:'{{ CurrentPerson.Id }}' clientvalidationenabled:'true' %}

    [[ property name:'NickName' isrequired:'true']]{{ Form.nickname }}[[ endproperty ]]
    [[ property name:'LastName' isrequired:'true' minlength:'2' validationmessage:'Please enter a last name with more than one character.']]{{ Form.lastname }}[[ endproperty ]]
    [[ property name:'Email' isrequired:'true']]{{ Form.email }}[[ endproperty ]]
    
    [[ attribute key:'Employer']]{{ Form.employer }}[[ endattribute ]]
    
{% endmodifyperson %}

{% if ModifyResult.Success == true %}
    {% httpresponse %}
        [[ header key:'HX-Replace-Url' ]]/helix/form[[ endheader ]]
    {% endhttpresponse %}
{% endif %}

<div id="person-detail">
    <dl>
        <dt>Name</dt>
        <dd>{{ ModifyResult.Person.FullName }}</dd>
    </dl>
    
    <dl>
        <dt>Email</dt>
        <dd>{{ ModifyResult.Person.Email }}</dd>
    </dl>
    
    <dl>
        <dt>Employer</dt>
        <dd>{{  ModifyResult.Person | Attribute:'Employer' }}</dd>
    </dl>
    
    <a class="btn btn-primary" 
        hx-get="^/helix-gallery/person-edit-show" 
        hx-target="#person-detail">Edit</a>
</div>

You are updating data that other people will see. Please be kind.

Name: Ted Decker

Email: ted@rocksolidchurchdemo.com

Employer: Rock Solid Church

Edit