topic Re: Row expansion for a hidden column in SplunkJS in Dashboards & Visualizations

Row expansion for a hidden column in SplunkJS

MikeJu25 — Thu, 08 Jul 2021 15:33:35 GMT

Hi,

My table has 7 fields, but I want to hide one of them which is Database ID. However, I still want Database ID to appear in the row expansion. Here's my JS code:

Attached file is what it looks like on UI. Instead of Database ID: FinanceDB, I want the row expansion to show the real Database ID for this database, but it seems like the hidden Database ID is not in fields.

Could someone guide me through this? Thank you!

Re: Row expansion for a hidden column in SplunkJS

kamlesh_vaghela — Sun, 11 Jul 2021 06:02:42 GMT

@MikeJu25

Can you please try this Example? I have updated the search by adding

| eval data_source=data_source."|".database_id

and some JS

XML

<dashboard script="row_expansion.js"> <label>Row Expansion Table</label> <row> <panel> <table id="sample_table"> <search> <query>| makeresults count=5 | eval id=1 |accum id | eval database_id=100+id,data_source="Data Source",source_type="Source Type",anomaly_count="Anomaly Count",data_source="Data Source",hostname="Host Name",ip="IP",port="Port" | eval data_source=data_source."|".database_id | rename data_source as "Data Source" source_type as "Source Type" anomaly_count as "Anomaly Count" data_source as "Data Source" hostname as "Host Name" ip as IP port as Port | fields "Data Source", "Source Type", "Anomaly Count", "Host Name", IP, Port | fields - _time</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="rowNumbers">false</option> <option name="totalsRow">false</option> <option name="wrap">true</option> </table> </panel> </row> </dashboard>

row_expansion.js

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView) { var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return cell.field; }, render: function($container, rowData) { if (rowData.field === "Data Source") { $container.html(rowData.value.split("|")[0]) } else { $container.html(rowData.value) } } }); var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({ initialize: function(args) { // initialize will run once, so we will set up a search and events to be reused. }, canRender: function(rowData) { return true; }, render: function($container, rowData) { var index = rowData.fields.indexOf("Data Source"); $container.append("<div><b>Database ID</b>: " + rowData.values[index].split("|")[1] + "</div>"); } }); var tableElement = mvc.Components.getInstance("sample_table"); tableElement.getVisualization(function(tableView) { // Add custom cell renderer, the table will re-render automatically. tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.table.render(); tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer()); }); });

Thanks
KV
▄︻̷̿┻̿═━一

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

Re: Row expansion for a hidden column in SplunkJS

MikeJu25 — Mon, 12 Jul 2021 03:10:50 GMT

Thank you so much! That's really helpful!

Re: Row expansion for a hidden column in SplunkJS

bowesmana — Mon, 12 Jul 2021 03:15:57 GMT

@MikeJu25

You can use the <fields> XML element inside the <table> to only expose the fields in the table you want but which has as many fields as you like. Not sure if that's helpful with your use case though.

https://docs.splunk.com/Documentation/Splunk/8.1.2/Viz/PanelreferenceforSimplifiedXML#table