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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas     Cisco Live 2026 is almost here, and this ...

What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)

Hello Splunkers,   So you searched, “what is the name of the usb key inserted by bob smith?”  Not gonna lie… ...

Automating Threat Operations and Threat Hunting with Recorded Future

    Automating Threat Operations and Threat Hunting with Recorded Future June 29, 2026 | Register   Is your ...