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-37c6628e-17db-421a-becd-74701e79e071">Nick Name</label>
	
	<div class="control-wrapper">
		<input name="nickname" type="text" id="rc-37c6628e-17db-421a-becd-74701e79e071" class="form-control  " value="" required >
	</div>
	
	    <span id="rfv-rc-37c6628e-17db-421a-becd-74701e79e071" 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-930830c1-76a4-439a-ad4a-12576b9ad703">Last Name</label>
	
	<div class="control-wrapper">
		<input name="lastname" type="text" id="rc-930830c1-76a4-439a-ad4a-12576b9ad703" class="form-control  " value="" required >
	</div>
	
	    <span id="rfv-rc-930830c1-76a4-439a-ad4a-12576b9ad703" 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-a2ac5bdc-e478-4e7c-a6ed-1cd26cb2f64f">Email</label>
	
	<div class="control-wrapper">
		<input name="email" type="email" id="rc-a2ac5bdc-e478-4e7c-a6ed-1cd26cb2f64f" class="form-control  " value="" required >
	</div>
	
	    <span id="rfv-rc-a2ac5bdc-e478-4e7c-a6ed-1cd26cb2f64f" 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-dce01cb1-86d3-4716-8d66-ea3c139eb163">Employer</label>
	
	<div class="control-wrapper">
		<input name="employer" type="text" id="rc-dce01cb1-86d3-4716-8d66-ea3c139eb163" 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