Solved: Add icons to xml dashboard and change the icon bas...

karthi25 · ‎02-17-2019

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:

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.

vnravikumar · ‎02-17-2019

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 · ‎02-17-2019

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 · ‎01-18-2024

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

vnravikumar · ‎02-19-2019

@karthi25, Have you tried?

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

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation