How to display table icons in Advanced XML?

[proylea]

I currently have a Simple XML dashboard that renders icons for values low, elevated, and severe.
I'm trying to translate this into Advanced xml

<form script="table_icons_rangemap.js" stylesheet="table_decorations.css">
  <label>HTTPD Service Status</label>
  <description>Display web server httpd processes that are not running</description>
  <fieldset submitButton="false">
    <input type="checkbox" token="service" searchWhenChanged="true">
      <label>Service Type</label>
      <choice value="httpd">httpd</choice>
      <choice value="tomcat">tomcat</choice>
      <choice value="nirvana_internal">TUM Backend</choice>
      <default>httpd,tomcat,nirvana_internal</default>
      <prefix>(</prefix>
      <suffix>)</suffix>
      <valuePrefix>app="</valuePrefix>
      <valueSuffix>"</valueSuffix>
      <delimiter> OR </delimiter>
    </input>
  </fieldset>
  <row>
    <panel>
      <table id="table1">
        <title>Service Status</title>
        <searchString>| inputlookup starx-hosts-status | search $service$ | eval statusNum=if(Status="Up",0,1) | rangemap field=statusNum low=0-0 severe=1-9999999 default=Severe| table component, host, range | rename component AS Service host AS Hostname range AS Status | sort  -Status</searchString>
        <earliestTime>-1m</earliestTime>
        <latestTime>now</latestTime>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="count">10</option>
      </table>
    </panel>

I have the custom CSS and JavaScript that I took from Sideview examples in my app.

root@s616406shsl78:00:20:50:/opt/splunk/etc/apps/tasman/appserver/static# ls -l
-rwxr-x---. 1 splunk splunk   836 Sep  7 03:41 table_decorations.css*
-rwxr-x---. 1 splunk splunk  1331 Sep  7 04:19 table_icons_rangemap.js*

I have referenced them in my Advanced XML.

<view autoCancelInterval="90" isSticky="False" onunloadCancelJobs="true" script="table_icons_rangemap.js" stylesheet="table_decorations.css" template="dashboard.html">

Then the search

 | inputlookup starx-hosts-status | search (app="httpd" OR app="tomcat" OR app="nirvana_internal") | eval statusNum=if(Status="Up",0,1) | rangemap field=statusNum low=0-0 severe=1-9999999 default=Severe| table component, host, range | eval actions="PLACEHOLDER" | rename component AS Service host AS Hostname range AS Status | sort  -Status | eval showme=if(Status=="severe","true","false")

I am trying to render icons for the Status field.

I have played around with various class and CSS parameters in Sideview and haven't hit on a working combo yet.

I am wondering how this part of my Simple XML that references the JavaScript table_icons_rangemap.js translates into Advanced XML?

<table id="table1">

I have searched answers and am yet to find the answer, any help would be appreciated

[sideview]

You can do this with Sideview Utils. You'll have to read the documentation and examples within that app to get up to speed at least on the Sideview Table module.

Here is another post on the same topic:
http://answers.splunk.com/answers/306908/how-to-add-icons-to-a-table-in-splunk-5.html

The example @proylea shows is a great one, although a bit more advanced. All you need for a column of icons is a single HTML module under the Table.

[proylea]

Might be helpful to see what the advanced xml looks like

<view autoCancelInterval="90" isSticky="False" onunloadCancelJobs="true" script="table_icons_rangemap.js" stylesheet="table_decorations.css" template="dashboard.html">
  <label>Table - embedding examples</label>

  <module name="AccountBar" layoutPanel="appHeader" />

  <module name="AppBar" layoutPanel="appHeader" />

  <module name="SideviewUtils" layoutPanel="appHeader" />

  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="maxSize">2</param>
    <param name="clearOnJobDispatch">False</param>
  </module>

  <module name="HTML" layoutPanel="viewHeader">
    <param name="html"><![CDATA[
    <h1>Table - embedding examples</h1>
    ]]></param>
  </module>
  <!-- EXAMPLE BEGIN -->

  <module name="Search" layoutPanel="panel_row4_col1" autoRun="True">
    <param name="search"><![CDATA[
      | inputlookup starx-hosts-status | search (app="httpd" OR app="tomcat" OR app="nirvana_internal") | eval statusNum=if(Status="Up",0,1) | rangemap field=statusNum low=0-0 severe=1-9999999 default=Severe| table component, host, range | eval actions="PLACEHOLDER" | rename component AS Service host AS Hostname range AS Status | sort  -Status | eval showme=if(Status=="severe","true","false")
    ]]></param>

    <module name="Pager">

      <module name="Table">
        <param name="cssClass">icon</param>
        <param name="columns.Status.class">$row.fields.Status$</param>

        <module name="ValueSetter" group="row.fields.actions">
          <param name="name">foo</param>
          <param name="if.$row.fields.showme$=true">low</param>

          <module name="Gate">
            <param name="requiredKeys">foo</param>

            <module name="Button">
              <param name="allowAutoSubmit">False</param>
              <param name="customBehavior">confirmationPopup</param>
              <param name="label">Start</param>

              <module name="Redirector">
                <param name="popup">True</param>
                <param name="url">http://google.com</param>
              </module>
            </module>
          </module>
        </module>
      </module>
    </module>
  </module>
</view>

[proylea]

I'm also adding a button for any down services which will kick of a script to start the service, just in case your wondering why the button??