Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question

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

mistydennis
Communicator
‎01-18-2019 09:34 AM

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
Reply

niketn
Legend
‎01-18-2019 11:32 AM

@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
Reply
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

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 ...