[Feature request] Form submissions export as CSV about plugin-form-builder

[IAmNatch]

You could implement this yourself by:

1. Creating a custom button on the collection page to trigger your export. BeforeList would probably be the right place to put it.
2. Pulling in the data prop which is passed into your custom component by payload.
3. Converting the object into a CSV, either manually or with a library.
4. Trigger a download of the CSV string you've created, using something like this approach.

This should get the job done. If you wanted to go the extra mile, this would make a great payload plugin. Something like payload-plugin-csv-export, where you could select which collections you'd like to have this field added to. This would be much more general purpose, and keep the form builder plugin focused on the forms themselves.

[webmuch]

@IAmNatch That helped me so much. Thanks! I was simply able to whip this up in half an hour and replicate it across collections:

Here's my code:

yarn add xlsx

The component:

import { Pill } from "payload/components";
import React from "react";
import * as XLSX from "xlsx";

const ExportButton = ({ data }) => {
  console.log(data);
  function handleClick() {
    const worksheet = XLSX.utils.json_to_sheet(data.docs);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    XLSX.writeFile(workbook, "Data_Export.xlsx");
  }

  return (
    <Pill pillStyle="light" onClick={handleClick}>
      Export
    </Pill>
  );
};

export default ExportButton;

The Custom UI for List Page:

  admin: {
    components: {
      BeforeListTable: [ExportButton]
    },
  },

[Hassiad]

Thanks @webmuch the solution and code snippet you provided works, also thanks to @IAmNatch for the guide

[leikoilja]

sorry, haven't tried it just yet @IAmNatch. Thank you @webmuch for the snippet. I will give it a try soon and close this ticket if it resolves it :)

[IAmNatch]

@leikoilja does this resolve your issue?

[TechSynthesis]

I tried this out it exports the submissions: id, formName & submissionData id. It doesn't export the contents of submissionData which is what is required. How can I get that to work?

[jacobsfletch]

@webmuch great work 👏 This is currently planned as a Payload core feature, outlined in our public roadmap here. Feel free to leave an upvote or comment of support to prioritize that work.

[jacobsfletch]

This plugin is now being maintained in the Packages Directory of the Payload Monorepo. This repo will soon be archived and all open issues including this one will be closed. This issue has already been added to this open discussion, though, so that it will not get lost. Please refer to that discussion for more details and to continue the conversation.