How to transform the CSV link in the Views Data Export module in a non-image link display?

Question

I'm using the Views data export module for my search interface so users can click a link to download the search results. It's working and displaying. But it's not pretty.

My Data Export has the following settings:

• Format: CSV file

• Filter criteria: published, type=resource, topic > (exposed), category (exposed), search terms (optional)

• Data export > settings > path: /search-export Attach to: search footer: global: text > area (what I've been trying to add the manual link to)

• pager: display > a specified number of items > 0 items (required to make the CSV export > not return all results be default)

Right now there's a button at the bottom of the page that the module creates in the format of a tiny bright orange button with white text that says 'CSV'. I think it's an ugly button. A user may not even know what it means. Here's the code via inspect element:

<div class="feed-icon">

    <a href="/search-export?attach=page">
        <img title="Download Results" alt="Download Results" 
src="http://staging.grantstation-pathfinder.com/sites/all/modules
/views_data_export/images/csv.png" typeof="foaf:Image"></img>
    </a>

</div>

If the user set exposed filters or set a keyword in the search box when clicked this link adds parameters to the URL (ie. /search-export?field_topics_value=All&etc).

I don't know how it's adding those parameters which is probably the crux of my problem.

I could just swap out my own image I guess...but...

I'd rather change this to not use an image whatsoever and instead have it just be a link that says 'download results' or some such thing.

I tried just adding a link manually to the header or footer in the search view that has the same link as the image but it doesn't capture the parameters the way the button does for some reason.

The link I tried adding:

<div class="feed-icon">
  <a href="/search-export?attach=page">
    Download Spreadsheet
  </a>
</div>

When clicked the above doesn't include the parameters in the URL like the image does, it just exports ALL the results (and ignores whichever filters are set).

My question: How to fix my new download spreadsheet link so it outputs the results only with the exposed filters and keywords as the view itself does (and as the CSV button does)?

Answer 1

I agree that this CSV button needs some refinements, similar to what you are describing in your question. And quite a few others seem to think likewise.

To actually solve your issue, consider looking at the module's issue # 2261167, which is about an Option for non-image link display (issue status = needs review). Comment # 26 of that issue contains a patch which adds 2 new settings as shown in this screenprint:

Here are some more details about these 2 new settings:

• a checkbox to (if selected) provide the download link as a text link instead of an icon/image link.
• a textfield to add a class to the link, so that you can give the link a class like "button" (see picture) to your text link

Do I'd definitely consider this patch.

As an alternative (2nd choice?), you may also want to look at issue # 1379672, which is about Export Button, make it styleable with CSS. It also includes a patch that you may want to consider (eg if the previous one for some reason doesn't fit).

Answer 2

I'm posting this as a workaround for anyone that is looking to theme the button. I was looking for a way to theme the button and used the solution offered in 12 just without the jQuery, using only CSS with FontAwesome.

The result looks like this:

I added another class to the div surrounding the export link called "export-button" (from 12)

<?php if ($exposed): ?>
<div class="view-filters">
<?php if(isset($view->feed_icon)): ?>
<div class="feed-icon-wrapper export-button">
<?php print $view->feed_icon; ?>
</div>
<?php endif; ?>
<?php print $exposed; ?>
</div>
<?php endif; ?>

In my CSS I used the following:

.export-button a {
padding: 15px 35px 15px 35px;
display: -webkit-inline-box;
background: #2295f3;
color: white;
text-align: center;
}
.export-button a:hover {
box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.export-button img {
display:none;
}
.export-button a:before {
content: "Download CSV";
color:white;
}
.export-button a:after {
content: "\f019";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 15px;
color: white;
margin-left: 8px;
}

Please note, to use font awesome in the CSS you need to declare it in your CSS file.

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') 
format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?
v=4.0.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?
v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?
v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

I hope this helps.