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.