Solved: How to change font color or panel background of cl...

welderbuilder · ‎08-24-2020

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

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

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

niketn · ‎08-24-2020

@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 · ‎08-24-2020

@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 · ‎08-25-2020

@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 · ‎08-25-2020

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

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

welderbuilder · ‎08-24-2020

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

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

CSS

panel

single value

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!