For this project, the client requested several views of filtered content for their Drupal site, with the option for the user to export the filtered content in CSV format. We didn’t like the styling and placement of the default export button provided by the Drupal Views Data Export module, so I customized it with the following steps.
First, I created the page view to display the desired content. (If you aren’t familiar with creating Views in Drupal, please see my LinkedIn post about it for more information.)
Then, I installed the Views Data Export module which provides the capability to export the content of the view in several formats. I set up a data export view along with the page view I’d already created, and attached it to the page view under “Path Settings” in the second column.
I specified the CSV format in the Settings dialog of the Format option in the data export view configuration.
Attaching the data export view to the page view inserts a button at the bottom of the page view that a user can click to export the content.
Unfortunately, the button is small, it did not match the site’s style, and we wanted it to display above the data, where the user would be more likely to notice it.
So I used the browser’s dev tools to display the button code. By right-clicking on the code for the button, I copied the HTML.
I pasted this code into a Global Text header in the page view.
After I added the Bootstrap classes, the button style matches the site style, and placing it in a text header locates it above the filtered content instead of at the bottom of the page.
And more importantly, the export works!
I went back to the data export view and changed the attachment to “None” under “Path Settings.” This removes the default orange export button.
Now the export button looks and functions as desired!