Displaying a form submission using HTML

[Graham Quince]

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>

 

[Graham Quince]

Just had a case where we needed to display the form data in a table:

<div class="refresh">
    <span class="ff-refresh-mono"></span> Refresh
</div>
<div style="float: right;" class="btn download_doc">
    <span class="ff-download-mono"></span> Download for MS Word
</div>
<div class="docx">
    <div class="WordSection1">
      <table class="table table-bordered table-hover my_data"></table>
    </div>
</div>
<script>
var refreshButtonOBJ = arguments[0].find('.refresh');
var downloadDOC = arguments[0].find('.download_doc');
var docx = arguments[0].find('.docx');
var myDataDiv = arguments[0].find('.my_data');
var user = FrogOS.getUser();
var formUUID = 'FORM_UUID';

function getObjSummary() {
    
    myDataDiv.empty();
    Frog.Model.api('dataviewer.gettable', {
        content_uuid: formUUID,
        current_user_only: 'false',
        form_uuid: formUUID,
        limit: 50,
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    }).done(function(response) {
        var submissions = response.data;
        
        myDataDiv.append('<tr class="headerrow"></tr>');
        var headers = submissions[0].fields;
        $.each(headers, function(ind,field) {
            if (field.type !== 'freetext') { // Freetext is the text widget field
                myDataDiv.find('.headerrow').append(
                    '<th>'+field.label+'</th>'
                );
            }
        });    
        $.each(submissions, function(index, submission) {
            myDataDiv.append('<tr class="sub_'+index+'""></tr>');
            var fields = submission.fields;
            $.each(fields, function(index1,field) {
                if (field.type !== 'freetext') {
                    myDataDiv.find('.sub_'+index).append(
                        '<td>'+
                        field.responses[0].response+
                        '</td>'
                    );
                }
            })       
        });
    }).fail(function(e) {

        console.log('Failed to load form');
    });
}
getObjSummary();
    
refreshButtonOBJ.click(function(){
    getObjSummary();
});
    
    
    
downloadDOC.click(function(){

   var html, link, blob, url, css;
   
   // EU A4 use: size: 841.95pt 595.35pt;

   css = (
     '<style>' +
     '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' +
     'div.WordSection1 {page: WordSection1;}' +
     'table{border-collapse:collapse;}td{border:1px gray solid;width:5em;padding:2px;}'+
     '</style>'
   );
   console.log(docx);
   html = docx[0].innerHTML;
   blob = new Blob(['\ufeff', css + html], {
     type: 'application/msword'
   });
   url = URL.createObjectURL(blob);
   link = document.createElement('A');
   link.href = url;
   // Set default file name. 
   // Word will append file extension - do not add an extension here.
   link.download = user.displayname+' Objectives Summary';   
   document.body.appendChild(link);
   if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
   		else link.click();  // other browsers
   document.body.removeChild(link);

});
    
</script>


<style>
    .refresh  {
        float: left;
        color: #919191;
        cursor: pointer;
        margin-bottom: 15px;
        margin-right: 15px;
    }

</style>

With a handy option to export this as a word doc too.