Dashboards & Visualizations
Highlighted

How to add a textbox as a cell in a Splunk table?

Path Finder

Hello , everyone

First of all, I'd like to know if adding the textbox as a cell in the table is possible or not

I'll let you know what I want to do.
There are restaurants and price in the CSV file.
There are A,B,C,D,E in the file as the value of restaurants.
But I'd like to display only A,C,D,E.
And I'd like to compute the total using the value of price gained from csv file and value of person that I entered on the dashboard directly.
And I'd like to edit only column of person. other columns are not editable.
Additionally, I'd like to create the table dynamically. According to condition and data, row of table might be 2 rows or 3rows.

Thank you in advance.

alt text

Highlighted

Re: How to add a textbox as a cell in a Splunk table?

Legend

@jenny_life, Yes, html content can be added to existing Splunk table using Simple XML JS extension and Splunk JS Stack which provides Custom Cell Renderer to be added. You should check out Example to add an Icon to table in the Splunk Dashboard Examples app from Splunkbase.

For picking up on Simple XML JS Extension and Splunk JS Stack, you should check out Splunk Dev Site:
http://dev.splunk.com/view/webframework-developapps/SP-CAAAEUB
http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAEVM
http://dev.splunk.com/view/webframework-developapps/SP-CAAAEUY etc.

Following is a run anywhere example created with some dummy data (Restaurant and PRICE). Person is set to 0. Hence Total is 0 by default.
PS:
1. Following example just illustrates that value from Text Box in the table can be used to perform further calculation and update the table.
2. This example does not deal with storing the data back as the details would vary based on whether you want to index the final table or upload to some/same lookup file.
3. You would need to perform validation/html encoding for Person text-box which I have not performed for simplicity.

alt text

<dashboard script="table_with_textbox.js">
  <label>Textbox in Splunk Table</label>
  <row>
    <panel>
      <table id="tableWithTextboxHTMLInput">
        <search>
          <query>| makeresults
| fields - _time
| eval data="Restaurant=A,PRICE=1000;Restaurant=C,PRICE=500;Restaurant=D,PRICE=200;Restaurant=E,PRICE=100;"
| makemv data delim=";"
| mvexpand data
| rename data as _raw
| KV
| eval Person=0
| eval Total=PRICE*Person
| table Restaurant PRICE Person Total</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

Following is the code for JavaScript file table_with_textbox.js which needs to be placed under your Splunk App's appserver static folder which is typically $SPLUNK_HOME/etc/apps/<yourSplunkAppName>/appserver/static.
If the same does not exist you might have to create.
Since there is a dependency with static JS file, you would needs to debug refresh/bump/restart your Splunk instance for the JavaScript changes to reflect. Also you might have to clear your internet browser history to clean up cached files.

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             // Enable this custom cell renderer for Person field
             return _(["Person"]).contains(cell.field);
         },
         render: function($td, cell) {
             // Add a class to the cell based on the returned value
             var strCellValue = cell.value;

             if (cell.field === "Person") {
                 var strHtmlInput="<input type='text' class='table-text-box' value='"+strCellValue+"'></input>";
                 //Add TextBox With Specific Style
                $td.append(strHtmlInput);
             }
         }
     });

     $(document).on("change",".table-text-box", function(){
        var intPerson=parseInt($(this).val());
        var floatPrice = parseFloat($(this).parents("tr").find("td[data-cell-index='1']").text());
        var floatTotal = intPerson*floatPrice;
        $(this).html(intPerson);
        $(this).parents("tr").find("td[data-cell-index='3']").html(floatTotal);
     });

     mvc.Components.get('tableWithTextboxHTMLInput').getVisualization(function(tableView) {
         // Add custom cell renderer, the table will re-render automatically.
         tableView.addCellRenderer(new CustomRangeRenderer());
     });
 });



| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

Re: How to add a textbox as a cell in a Splunk table?

Path Finder

Thank you .
It works well.!!

0 Karma
Highlighted

Re: How to add a textbox as a cell in a Splunk table?

Motivator

When I do this, it makes it so the value for any cell with a textbox in it can no longer be used for non-javascript calculations.

E.g., if I put a textbox in field "field1" and have field2=field12, then field2 is set to the initial value of field12, but then no longer changes when field1 changes.

0 Karma
Highlighted

Re: How to add a textbox as a cell in a Splunk table?

Motivator

Worked for a while today on this without being able to figure it out @niketnilay

For my use case specifically, I need to have some cells be textboxes in a table, but then I also need to use those values both in my table for calculations and then elsewhere on my dashboard. Normally I could just put this after my table:

<preview>
          <set token="b11">$result.b11$</set>
</preview>

But that won't work for a textbox value, or for a value that needs to be calculated using a textbox value.

If we are somehow able to make this example work and dynamically update... then we're all set:

eval field2=<field1 made up of all textboxes and their values>*2
0 Karma