Jump to content
Graham Quince

Displaying a form submission using HTML

Recommended Posts

The data viewer is great for functionality, but I've had a few requests recently for a "prettier" version.  The trouble is that form fields can be quite difficult to work out which response is for what field.   This code bypasses that issue:

 

<style>
    .mydata_section {
        background: #ffffff;
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
        padding: 6px;
        min-height: 50px;
        font-size: 16px;
        line-height: 21px;
    }
    
    .text_centre {
        text-align: center !important;
    }

</style>

<div class="my_data">
    <div class="row-fluid">
        <div class="span12 FIELD1"></div>
    </div>
    <div class="row-fluid">
        <div class="span2 text_centre FIELD2"></div>
        <div class="span10 FIELD3"></div>
    </div>

    <div class="row-fluid">
        <div class="span12 FIELD4"></div>
    </div>
</div> 
  
<script>

var myDataDiv = arguments[0].find('.my_data');
var user = FrogOS.getUser();
var formUUID = 'FORM_UUID';

function getForm() {
    Frog.Model.api('dataviewer.gettable', {
        content_uuid: formUUID,
        current_user_only: 'false',
        form_uuid: formUUID,
        limit: 1,
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    }).done(function(response) {
        var fields = response.data[0].fields;

        $.each(fields, function(index, field) {
            var fieldClass = field.label.replace(/[^A-Z0-9]/ig, '');

                myDataDiv.find('.'+fieldClass).append(
                    '<div class="myform_text mydata_section">'+
                    '<b>'+field.label+'</b><BR>'+
                    field.responses[0].response+
                    '</div>'
                );
        })
        
    }); // end of API response
    
}
getForm();
</script>

 

What's going on

There's some CSS at the top, just to create a box for each field.  

<style>
    .mydata_section {
        background: #ffffff;
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid #CCCCCC;
        border-radius: 6px;
        padding: 6px;
        min-height: 50px;
        font-size: 16px;
        line-height: 21px;
    }
    
    .text_centre {
        text-align: center !important;
    }

</style>

 

Then there's standard HTML, but each DIV has a class which corresponds to the field name from the form.  You have to remove any spaces or special characters and match the case.  In the example, the fields are named "FIELD 1:" to  "FIELD 4:" but the classes become FIELD1 etc...  with the spaces and colons removed.

Because Frog uses Bootstrap, this allows us to use Span classes to set the width for each box.  Span4 is a third the width of a page, Span12 is full width.  The class row-fluid keeps all the span elements to matching widths.

<div class="my_data">
    <div class="row-fluid">
        <div class="span12 FIELD1"></div>
    </div>
    <div class="row-fluid">
        <div class="span2 text_centre FIELD2"></div>
        <div class="span10 FIELD3"></div>
    </div>

    <div class="row-fluid">
        <div class="span12 FIELD4"></div>
    </div>
</div>

 

The script section first finds the my_data DIV, then you need to identify the form's UUID.

It uses the Form's UUID with the Data viewer's API to get the form's entry, cycles through all the fields for the first entry it finds.  

For each field, it generates a class name by taking the field name and removing spaces and special characters.  Then it appends a new div to it, with the field's name (field.label) and the response.

<script>

var myDataDiv = arguments[0].find('.my_data');
var user = FrogOS.getUser();
var formUUID = 'FORM_UUID';

function getForm() {
    Frog.Model.api('dataviewer.gettable', {
        content_uuid: formUUID,
        current_user_only: 'false',
        form_uuid: formUUID,
        limit: 1,
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    }).done(function(response) {
        var fields = response.data[0].fields;

        $.each(fields, function(index, field) {
            var fieldClass = field.label.replace(/[^A-Z0-9]/ig, '');

                myDataDiv.find('.'+fieldClass).append(
                    '<div class="myform_text mydata_section">'+
                    '<b>'+field.label+'</b><BR>'+
                    field.responses[0].response+
                    '</div>'
                );
        })
        
    }); // end of API response
    
}
getForm();
</script>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



×
×
  • Create New...