Dashboards & Visualizations

Is it possible to style a link in a drilldown in an XML dashboard?

mistydennis
Communicator

Is it possible to style a link in a drilldown in an XML dashboard? I have a dashboard with links to another system. I would like for the link to change color (or something similar) after a user clicks on it so the user knows they have already visited this link.

Is this possible in an XML dashboard?

Here's my code for the drilldown:

<option name="drilldown">row</option>
<drilldown>
<link target="_blank">$row.FolderLink|n$</link>
</drilldown>
0 Karma

niketn
Legend

@mistydennis try the following run anywhere example which has a drilldown to link created. It uses jQuery to add clicked class to each clicked cell. Then CSS override is used to apply background color for such clicked cells.

<dashboard script="table_clicked_cell.js">
  <label>Table Drilldown</label>
  <row>
    <panel>
      <html>
        <style>
          #tableWithDrilldownColor tbody tr td.clicked{
            background: #99C5D7;
          }
        </style>
      </html>
      <table id="tableWithDrilldownColor">
        <search>
          <query>index=_internal sourcetype=splunkd log_level=* component=*
| chart count by component log_level limit=5 useother=f
| head 10</query>
          <earliest>-1h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <link target="_blank">https://google.com</link>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

Following is the required JS file table_clicked_cell.js

 require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_, $, mvc, TableView) {
     console.log("Script Started");
     $(document).on("click","#tableWithDrilldownColor table tbody tr td",function(){
         $(this).removeClass("clicked").addClass("clicked");
     });
 });

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...