Data Export Pattern

[ceyerkes]

Hi! We recently kicked off a data export project, and I wanted to get a little more clarification on a few things.

1. Export button dropdown - do we need to select export type here? Since this export initiates a side modal for additional export options, we're wondering if it's ok to have the export type selection (CSV or JSON) happen within the modal instead of within the button.

2. Custom Date Range - just doublechecking that this is the right UI for custom date/time picker:

3. Export progress - After a user selects "export," is there a recommended area to show progress? Paste docs indicate that customers can track progress through their browser - do we know that all browsers support tracking progress?

4. Batch size limits - is there a recommended spot for this info? I was thinking maybe a tooltip in the export button.

Thanks!

Link to initial designs

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

1. Export button dropdown - Based on the general guidance from the Paste documentation, the export should be triggered by a Button (or Menu item) that clearly states what type of file will be exported, e.g., “Export CSV”. However, if your process involves more customization of the data, triggering a Modal first for additional options, including selecting the export type (CSV or JSON), is acceptable. This approach aligns with the Immediate export section, suggesting that customization options, such as selecting columns or file formats, can be handled within a Modal.

   <Button variant="primary" onClick={() => { /* trigger modal here */ }}>
     Export
   </Button>

   Immediate export documentation

2. Custom Date Range - The screenshot you've provided aligns with the concept of using a date picker for custom date range selections. While the Paste documentation does not explicitly detail the UI for a custom date/time picker, ensuring that the UI is clear, user-friendly, and tested with users is key. Your approach of testing designs with users is excellent and should help validate the design choice.

3. Export progress - The Paste documentation mentions that most often, selecting the export Button or Menu item should trigger a “save as” dialog in the browser, where customers can track the export’s download status through their browser. It does not provide specific guidance on in-app progress indicators for exports. If browser support for tracking progress is a concern, consider implementing a custom progress indicator within your application as a fallback.

4. Batch size limits - The recommendation to use a Tooltip to communicate any limitations to the data that can be exported, including batch size limits, is a good practice. This aligns with the general guidance provided in the documentation.

   <Tooltip text="Maximum export size is 10,000 records">
     <Button variant="primary">Export CSV</Button>
   </Tooltip>

   General export documentation

For further details and examples, you can refer to the Paste documentation:

• Export pattern: https://paste.twilio.design/patterns/export
• Button component: https://paste.twilio.design/components/button
• Tooltip component: https://paste.twilio.design/components/tooltip

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Debugger 2.0 / Modal vs Popover / Filter button / Overall interaction feedback (updated: 02/02/2023, similarity score: 85%)
• Custom date range selection (updated: 03/06/2023, similarity score: 85%)
• Filter group question (updated: 01/26/2024, similarity score: 85%)

[serifluous]

1. Export Button: PasteBot's correct. But here's the non-broken link: https://paste.twilio.design/patterns/data-export#immediate-export
2. Date range: The screenshot's mostly right, but each input should have a label: https://paste.twilio.design/components/date-picker#date-range-picker
3. Export progress: All browsers should meaningfully track the download progress of a file in some way, or at least most users should be familiar enough with how it happens on the browser they're using. What's your overall concern here?
4. Batch size limit: Yep, Tooltip works! Also, if you're opening a Side Modal too, it might be worth popping the information in the modal as just normal text.

[ceyerkes]

Awesome, thanks @serifluous!