Spotfire - Export Data (Client & WebPlayer) Python|Javascript

Introduction

While you can right-click on a visual and export (webplayer) some are in need of the ability to export with a click of a button/script. 

After a long time of testing different methods, I have found a method that works well in both the Desktop Client and Webplayer. 

The Use Case I was trying to solve was: Users wanted a download/export button that they could download details from a visual. (The setup is a bar chart visual that can be marked and then a View button can be clicked to view the table details and then given the option to download. )

Solution

Using a data function to capture marked rows from a bar chart : 

 input
 output<-Sys.time()

The document property being updated from the R script will trigger a Python Script to update a text area and an HTML version of a table visual. 

# Converts a tablePlot to an html table and adds export functionality. Works in webplayer and any browser that supports flash 
# to POC, Add a data table and two text areas. Then define the two script parameters:
# visTA : target text area (a blank text area different from where this script will running as it will replace its contents)
# visDT : Data Table visualization


from Spotfire.Dxp.Application.Visuals import TablePlot, HtmlTextArea
ta = visTA.As[HtmlTextArea]()

from System.IO import Path, StreamWriter
from System.Text import StringBuilder

#Temp file for storing the cross table data
tempFolder = Path.GetTempPath()
tempFilename = Path.GetTempFileName()

#Export TablePlot data to the temp file
tp = visDT.As[TablePlot]()
writer = StreamWriter(tempFilename)
tp.ExportText(writer)

#Build the table
sb = StringBuilder()

#Open the temp file for reading
f = open(tempFilename)

#add some scripting magic from CDN
html = '<h1 align=center> Page Title</h1><div style="display:none;width:800px" id="dialog2">  <button id="btnForm">Export</button><pre id="myForm"  ><div style="display:block">'




#build the html table
html += " <TABLE id='myTable' class='Test'>\n"
html += "<THEAD>"
html += " <TR><TH>"
html += " </TH><TH>".join(f.readline().split("\t")).strip()
html += " </TH></TR>"
html += "</THEAD>\n"
html += "<TBODY>\n"

for line in f:
   html += "<TR><TD>"
   html += "</TD><TD>".join(line.split("\t")).strip()
   html += "</TD></TR>\n"
f.close()
html += "</TBODY>\n"
html += "</TABLE>\n</pre></div></div><div align=center> <button id='myAlertButton2' style='border:3px outset #4d148c;background:#ff6600'  >Double Click Here To View Details</button></div>"


ta.HtmlContent = html

A javascript is added to the Text Area for Exporting the HTML table 

//tell buttons what to do when clicked
$("#myAlertButton2").click(showDialog2)

function showDialog2(){ 
   //change the title attribute since we can't in html editor
		
	  //$("#dialog2").prop({title:'Dialog Example'}).dialog(); 	  
	  //$("#dialog2").prop({innerHTML:document.getElementById("myForm").innerHTML}).dialog();
	  //console.log(document.getElementById("dialog2").innerHTML)
	  
	  $("#dialog2").dialog(	  {
        title:'Dialog Example',		
        close: function(event, ui)
        {
            $(this).dialog("destroy");
            
        }
    });
	
	$("#dialog2").dialog( "option", "width", 900 );
	
	  
}






var html = document.querySelector("table").outerHTML;
var filename = "table.csv"





$("#btnForm").button().on('click',function(){	
 //dlg.dialog( "open" );
 export_table_to_csv1(html, filename);
});




function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv1(html, filename) {
	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

See also: writing-files-and-databases-spotfire 

download_csv_button.dxp