require([
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!',
'jquery'
], function(mvc, SearchManager, TableView, ignored, $) {
// Define a simple cell renderer with a button
var ActionButtonRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'rowKey';
},
render: function($td, cell) {
$td.addClass('button-cell');
var rowKey = cell.value
var $btn = $('<button class="btn btn-success">Mark Solved</button>');
$btn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var searchQuery = `| inputlookup sbc_warning.csv
| eval rowKey=tostring(rowKey)
| eval solved=if(rowKey="${rowKey}", "1", solved)
| outputlookup sbc_warning.csv`;
var writeSearch = new SearchManager({
id: "writeSearch_" + Math.floor(Math.random() * 100000),
search: searchQuery,
autostart: true
});
writeSearch.on('search:done', function() {
console.log("Search completed and lookup updated");
var panelSearch = mvc.Components.get('panel_search_id');
if (panelSearch) {
panelSearch.startSearch();
console.log("Panel search restarted");
}
});
});
$td.append($btn);
}
});
// Apply the renderer to the specified table
var tableComponent = mvc.Components.get('sbc_warning_table');
if (tableComponent) {
tableComponent.getVisualization(function(tableView) {
tableView.table.addCellRenderer(new ActionButtonRenderer());
tableView.table.render();
});
}
});
in this i want name of the button to be "unsolved" initially and when somebody clicks it the name should change to solved
Hi @SN1
Try the following:
require([
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!',
'jquery'
], function(mvc, SearchManager, TableView, ignored, $) {
// Define a simple cell renderer with a button
var ActionButtonRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return cell.field === 'rowKey';
},
render: function($td, cell) {
$td.addClass('button-cell');
var rowKey = cell.value;
var $btn = $('<button>').text('Unsolved');
$btn.on('click', function(e) {
e.preventDefault();
e.stopPropagation();
var searchQuery = `| inputlookup sbc_warning.csv | eval rowKey=tostring(rowKey) | eval solved=if(rowKey="${rowKey}", "1", solved) | outputlookup sbc_warning.csv`;
var writeSearch = new SearchManager({
id: "writeSearch_" + Math.floor(Math.random() * 100000),
search: searchQuery,
autostart: true
});
writeSearch.on('search:done', function() {
$btn.text('Solved');
var panelSearch = mvc.Components.get('panel_search_id');
if (panelSearch) {
panelSearch.startSearch();
}
});
});
$td.append($btn);
}
});
// Apply the renderer to the specified table
var tableComponent = mvc.Components.get('sbc_warning_table');
if (tableComponent) {
tableComponent.getVisualization(function(tableView) {
tableView.table.addCellRenderer(new ActionButtonRenderer());
tableView.table.render();
});
}
});
The button is created with $('<button>').text('Unsolved').
When clicked, after lookup update (search:done), the button label is changed using $btn.text('Solved').
This only changes text for that row's button; repeat clicks won't revert.
🌟 Did this answer help you? If so, please consider:
Your feedback encourages the volunteers in this community to continue contributing