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-a742dd59-7d70-4984-a473-9f67707c46c5">Nick Name</label>
    
    <div class="control-wrapper">
        <input name="nickname" type="text" id="rc-a742dd59-7d70-4984-a473-9f67707c46c5" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-a742dd59-7d70-4984-a473-9f67707c46c5" 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-ea82584c-a5b5-41a7-8157-75afbec3ccbe">Last Name</label>
    
    <div class="control-wrapper">
        <input name="lastname" type="text" id="rc-ea82584c-a5b5-41a7-8157-75afbec3ccbe" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-ea82584c-a5b5-41a7-8157-75afbec3ccbe" 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-f27128fb-5d46-4063-b1fe-6aa85bf939cf">Email</label>
    
    <div class="control-wrapper">
        <input name="email" type="email" id="rc-f27128fb-5d46-4063-b1fe-6aa85bf939cf" class="form-control  " value="" required >
    </div>
    
        <span id="rfv-rc-f27128fb-5d46-4063-b1fe-6aa85bf939cf" 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-5649ee0e-ff3b-46fa-8c4d-775c7ffaa862">Employer</label>
    
    <div class="control-wrapper">
        <input name="employer" type="text" id="rc-5649ee0e-ff3b-46fa-8c4d-775c7ffaa862" 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