Re: Is it possible to style a link in a drilldown ...

mistydennis · ‎01-18-2019

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>

niketn · ‎01-18-2019

@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!!!"

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

Announcing Scheduled Export GA for Dashboard Studio

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!