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!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...