Solved: How to make a column value clickable?

av_ · ‎02-06-2023

I have created a Splunk dashboard in which a panel consists of a table. The table has multiple columns wherein one column values consists of URL. The URL is clickable. I have used the following piece of code to make it clickable.

Now, the problem is that the entire row is highlighted in blue and when I hover the mouse over any column, it gives an impression that the field value is clickable when it is not.

I want all the column values to stay in black and unselected. Only the URL values shall remain highlighted.

ITWhisperer · ‎02-06-2023

Try something like this

    <panel depends="$stayhidden$">
      <html>
        <style>
          #panel1006 table tbody td[data-cell-index="0"],
          #panel1006 table tbody td[data-cell-index="1"]{
            color: black !important;
          }
        </style>
      </html>
    </panel>
<panel id="panel1006">
<input id="showCollapseLink5" type="link" token="tokLinkCollapse5" searchWhenChanged="true" depends="$showCollapseLink5$">
<label></label>
<choice value="collapse">-</choice>
<change>
<condition value="collapse">
<set token="showExpandLink5">true</set>
<unset token="form.tokLinkCollapse5"></unset>
</condition>
</change>
</input><input id="linkExpand5" type="link" token="tokLinkExpand5" searchWhenChanged="true" depends="$showExpandLink5$">
        <label></label>
        <choice value="expand">+</choice>
        <change>
          <condition value="expand">
            <set token="showCollapseLink5">true</set>
            <unset token="showExpandLink5"></unset>
            <unset token="form.tokLinkExpand5"></unset>
          </condition>
        </change>
      </input>
      <table rejects="$showExpandLink5$">
        <title>Show field values</title>
        <search>
          <query>index=main sourcetype=abc |table name host link</query>
          <earliest>$fieldEarliestTime$</earliest>
          <latest>$fieldLatestsTime$</latest>
        </search>
        <option name="count">5</option>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition field=" link">
            <link target="_blank">$link|n$</link>
          </condition>
           <condition field="*"></condition>
        </drilldown>
      </table>
    </panel>

View solution in original post

ITWhisperer · ‎02-06-2023

Use a hidden panel with some CSS - you need to give your table an id e.g. tableClickableURL - you also need to repeat for all columns other than the URL column.

    <panel depends="$stayhidden$">
      <html>
        <style>
          #tableClickableURL table tbody td[data-cell-index="0"]{
            color: black !important;
          }
        </style>
      </html>
    </panel>

av_ · ‎02-06-2023

@ITWhisperer , Thanks you for the solution. I tried it but it is not working for me.

I am sharing a piece of my source code. Please let me know how can I incorporate your solution in my code.

</condition>

</change>

</input>

<title>Show field values</title>

<query>index=main sourcetype=abc |table name host link</query>

<earliest>$fieldEarliestTime$</earliest>

<latest>$fieldLatestsTime$</latest>

</search>

<option name="refresh.display">progressbar</option>

</condition>

</drilldown>

</table>

</panel>

ITWhisperer · ‎02-06-2023

Try something like this

    <panel depends="$stayhidden$">
      <html>
        <style>
          #panel1006 table tbody td[data-cell-index="0"],
          #panel1006 table tbody td[data-cell-index="1"]{
            color: black !important;
          }
        </style>
      </html>
    </panel>
<panel id="panel1006">
<input id="showCollapseLink5" type="link" token="tokLinkCollapse5" searchWhenChanged="true" depends="$showCollapseLink5$">
<label></label>
<choice value="collapse">-</choice>
<change>
<condition value="collapse">
<set token="showExpandLink5">true</set>
<unset token="form.tokLinkCollapse5"></unset>
</condition>
</change>
</input><input id="linkExpand5" type="link" token="tokLinkExpand5" searchWhenChanged="true" depends="$showExpandLink5$">
        <label></label>
        <choice value="expand">+</choice>
        <change>
          <condition value="expand">
            <set token="showCollapseLink5">true</set>
            <unset token="showExpandLink5"></unset>
            <unset token="form.tokLinkExpand5"></unset>
          </condition>
        </change>
      </input>
      <table rejects="$showExpandLink5$">
        <title>Show field values</title>
        <search>
          <query>index=main sourcetype=abc |table name host link</query>
          <earliest>$fieldEarliestTime$</earliest>
          <latest>$fieldLatestsTime$</latest>
        </search>
        <option name="count">5</option>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition field=" link">
            <link target="_blank">$link|n$</link>
          </condition>
           <condition field="*"></condition>
        </drilldown>
      </table>
    </panel>

av_ · ‎02-06-2023

@ITWhisperer This worked. Thanks!

How to make a column value clickable?

CSS

table

Extending Observability Content to Splunk Cloud

More Control Over Your Monitoring Costs with Archived Metrics!

New in Observability Cloud - Explicit Bucket Histograms