Save Editable Table into a lookup with Javascript

[Federico92]

Hi All

I need to save this editable table with its values into a KV Store. I want to click on a submit button and store it into a KV

Values on text field are editable, it means that i could write any value and save it to the lookup. This is my XML and JS script

XML

<form script="dinamicTable.js">
<init>
<set token="read_table">*</set>
<unset token="edit_table"></unset>
</init>
<label>Data Entry Test Clone</label>
<fieldset submitButton="false">
<input type="dropdown" token="tok_crq_id">
<label>CRQ ID</label>
<fieldForLabel>number</fieldForLabel>
<fieldForValue>number</fieldForValue>
<search>
<query>index=data_entry
| stats count by number</query>
</search>
</input>
<input type="checkbox" token="tok_operation">
<label>Operation</label>
<choice value="*">Add</choice>
<change>
<condition label="Add">
<unset token="read_table"></unset>
<set token="edit_table">*</set>
</condition>
<condition>
<unset token="edit_table"></unset>
<set token="read_table">*</set>
</condition>
</change>
<delimiter> </delimiter>
</input>
</fieldset>
<row depends="$read_table$">
<panel>
<table id="tableVizualization">
<search id="number_of_events">
<query>index=data_entry
| rex field=impacted_systems mode=sed "s/\|yes\|no//g"
| table number impacted_systems
| makemv delim=" " impacted_systems
| where number="$tok_crq_id$"
| mvexpand impacted_systems
| eval "Feedback"= " "
| table impacted_systems Feedback
| rename impacted_systems as "Impacted Systems"</query>
<finalized>
<set token="tok_job_sid">$job.sid$</set>
</finalized>
<earliest>0</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="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
<row depends="$edit_table$">
<panel>
<title></title>
<table>
<search>
<query>| loadjob $tok_job_sid$
| append [ | makeresults | eval "Impacted Systems" = "New system" | table "Impacted Systems" Feedback ]</query>
<earliest>0</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="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</form>

dinamicTable.js

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

             console.log(cell)

             return _(["Impacted Systems"]).contains(cell.field) || _(["Feedback"]).contains(cell.field) || _(["Action"]).contains(cell.field);

         },

         render: function($td, $tr, cell) {

             // Add a class to the cell based on the returned value

             var strCellValue = cell.value;

             console.log($td)

             if (cell.field === "Impacted Systems") {

                 var strHtmlInput="<input type='text' class='table-text-box' value='"+strCellValue+"'></input>";

                 //Add TextBox With Specific Style

                $td.append(strHtmlInput);

             }

             if (cell.field === "Feedback") {

                 var strHtmlInput="<select><option value=\"No\">No</option><option value=\"Yes\">Yes</option></select>";

                 //Add TextBox With Specific Style

                $td.append(strHtmlInput);

             }

             if (cell.field === "Action") {

                 var strHtmlInput="<input type='button' class='btn btn-primary'></input>"

        });

             }

         }

     });

     mvc.Components.get('tableVizualization').getVisualization(function(tableView) {

         // Add custom cell renderer, the table will re-render automatically.

         tableView.addCellRenderer(new CustomRangeRenderer());

     });

 });

Anyone could please help me? Thanks!

[kamlesh_vaghela]

@Federico92 

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var service = mvc.createService({ owner: "nobody" });
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(["Impacted Systems", "Feedback", "Action"]).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 === "Impacted Systems") {
                var strHtmlInput = "<input type='text' class='table-text-box' value='" + strCellValue + "'></input>";
                //Add TextBox With Specific Style
                $td.append(strHtmlInput);
            } else if (cell.field === "Feedback") {
                var strHtmlInput = "<select><option value=\"No\">No</option><option value=\"Yes\">Yes</option></select>";
                //Add TextBox With Specific Style
                $td.append(strHtmlInput);
            } else if (cell.field === "Action") {
                var strHtmlInput = "<div class='btn btn-primary'>Save</div>"
                $(strHtmlInput).click(function() {
                    console.log("Saved", (new Date).getTime())
                    // Provide Record to store 
                    var record = {
                        // YOUR data
                    };
                    // Collection Rest Call
                    service.request("storage/collections/data/YOUR_COLLECTION/", "POST", null, null, JSON.stringify(record), { "Content-Type": "application/json" }, null).done(function() {
                        console.log("Done");
                    });


                }).appendTo($td);
            }
        }
    })

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

Note: You need to update Record Data & API call with your original collection name and data. 

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.