Graham Quince Posted March 29, 2022 Share Posted March 29, 2022 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 More sharing options...
Graham Quince Posted July 7, 2023 Author Share Posted July 7, 2023 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. Link to comment Share on other sites More sharing options...
Graham Quince Posted June 14 Author Share Posted June 14 The simplest way to find a Form's UUID is to add the following code to an HTML widget: <div class="form_list"></div> <script> var htmlWidget = arguments[0]; var formList = htmlWidget.find('.form_list'); var site = htmlWidget.closest('.sites_core'); var siteUUID = site[0].children[0].children[0].dataset.siteUuid; Frog.Model.api('dataviewer.getlist', { // look at all forms on the site module: 'form', current_user_only: 'true', site_uuid: siteUUID }).done(function(allFormsResponse) { $.each(allFormsResponse.data, function(index,form) { formList.append( '<li><b>'+form.title+ ' UUID:</b> '+index+'<br><br></li>' ); }) }).fail(function(e) { // Report Error Frog.Controller.prototype.growl('Failed to find forms.','HTML widget','app-name',{time:5000, icon: 'sites/widget/'+self.packageID+'/icon.png'}); }); </script> Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now