Single Value Decorations through inline code

[splunkomon]

I'm trying to develop on Splunk Enterprise a dashboard panel , where according to the range in which a single value result to a search is, the panel will display a success symbol (e.g. large red filled circle) with the result value next to it in red coloured font or a an error symbol (e.g. large green filled circle) with the result value in green coloured font next to it. It should be capable of adding link for drilldown.

The idea is to have a simplified panel with traffic light effect (green for all good and red for errors) for monitoring use case.  The Single Value Decorations  examples using "single_decorations.css" shown in https://www.splunk.com/en_us/blog/tips-and-tricks/shiny-icons.html is exactly what I'm looking for, but I since I cannot install apps I need an alternative. How to achieve a similar effect with inline code would be perfect.

Limitations: I do not have access to asset upload or app installation (I can't upload css/js files to the app so thus far I've been using inline css code).

[splunkomon · Accepted solution]

I've learned that this can be done through additional search queries and adding the in text symbol as a "Unit". All through inline code and CSS was not needed after all.

Example:

<panel>
      <title>Add Text Symbol as Unit</title>
      <single>
        <title>Success Test</title>
        <search>
          <query>| makeresults | eval count=0 | eval unit=if(count=0, "🗸", "⚠")</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <condition>
              <set token="p1v1unit">$result.unit$</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">all</option>
        <option name="field">count</option>
        <option name="rangeColors">["0x53a051","0xdc4e41"]</option>
        <option name="rangeValues">[0]</option>
        <option name="unit">$p1v1unit$</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <drilldown>
          <link target="_blank">DRILLDOWNLINK</link>
        </drilldown>
      </single>
      <single>
        <title>Failure Test</title>
        <search>
          <query>| makeresults | eval count=33 | eval unit=if(count=0, "🗸", "⚠")</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
          <done>
            <condition>
              <set token="p1v2unit">$result.unit$</set>
            </condition>
          </done>
        </search>
        <option name="colorBy">value</option>
        <option name="drilldown">all</option>
        <option name="field">count</option>
        <option name="rangeColors">["0x53a051","0xdc4e41"]</option>
        <option name="rangeValues">[0]</option>
        <option name="unit">$p1v2unit$</option>
        <option name="unitPosition">before</option>
        <option name="useColors">1</option>
        <drilldown>
          <link target="_blank">DRILLDOWNLINK</link>
        </drilldown>
      </single>
    </panel>