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-99ed1d6f-4710-45ff-a5d7-25db1a56667f">Nick Name</label>
    
    <div class="control-wrapper">
        <input name="nickname" type="text" id="rc-99ed1d6f-4710-45ff-a5d7-25db1a56667f" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-99ed1d6f-4710-45ff-a5d7-25db1a56667f" 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-bf99eceb-5537-4473-93ca-009517c62bac">Last Name</label>
    
    <div class="control-wrapper">
        <input name="lastname" type="text" id="rc-bf99eceb-5537-4473-93ca-009517c62bac" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-bf99eceb-5537-4473-93ca-009517c62bac" 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-56aad264-ac4f-4ad6-818d-12588db07f63">Email</label>
    
    <div class="control-wrapper">
        <input name="email" type="email" id="rc-56aad264-ac4f-4ad6-818d-12588db07f63" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-56aad264-ac4f-4ad6-818d-12588db07f63" 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-b74fbce3-84fa-4c4d-ae61-701fe52bf705">Employer</label>
    
    <div class="control-wrapper">
        <input name="employer" type="text" id="rc-b74fbce3-84fa-4c4d-ae61-701fe52bf705" 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