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-4a847b9e-3631-408d-88b2-18a5edc11843">Nick Name</label>
<div class="control-wrapper">
<input name="nickname" type="text" id="rc-4a847b9e-3631-408d-88b2-18a5edc11843" class="form-control " value="" required >
</div>
<span id="rfv-rc-4a847b9e-3631-408d-88b2-18a5edc11843" 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-aad7c314-781f-481d-88a0-a568761ac687">Last Name</label>
<div class="control-wrapper">
<input name="lastname" type="text" id="rc-aad7c314-781f-481d-88a0-a568761ac687" class="form-control " value="" required >
</div>
<span id="rfv-rc-aad7c314-781f-481d-88a0-a568761ac687" 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-13d36ae5-41f6-4217-a1af-dbdf51a62507">Email</label>
<div class="control-wrapper">
<input name="email" type="email" id="rc-13d36ae5-41f6-4217-a1af-dbdf51a62507" class="form-control " value="" required >
</div>
<span id="rfv-rc-13d36ae5-41f6-4217-a1af-dbdf51a62507" 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-42dcbcfc-f0b1-4b8a-8800-5642a1428e23">Employer</label>
<div class="control-wrapper">
<input name="employer" type="text" id="rc-42dcbcfc-f0b1-4b8a-8800-5642a1428e23" 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>