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!

New to the Community? Join Us for an Exclusive Post .conf26 Welcome Session (Plus a ...

Keep the .conf26 Energy Going: Welcome to the Splunk Community! Whether we scanned your badge at the Community ...

Accelerate Splunk App Development with AI

  Learn how to automate the repetitive parts of your build cycle.   Register to Attend   Join our Tech Talk ...

Meet the .conf26 AI Agent Buildathon Winners

At the .conf26 AI Agent Buildathon, Splunk users turned their operational expertise into working AI agents ...