Getting Data In

Enabling export to csv button in web framework

jamesvz84
Communicator

Hello,

I am looking to enable an export to csv button in web framework (where you can hover over the bottom of a table to click the export button). How do you do this in the web framework? My table view looks as follows, what needs to be added?

    var table_site = new TableView({
        id: 'table_site',
        managerid: 'table_site_results',
        height: 700,
        pageSize: 70,
        drilldown: "none",
        el: $('#table_site')
    });
Tags (3)
1 Solution

jamesvz84
Communicator

I've figured it out. I should not use TableView, but TableElement instead. TableElement is the simple xml wrapper that has the various buttons at the bottom.

Then, TableView can be extracted from TableElement, if you still need to apply a cell renderer. Remember to include the element in the "require" section:

{% block js %}
{# JavaScript goes here #}  
<script>
    // Load the required libraries
    var deps = [
            "splunkjs/mvc",
            "splunkjs/mvc/utils",
            "splunkjs/mvc/tokenutils",
            "underscore",
            "jquery",
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/postprocessmanager",
        "splunkjs/mvc/multidropdownview",
        "splunkjs/mvc/chartview",
        "splunkjs/mvc/tableview",
            "splunkjs/mvc/simplexml/element/table",
        "splunkjs/mvc/dropdownview",
        "backbone",
        "splunkjs/mvc/searchbarview",
        "splunkjs/mvc/radiogroupview"
    ];
    require(deps, function(mvc,utils,TokenUtils,_,$,DashboardController, SearchManager, PostProcessManager, MultiDropDownView, ChartView, TableView, TableElement, DropDownView, Backbone, DebugView) {


..... etc etc etc.....

    var table_site = new TableElement({
                "id": "table_site",
                "dataOverlayMode": "none",
                "drilldown": "cell",
                "rowNumbers": "false",
                "wrap": "true",
            pageSize: 70,
            drilldown: "none",
                "managerid": "table_site_results",
                "el": $('#table_site'),
        "link.exportResults.visible": true,
        "link.visible": true
            }, {tokens: true}).render();




    var cellRenderer = new CustomCells();

    mvc.Components.get('table_site').getVisualization(function(tableView){
            // Register custom cell renderer
            tableView.table.addCellRenderer(cellRenderer);
            // Force the table to re-render
            tableView.table.render();
    });
        });

View solution in original post

jamesvz84
Communicator

I've figured it out. I should not use TableView, but TableElement instead. TableElement is the simple xml wrapper that has the various buttons at the bottom.

Then, TableView can be extracted from TableElement, if you still need to apply a cell renderer. Remember to include the element in the "require" section:

{% block js %}
{# JavaScript goes here #}  
<script>
    // Load the required libraries
    var deps = [
            "splunkjs/mvc",
            "splunkjs/mvc/utils",
            "splunkjs/mvc/tokenutils",
            "underscore",
            "jquery",
        "splunkjs/ready!",
        "splunkjs/mvc/searchmanager",
        "splunkjs/mvc/postprocessmanager",
        "splunkjs/mvc/multidropdownview",
        "splunkjs/mvc/chartview",
        "splunkjs/mvc/tableview",
            "splunkjs/mvc/simplexml/element/table",
        "splunkjs/mvc/dropdownview",
        "backbone",
        "splunkjs/mvc/searchbarview",
        "splunkjs/mvc/radiogroupview"
    ];
    require(deps, function(mvc,utils,TokenUtils,_,$,DashboardController, SearchManager, PostProcessManager, MultiDropDownView, ChartView, TableView, TableElement, DropDownView, Backbone, DebugView) {


..... etc etc etc.....

    var table_site = new TableElement({
                "id": "table_site",
                "dataOverlayMode": "none",
                "drilldown": "cell",
                "rowNumbers": "false",
                "wrap": "true",
            pageSize: 70,
            drilldown: "none",
                "managerid": "table_site_results",
                "el": $('#table_site'),
        "link.exportResults.visible": true,
        "link.visible": true
            }, {tokens: true}).render();




    var cellRenderer = new CustomCells();

    mvc.Components.get('table_site').getVisualization(function(tableView){
            // Register custom cell renderer
            tableView.table.addCellRenderer(cellRenderer);
            // Force the table to re-render
            tableView.table.render();
    });
        });

xisura
Communicator

Hi @jamesvz,

I also need that function in my dashboard , currently im also using the framework .
I would like ask if the search ex. {% savedsearchmanager id="search2" searchname="sample_search" app="search" %} shoul i also convert it to

var search1 = new SearchManager({
"id": "search1",
"cancelOnUnload": true,
"earliest_time": "-24h@h",
"search": "index=_internal | top limit=100 sourcetype | eval percent = round(percent,2)",
"latest_time": "now",
"status_buckets": 0,
"app": utils.getCurrentApp(),
"auto_cancel": 90,
"preview": true
}, {tokens: true, tokenNamespace: "submitted"});

Thanks!

0 Karma

gonzalovasquez
Engager

no you dont, just in the blockmanager.

0 Karma

ppablo
Retired

Glad you found your answer @jamesvz84 🙂 Please be sure to accept your answer by clicking on the check mark next to your response so other people with similar issues/questions will turn to this post for help. Thanks!

Patrick

0 Karma
Get Updates on the Splunk Community!

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...