How to add image in table cell based on the field value in Splunk View using sideview

[disha]

I have a view created using sideview, in which search result in populating in the form of table and I have one column in table as "Problem Fixed" and its values is 1 and 0 based on yes or no.
Is it possible I can put right or wrong images in that column based on the field value.
I really need to do that.
Please help.
Thanks

[sideview · Accepted solution]

When Sideview Utils 2.2 comes out, you'll be able to use the Table module to do this fairly easily and with no custom code. The best way to find out exactly when 2.2 comes out is to follow Sideview on twitter -- https://twitter.com/sideview_apps

For now, you can still do it but it requires patching the SimpleResultsTable module's javascript directly from your app.

I do something very similar in my apps to replace certain values with images, so here's an example that I modified from mine:

This comes in two parts.

1) add this to application.js, changing "your_view_name_here" to be the right view.
and changing the "Problem Fixed" to be your actual field name if I have it wrong here.

if (Splunk.util.getCurrentView() == "your_view_name_here") {
    if (Splunk.Module.SimpleResultsTable) {
        Splunk.Module.SimpleResultsTable = $.klass(Splunk.Module.SimpleResultsTable, {
            forEachCellInColumn: function(columnName, callback) {
                var container = this.container;
                container.find("th:contains('" + columnName + "')").each(function() {
                    // does not support colspans.
                    var columnIndex = $(this).parent().children().index($(this));

                    container.find("td:nth-child(" + (columnIndex+1)  + ")").each(function() {
                        callback($(this));
                    });
                });
            },
            onResultsRendered: function() {
                this.forEachCellInColumn("Problem Fixed", function(tdElement) {
                    if (tdElement.text()=="1") {
                        tdElement.text("").addClass("problemFixed");
                    } else {
                        tdElement.text("").addClass("problemNotFixed");
                    }
                });
            }
        });
    }
}

2) add appropriate CSS classes for the background-image that has the icon for "problemFixed" and "problemNotFixed". In other words the Javascript above just adds the CSS classnames to the TD elements. It's the CSS itself that makes the actual images appear there.

Here's what it will look like:

.SimpleResultsTable td.problemFixed {
    background-image: url(images/no_problem.gif);
    background-repeat:no-repeat;
    background-position:5px 3px;
}
.SimpleResultsTable td.problemNotFixed {
    background-image: url(images/problem.gif);
    background-repeat:no-repeat;
    background-position:5px 3px;
}

UPDATE ---------------

Now that Sideview Utils 2.2 is out, the Table module makes things like this much easier. For example below is an entire working example of using the Table module to render an image dynamically in every cell of a certain column.

To find out more, you can accept the internal use license agreement and download the app yourself . The Table module has a lot of documentation although admittedly the docs are a little light for the "embedding" feature that we're using here. This new style of rendering customization offered by the Table and Multiplexer modules is so scarily open-ended that I am going to tackle it as its own docs topic sometime soon.

Until then, if you accept the magic and run with it, you can do a huge range of custom rendering just with simple config like the below:

<module name="Search">
  <param name="search"><![CDATA[
    * | head 1000 | timechart count | delta count as change | eval icon=if(change>0,"sort_asc",if(change<0,"sort_desc","none"))
  ]]></param>

  <module name="Table">
    <module name="HTML" group="row.fields.icon">
      <param name="html"><![CDATA[
        <img src="/static/app/sideview_utils/images/arrow_$row.fields.icon$.gif">
      ]]></param>
    </module>
  </module>        
</module> 

[disha]

Yes I have changed it but not working for me. Now sideview 2.2 is released. Do we have better idea to do that? Thanks

[sideview]

and just to double check, and because you mentioned the other diffs but not this one -- you changed the view name from "your_view_name_here", right?

[sideview]

(continued...) If there is no JS error, but no classname, then double check the tokens and the uppercase-lowercase nature of everything. you can put statements into the JS like
console.log("the tablecell text here is " + tdElement.text())

If there is no JS error, and there is a classname being rendered, but there is no image, Firebug has some CSS inspection features that can also be enabled. This means that when you use the DOM inspector to look at the TD elements, you can look at the runtime CSS rules and often there is a simple typo or a path problem to the image URLs.

[sideview]

I would use a DOM inspector like Firebug which is an add-on for Firefox. In Firebug's "inspect" mode, look at the rendered table cells (the <td> tags), and see if the className is actually getting written in as class="problemNotFixed" etc.

Also check the "console" in Firebug to see if there are any errors that get logged when the page loads and/or when the table renders.

If there is a JS error, chances are that there's a syntax error somewhere, or something else went awry.

(continued in next comment)

[disha]

I know this should work but it is not working for me. I don't know much java script so I have just copied the code but in the table images are not coming instead of "Yes" or "No" 😞
The only changes I have in my code is in application.js
if (tdElement.text()=="Yes") {
and in my css file the image is jpeg format in the same dir so
background-image: url(Yes.jpeg);
To see the changes I have restarted the splunkweb and bump the data. Any thoughts?