Following tutorial desribes code example which allows user to download .csv file with data from selected features on a map in BI application.
Link to BitBucket: Bitbucket link
To add this functionality to your App, just paste JavaScript code from link above into "customization" window while editing the app.
Code example above contains few functions. Here is a description of each of them, how they are connected and how they are triggered.
function formatCsv(rows, config) { config = config || {}; // CSV delimiter var delim = config.delimiter || ",", // New Line character newl = config.newline || "\n", // By default take all original columns, dimensions and measures header = config.header || Object.keys(rows[0]).filter(function(key) { return Object.hasOwnProperty.call(rows[0], key) && typeof rows[0][key] !== "function"; }); // format the CSV with the header return [header.join(delim)].concat(rows.map(function(row) { return header.map(function(col) { return row[col]; }).join(delim); })).join(newl); }
Function formatCSV has 2 parameters: rows and config. Rows is the number of rows in downloaded .csv file and config is the configuration of content of .csv. Configuration consists of 3 parameters: delim, newl, header. Delim is the delimeter, here user can define how each record will be separated from each other i.e. by comma - ",". Newl is a parameter which specify new line character in .csv file. Header is a parameter which defines which columns of data user wants to download, by default it is set to download all columns.
function triggerDownload(content, config) { config = config || {}; var filename = config.filename || "test.csv", mimetype = config.mime || "text/csv", charset = config.charset || "utf-8"; //CSV will be downloaded immediately but this can be invoked in any event var encodedUri = "data:" + mimetype + ";charset=" + charset + "," + encodeURI(content); var link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", filename); document.body.appendChild(link); link.click(); }
Function above triggers download of content and it has 2 parameters. Parameter "content" in this code example is defined by function formatCsv or can be passed from another variable/function/etc. Config is a configuration of downloaded file. It has 3 parameters in it: filename - name of downloaded file in example above "test.csv", mimetype - as the name suggests - mimetype of downloaded file and charset - coding of characters. Next part of function contains code which triggers the download.
function downloadCSV() { gsp.bi.stage.findSelectedRecords({ //layer: "labor_geom" }, function(ret) { // ["id1", "id2", ..., "idn"] // do something with ret var csv = formatCsv(ret, { delimiter: ",", newline: "\n", header: ["id_woj", "YEAR", "POPULATION_TOTAL", "WAGES_TOTAL_REAL"] }); triggerDownload(csv, { filename: "test.csv", mime: "text/csv", charset: "utf-8" }); }, function(err) { // display err console.error(err) }); }
Function downloadCSV doesn't have any parameter, it is created only to assign method gsp.bi.stage.findSelectedRecords, which invoke functions described above and contains the parameters for these functions. Content of downloaded .csv file is "ret" - returned values from gsp.bi.stage.findSelectedRecords.
To implement code described above I used some sample BI application with map of polish administrative units called "województwa" with data about wages in each of them. I selected one unit and clicked "Download .csv" button.
Here is content of downloaded .csv.