Export Form Submissions to CSV with JavaScript

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.cshtml file in the admin theme!