Dashboards & Visualizations

What css is applied to a selected input link in simple XML?

alhoctamis
Explorer

When using input link, the default selected input appear like this:

screen1.png

Then, when you select any of them, it gets like this:

screen2.png

I would like to apply the css style of a selected input link button to the default when loading the dashboard.

I can play with tokens to do this, I just cannot find the applied css.

I know it might be found be inspecting the page somehow, but I cannot locate it.

I have this run anywhere example:

<form>
  <label>TEST</label>
  <row>
    <panel>
      <html>
        <style>
          #button button{
            background-color: #F7F8FA !important;
            margin-right: 10px;
          }
          .dashboard-panel,
          .panel-body.html{
            background: #F2F4F5 !important;
          }
        </style>
        <center>
            TEST
        </center>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input id="button" type="link">
        <label></label>
        <choice value="A">A</choice>
        <choice value="B">B</choice>
        <default>A</default>
        <change>
          <condition value="A">
            <set token="show_pabel_a">true</set>
            <unset token="show_pabel_b"></unset>
          </condition>
          <condition value="B">
            <unset token="show_pabel_a"></unset>
            <set token="show_pabel_b">true</set>
          </condition>
        </change>
      </input>
      <single depends="$show_pabel_a$">
        <search>
          <progress>
            <condition match="'job.resultCount' &gt; 0">
              <set token="show_panel_a">true</set>
            </condition>
          </progress>
          <query>| makeresults
| eval test="A"
| fields - _time</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
      </single>
      <single depends="$show_pabel_b$">
        <search>
          <progress>
            <condition match="'job.resultCount' &gt; 0">
              <set token="show_panel_a">true</set>
            </condition>
          </progress>
          <query>| makeresults
| eval test="B"</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>

 

Labels (2)
0 Karma

alhoctamis
Explorer

Yes, not clear sorry, and thanks for asking!

I would like to have the focus on the default button when loading the dashboard.

The way 'B' is in the 2nd screenshot, I am trying to have it on default A in the 1st screenshot when opening the dashboard.

I guess if I know what css is applied when focus I would be able to use it this way.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

There isn't a way to affect which dashboard input has focus except through something like javascript.

0 Karma

alhoctamis
Explorer

I see! Thanks for the help abyhow

Tags (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

It is not clear what style you are trying to change and when.

If it is the blue box shadow around the button, this is because the button has focus. Is this what you want to change the style of?

Or are you trying to change the style when the button is selected?

0 Karma
Get Updates on the Splunk Community!

Splunk at Cisco Live 2025: Learning, Innovation, and a Little Bit of Mr. Brightside

Pack your bags (and maybe your dancing shoes)—Cisco Live is heading to San Diego, June 8–12, 2025, and Splunk ...

Splunk App Dev Community Updates – What’s New and What’s Next

Welcome to your go-to roundup of everything happening in the Splunk App Dev Community! Whether you're building ...

The Latest Cisco Integrations With Splunk Platform!

Join us for an exciting tech talk where we’ll explore the latest integrations in Cisco &#43; Splunk! We’ve ...