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-b5d91cac-d3aa-47b6-8f6b-5934f6d62081">Nick Name</label>
<div class="control-wrapper">
<input name="nickname" type="text" id="rc-b5d91cac-d3aa-47b6-8f6b-5934f6d62081" class="form-control " value="" required >
</div>
<span id="rfv-rc-b5d91cac-d3aa-47b6-8f6b-5934f6d62081" 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-743d1a59-888c-414c-9a65-b5e34562f2d0">Last Name</label>
<div class="control-wrapper">
<input name="lastname" type="text" id="rc-743d1a59-888c-414c-9a65-b5e34562f2d0" class="form-control " value="" required >
</div>
<span id="rfv-rc-743d1a59-888c-414c-9a65-b5e34562f2d0" 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-90627693-cd48-443d-8d33-5bba720b73a3">Email</label>
<div class="control-wrapper">
<input name="email" type="email" id="rc-90627693-cd48-443d-8d33-5bba720b73a3" class="form-control " value="" required >
</div>
<span id="rfv-rc-90627693-cd48-443d-8d33-5bba720b73a3" 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-a5a285c1-2439-4f97-aa86-e66303ebc97c">Employer</label>
<div class="control-wrapper">
<input name="employer" type="text" id="rc-a5a285c1-2439-4f97-aa86-e66303ebc97c" 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>