templates.demos.htmlForms.dynamic.html Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of spincast-website Show documentation
Source code for the https://www.spincast.org website.
There is a newer version: 2.2.0
{% extends "../htmlForms.html" %}

{% block demoSectionClasses %}demo_html_forms_single{% endblock %}
{% block meta_title %}Demos - HTML Forms - Dynamic Fields{% endblock %}
{% block meta_description %}Dynamic Fields HTML Forms with validation demo{% endblock %}

{% set demoId = "dynamic" %}

{% block scripts %}

{#==========================================
We use Handlebars as a client-side 
templating engine to generate new elements.
==========================================#}



{#==========================================
Transforms the Pebble "User" template to a
Handlebars template so it can be used to
dynamically add a new User using javascript.
==========================================#}


{#==========================================
New tag template
==========================================#}
{% verbatim %}

{% endverbatim %}

{% endblock %}

{% block demoBody %}

    
    Dynamic Fields



    
        Please note : 
        

            It is important to know that this demo is not a SPA and 
            doesn't use any data management javascript library. 
            There is no "store" as the source of the dynamic elements. 
        
        
            This demo shows how the form model
            can be manipulated freely on the client side simply using the
            "name" attributes on a traditional HTML form. 
            It is fully working even when javascript is disabled.
        
        
            We're going to provide a true SPA demo in a near future.
         
    



    Add tags and new
    users and submit the form to see the validations in action! All existing field are required and have
    a minimum length. Also, tags must all be different in a given User section.


     
    
    
        
              
            {% if validation['demoForm._'] | validationSubmitted()%}
            
                {% if validation['demoForm._'] | validationHasErrors() %}
                    {% set alertClass = "alert-danger" %}
                    {% set status = "Some users are invalid" %}
                    
                {% elseif validation['demoForm._'] | validationHasWarnings() %}
                    {% set alertClass = "alert-warning" %}
                    {% set status = "Some users contains warnings" %}
                    
                {% elseif validation['demoForm._'] | validationIsValid() %}
                    {% set alertClass = "alert-success" %}
                    {% set status = "All users are valid!" %} 
                {% endif %}
            
                
                    
                        
                             {{status}} 
                        
                    
                 
            {% endif %}
              
            {% for user in demoForm.users | default([]) %}
                {% set userPath = "demoForm.users[" + loop.index + "]" %}
                {% include "./dynamic/userFragment.html" with 
                        {"position" : loop.index, "positionInc" : loop.index + 1} %}
            {% endfor %}
            
            
            
            
                   
            
            
            
                
                    
                
            
        
    



    
    Code


    

        
            The controller (the backend part) : 
            DemoHtmlFormsDynamicFieldsController.java
        
        
            The HTML templates (the frontend part) : 
            
            
                
                    dynamic.html
                
                
                    userFragment.html
                
             
        
    




    
    How to


    The explanation of this demo will be quite short. We encourage
    you to look at the source to see how it actually works!

    Basically, this demo shows how the fields of a traditional HTML form
    can be manipulate to change the underlying form model.
    Spincast uses the "name" 
    attributes of the fields of a form to dynamically build
    a JsonObject representing this form.


    When a form is submitted, we get a JsonObject which represents it :

    

        
            
Form form = context.request().getFormOrCreate("demoForm");
context.response().addForm(form);       
        
      
    The structure of this form (which is also a JsonObject under the hood!) 
    depends on the names of the submitted fields. If you add or 
    remove some fields client-side, the form
    object will reflect those modifications. This allows great flexibility when using
    traditional HTML forms (vs. SPA or using data management javascript libraries) 
    since the model can be dynamically changed, client-side.


    Also, by adding back that dynamic JsonObject to the 
    response model,
    you can re-render the form and all the fields are kept, as they
    were submitted.



    
    More info


    Make sure you also try the first demo of this section, Introduction - Single field
    which introduces forms and validation using Spincast.


    Otherwise, you can learn everything about forms and validation in the dedicated 
    Forms section of the documentation.


{% endblock %}