Orchard CMS — Export Dynamic 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. And we will add a JavaScript click event to this button:

var url = window.location.href.toString().toLowerCase();
if (url.indexOf('submissionadmin') > -1) {
  $('<a/>', {
    class: 'button',
    css: {
      'margin-bottom': '10px',
      'float': 'right'
    },
    text: 'Export visible',
    click: function () { exportToCSV(); }
  }).insertAfter('fieldset.bulk-actions');
}

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 with the htmlTableToCSV.

var exportToCSV = 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 export.js from here. The only thing you have to do is to call this JavaScript file from the Layout.cshtml file in the AdminTheme.

The export.js can export the visible submissions or all the submissions. In the export.js also I have fixed a small decoding issue that the htmlTableToCSV has.

Originally published at https://orchardtricks.dotnest.com.