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-16ffffdf-7056-4a4f-9c4f-17dbae67b923">Nick Name</label>
	
	<div class="control-wrapper">
		<input name="nickname" type="text" id="rc-16ffffdf-7056-4a4f-9c4f-17dbae67b923" class="form-control  " value="" required >
	</div>
	
	    <span id="rfv-rc-16ffffdf-7056-4a4f-9c4f-17dbae67b923" 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-1bb97db9-9875-4876-9e63-b7c331e624da">Last Name</label>
	
	<div class="control-wrapper">
		<input name="lastname" type="text" id="rc-1bb97db9-9875-4876-9e63-b7c331e624da" class="form-control  " value="" required >
	</div>
	
	    <span id="rfv-rc-1bb97db9-9875-4876-9e63-b7c331e624da" 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-b487ae2e-8066-4100-bab7-6c8d081bb8ff">Email</label>
	
	<div class="control-wrapper">
		<input name="email" type="email" id="rc-b487ae2e-8066-4100-bab7-6c8d081bb8ff" class="form-control  " value="" required >
	</div>
	
	    <span id="rfv-rc-b487ae2e-8066-4100-bab7-6c8d081bb8ff" 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-e49dd607-ace1-4119-9e25-4368f0d5eff9">Employer</label>
	
	<div class="control-wrapper">
		<input name="employer" type="text" id="rc-e49dd607-ace1-4119-9e25-4368f0d5eff9" 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