Export Form Submissions to CSV with JavaScript
Orchard 1.10 gives you the opportunity to export Contents and Form Submissions to XML with the built-in module Import Export. If you want to change this functionality, you have to create a module that will export to CSV. But there is a quicker way with my best friend JavaScript.
First, we will create an export button that will appear only in the Form Submissions Page:
var url = window.location.href.toString().toLowerCase(); if (url.indexOf('submissionadmin') > -1) { $('<a/>', { id: 'export_form', class: 'button', css: { 'margin-bottom': '10px', 'float': 'right' }, text: 'Export to CSV', href: '#' }).insertAfter('fieldset.bulk-actions'); }
After this, we will add a JavaScript event to the export button:
var url = window.location.href.toString().toLowerCase(); if (url.indexOf('submissionadmin') > -1) { $('<a/>', { id: 'export_form', class: 'button', css: { 'margin-bottom': '10px', 'float': 'right' }, text: 'Export to CSV', href: '#' }).insertAfter('fieldset.bulk-actions'); $('#export_form').on('click', function () { });}
We will get the HTML Table with the submissions and remove the checkboxes and the remove/detail column. After this, we will convert the HTML Table to CSV.
var url = window.location.href.toString().toLowerCase(); if (url.indexOf('submissionadmin') > -1) { $('<a/>', { id: 'export_form', class: 'button', css: { 'margin-bottom': '10px', 'float': 'right' }, text: 'Export to CSV', href: '#' }).insertAfter('fieldset.bulk-actions'); $('#export_form').on('click', function () { var table = $('table.dynamic-forms-submissions').clone(true); table.find('thead > tr > th:first-child').remove(); table.find('thead > tr > th:last-child').remove(); table.find('tbody > tr > td:first-child').remove(); table.find('tbody > tr > td:last-child').remove(); table.htmlTableToCSV(); }); }
If you want you can download the file from the GitHub. The only thing you have to do is to call this JavaScript file from the Layout.