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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

What Is Splunk? Here’s What You Can Do with Splunk

Hey Splunk Community, we know you know Splunk. You likely leverage its unparalleled ability to ingest, index, ...

Level Up Your .conf25: Splunk Arcade Comes to Boston

With .conf25 right around the corner in Boston, there’s a lot to look forward to — inspiring keynotes, ...

Manual Instrumentation with Splunk Observability Cloud: How to Instrument Frontend ...

Although it might seem daunting, as we’ve seen in this series, manual instrumentation can be straightforward ...