Shared Samples

[#1]

Introduction 

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.

Description

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. 

Final in-app example.

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.