Dashboards & Visualizations

How to change font color or panel background of clickable Singe Value?

welderbuilder
Explorer

I created two Singe Value Visuals that hides different sets of panels when clicked. In a sense, they act as buttons. I want to sort of "highlight" the single value that the user clicked by either changing the font color of the single value or the background of its panel. Is it possible to do it without adding any css or js files? 

I tried this:
<panel id="MyPanel">

<!--search and query tags-->

<option name="drilldown">all</option>

<option name="colorMode">block</option>

<option name="height">70</option>

<option name="useColors">1</option>

<drilldown>
<set token=$FirstClickedTok$>true</set>

<unset token=$SecondClickedTok$></unset>
</drilldown>

<html depends="$FirstClickedTok$">

<style>

#MyPanel .single-result {fill: rgb(255,0,0)!important;}
</style>
</html>

</panel>

but the font color is set immediately even the token is not yet set to true.

I also tried:

<style>

#MyPanel .panel-body {background-color: red !important;}
</style>
This one only adds a little colored row at the bottom of the single value and not the whole panel. 

Labels (3)
0 Karma
1 Solution

niketn
Legend

@welderbuilder a mock screenshot or even whiteboard diagram of what these Single Value based buttons are intended to look like and a use case description of what these buttons are supposed to perform would help us assist you better.

Based on the question, instead of Single Value viz. I would recommend using Splunk Link Input instead.

You can refer to one of my older answers which all use depends/rejects to show/hide certain panels and solve three different use cases. See if one of them solves your needs.

1. Link input as Button Switcher (Toggle).

2. Link Input as Tabs.

3. Link Input as Expand and Collapse panel button.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@welderbuilder a mock screenshot or even whiteboard diagram of what these Single Value based buttons are intended to look like and a use case description of what these buttons are supposed to perform would help us assist you better.

Based on the question, instead of Single Value viz. I would recommend using Splunk Link Input instead.

You can refer to one of my older answers which all use depends/rejects to show/hide certain panels and solve three different use cases. See if one of them solves your needs.

1. Link input as Button Switcher (Toggle).

2. Link Input as Tabs.

3. Link Input as Expand and Collapse panel button.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

welderbuilder
Explorer

@niketn Thanks! I've tried the Link Input as Tabs and it automatically highlights the selected button. This method actually saved a lot of space in my dashboard too!  

welderbuilder
Explorer

@niketn just a follow-up question. This is what I have now (blocked some confidential info): 

welderbuilder_0-1598403683762.png

The goal is for the second row of tabs to open only if a button in the first row was clicked. When the page is refreshed, it must show the first row of tabs only.

In my previous approach, whenever I refresh the page, all tokens will be reset so only the options in the first row are shown. However, when I used the Link as Tabs, tokens are not automatically reset when I refresh the page. The only way to refresh it is by closing and opening the dashboard again. Would you know if I missed something? Thanks

Tags (1)
0 Karma

welderbuilder
Explorer

welderbuilder_0-1598320339023.png

@niketn thank you for the references! Will check them out. Here's a whiteboard diagram of what I wanted to achieve. Let's say user clicked button A, the panel "A" will be highlighted by either changing its background or font color. 

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...