Security

Add icons to xml dashboard and change the icon based on the count

karthi25
Path Finder

I have an requirement to add icons to the xml dashboard and need to change the icon based on the result.

Something like the below image:
alt text

Since, I don't have permissions to use javascript/jquery inside, I only need to use CSS and XML.
Can anyone please help me to do it.

0 Karma
1 Solution

vnravikumar
Champion

Hi @karthi25

Please Check this and let me know, In this sample based on value range(0-20,21-100) two images where shown.

<form>
  <label>icon</label>
  <fieldset submitButton="false">
    <input type="text" token="value">
      <label>Sample value(1-100)</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        <body>
          <tr>
            <td>
            <img src="$path$"/>
          </td>
          </tr>
        </body>
      </html>
    </panel>
    <panel>
      <single>
        <search>
          <query>|makeresults |eval temp=$value$ | table temp</query>
          <progress>
            <condition match="'result.temp' >=0 AND 'result.temp' <21">
              <set token="path">/static/app/search/img1.png</set>
            </condition>
            <condition match="'result.temp' >=21 AND 'result.temp' <=100">
              <set token="path">/static/app/search/img2.jpg</set>
            </condition>
          </progress>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
      </single>
    </panel>
  </row>
</form>

View solution in original post

vnravikumar
Champion

Hi @karthi25

Please Check this and let me know, In this sample based on value range(0-20,21-100) two images where shown.

<form>
  <label>icon</label>
  <fieldset submitButton="false">
    <input type="text" token="value">
      <label>Sample value(1-100)</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        <body>
          <tr>
            <td>
            <img src="$path$"/>
          </td>
          </tr>
        </body>
      </html>
    </panel>
    <panel>
      <single>
        <search>
          <query>|makeresults |eval temp=$value$ | table temp</query>
          <progress>
            <condition match="'result.temp' >=0 AND 'result.temp' <21">
              <set token="path">/static/app/search/img1.png</set>
            </condition>
            <condition match="'result.temp' >=21 AND 'result.temp' <=100">
              <set token="path">/static/app/search/img2.jpg</set>
            </condition>
          </progress>
          <earliest>$earliest$</earliest>
          <latest>$latest$</latest>
        </search>
      </single>
    </panel>
  </row>
</form>

rsreese
Explorer

This answer does not seem to work on a Splunk 9.x Classic Dashboard. Receiving the error below when attempting to save the answer code in an example dashboard:

Error parsing XML on line 37: Extra content at the end of the document

0 Karma

vnravikumar
Champion

@karthi25, Have you tried?

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...