Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | 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!

Splunk Observability for AI

Don’t miss out on an exciting Tech Talk on Splunk Observability for AI!Discover how Splunk’s agentic AI ...

Splunk Enterprise Security 8.x: The Essential Upgrade for Threat Detection, ...

Watch On Demand the Tech Talk on November 6 at 11AM PT, and empower your SOC to reach new heights! Duration: ...

Splunk Observability as Code: From Zero to Dashboard

For the details on what Self-Service Observability and Observability as Code is, we have some awesome content ...