Dashboards & Visualizations

How to add an input field per each row in a table?

klim
Path Finder

I would like to display a table and have the ability to give the data a category via an input field. So each row would have its own input field for the user to enter a value into it. For example the data could be something like this where the category column is the input field. I want to put the brand of the car in the category field and save it to a lookup table. 

|Car|Category|

|Prius | Toyota|

|Mustang | Ford |

Labels (1)
Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@klim 

Can you please try this?

XML:

<dashboard script="a.js">
  <label>Car Lookup Edit</label>
  <row>
    <panel>
      <table id="tbl_1">
        <search id="srch_1">
          <query>| inputlookup car.csv | table Id Car Category | fillnull value="" Category | eval Category=Id."|".Category</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">100</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

 

a.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView, SearchManager) {
    var tokens = mvc.Components.getInstance("submitted");

    var detailSearch = new SearchManager({
        preview: true,
        cache: false,
        search: '| inputlookup car.csv | table Id Car Category | eval Category=if(Id="$tkn_id$","$tkn_category$",Category) | outputlookup car.csv'
    }, { tokens: true, tokenNamespace: "submitted" });
    detailSearch.on('search:done', function(properties) {
        $("#div_" + tokens.get('tkn_id')).html("");
    });
    detailSearch.on('search:start', function(properties) {
        $("#div_" + tokens.get('tkn_id')).html("Saving...");
    });

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(['Category']).contains(cell.field);
        },
        render: function($td, cell) {
            var id = cell.value.split("|")[0];
            var category = cell.value.split("|")[1];
            $td.append(
                $('<input>').attr({
                    type: 'text',
                    value: category,
                }).on('change', function() {
                    console.log(id);
                    // Action goes here.
                    tokens.set('tkn_id', id);
                    tokens.set('tkn_category', this.value);
                    console.log(this.value);
                })
            )
            $td.append($('<div id="div_' + id + '">'));
        }
    });
    var sh = mvc.Components.get("tbl_1");
    if (typeof(sh) != "undefined") {
        sh.getVisualization(function(tableView) {
            // Add custom cell renderer and force re-render
            tableView.table.addCellRenderer(new CustomRangeRenderer());
            tableView.table.render();
        });
    }
});

 

car.csv

Id,Car,Category
1,Prius,
2,Mustang,

 

KV

0 Karma
Get Updates on the Splunk Community!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...