Checklist Table column with select Yes/No, but selection needs to be recorded in search

[mvishal]

Hello Everyone,

Thanks in advance!

I have created a table view with select input Yes/No as Decision column, I am able to render the selected Yes/No in the view, but need to record the selection made to in the view to the lookup

I have created below view for reference.

Below is my XML code

<dashboard version="1.1" script="table_select.js" hideEdit="false" hideChrome="true">
  <label>Checklist</label>
  <row>
    <panel>
      <table id="base_table">
        <search id="bestMain">
          <query>| makeresults count=10 
| fields - _time 
| streamstats c as SRNo 
| eval Task="Task"." ".'SRNo' 
| eval Decision=""
| fields SRNo Task Decision</query>
          <earliest>0</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">50</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>

JS used for the view.

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

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            
            return _(['Decision']).contains(cell.field);
        },
        render: function($td, cell)
         {  
            
          
          $td.html("<div ><select  name='decision' id='cars'> <option value='No'>Select</option><option value='No'>No</option> <option value='Yes'>Yes</option></select>  </div>")
            
        }
    });

    //List of table IDs to add icon
    var tableIDs = ["base_table"];
    for (i=0;i<tableIDs.length;i++) {
        var sh = mvc.Components.get(tableIDs[i]);
        if(typeof(sh)!="undefined") {
            sh.getVisualization(function(tableView) {
                // Add custom cell renderer and force re-render
                tableView.table.addCellRenderer(new CustomRangeRenderer());
                tableView.table.render();
            });
        }
    }    
});

[kamlesh_vaghela]

@mvishal 

Can you please try the below student example?

collections.conf

[students]
enforceTypes = true
field.name = string
field.age = number
field.grade = string
field.decision = string 

transforms.conf

[student_lookup]
external_type = kvstore
collection = students
fields_list = _key, name, age, grade, decision

table_select.js

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

    var service = mvc.createService({ owner: "nobody" });
    console.log("Hello !!");

    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function (cell) {

            return _(['Decision']).contains(cell.field);
        },
        render: function ($td, cell) {
            var cellValue = cell.value;
            // Create the select element
            var select = $('<select>');

            // Add options to the select element
            select.append($('<option>', { value: 'No', text: 'Select' }));
            select.append($('<option>', { value: 'No', text: 'No' }));
            select.append($('<option>', { value: 'Yes', text: 'Yes' }));

            // Create the <td> element and append the select element to it
            var div = $('<div>').append(select);
            console.log("Hello 1223 !!");

            // Add change event handler to the select element
            select.on('change', function () {
                var selectedValue = $(this).val();
                console.log('Selected value:', selectedValue);
                console.log('Selected value:', cellValue);

                const collectionName = 'students';
                const recordKey = cellValue.split("|")[1]; // The _key of the record you want to update

                updateCollectionData(collectionName, recordKey, selectedValue);
            });

            // Append the <td> element to a table row or an existing <td> element
            $td.append(div);
        }
    });

    function updateCollectionData(collectionName, recordKey, selectedValue) {
        console.log(collectionName, recordKey, selectedValue);
        service.get(
            "storage/collections/data/" + collectionName + "/" + recordKey,
            {},
            function (err, response) {
                if (err) {
                    console.error('Error:', err);
                } else {
                    const data = response.data;
                    console.log('Retrieved data:', data);
                    data.decision = selectedValue;

                    service.request(
                        "storage/collections/data/" + collectionName + "/" + recordKey,
                        "POST",
                        null,
                        null,
                        JSON.stringify(data),
                        { "Content-Type": "application/json" },
                        null
                    ).done(function () {
                        console.log('Updated data:', data);
                        console.log("Done");
                    });
                }
            }
        );
    }

    //List of table IDs to add icon
    var tableIDs = ["base_table"];
    for (i = 0; i < tableIDs.length; i++) {
        var sh = mvc.Components.get(tableIDs[i]);
        if (typeof (sh) != "undefined") {
            sh.getVisualization(function (tableView) {
                // Add custom cell renderer and force re-render
                tableView.table.addCellRenderer(new CustomRangeRenderer());
                tableView.table.render();
            });
        }
    }
});

XML

<dashboard version="1.1" script="table_select.js" hideEdit="false" hideChrome="true">
  <label>Checklist</label>
  <row>
    <panel>
      <table id="base_table">
        <search id="bestMain">
          <query>| inputlookup student_lookup 
| eval key=_key 
| eval Decision=decision."|".key
| table name, age, grade Decision</query>
          <earliest>0</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">50</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>

I hope this will help you.

Let me know in case of any issues.

Thanks
KV
If any of my replies help you to solve the problem Or gain knowledge, an upvote would be appreciated.