How to set a custom icon in dataview with bootstra

Question

I want to set a custom icon with glyphicons or custom uploaded icon on xpages dataview, but the icon always defaults to file icon. Im using bootstrap theme and latest xpages extension lib (r10).

I want to change the icon in the dataview document row, not the categorization icon. The code with bootstrap theme always defaults to this code.

<div class="glyphicon glyphicon-file xspReadIcon"></div> 

I tried with:

<xe:iconEntry selectedValue="read" url="/legalforms.gif" styleClass="hidden-xs"></xe:iconEntry>
<xe:iconEntry selectedValue="read" url="/legalforms.gif" styleClass="glyphicons glyphicons-user"></xe:iconEntry>

Answer 1

It looks like you've found a bug in the data view renderer for the bootstrap theme. We will look into fixing that in the future. In the meantime you can try using the workaround below.

You can use the icon facet of the data view, by specifiying xp:key="icon". Then add a div with a custom styleClass in the facet. For example:

<xe:dataView id="dataView1">
    ....
    <xe:this.facets>
      <xp:panel xp:key="icon">
        <xp:div>
             <xp:this.styleClass>
                 <![CDATA[#{javascript:
                     var doc:NotesDocument = viewEntry.getDocument();
                     if(doc.getRead()) {
                         return "hidden-xs";
                     }else{
                        return "glyphicon glyphicon-user";
                     }
                }]]>
            </xp:this.styleClass>
        </xp:div>
      </xp:panel>
    </xe:this.facets>
</xe:dataView>

Answer 2

I just tried Brians solution and that may work for you, I could however not get it to work for the category icon.

anyway, You can replace all icons client side by replacing the icons on load, you may need to call the code on partial refresh also

$(function(){
$(".glyphicon-minus-sign").removeClass("glyphicon-minus-sign").addClass("glyphicon-minus")
$(".glyphicon-plus-sign").removeClass("glyphicon-plus-sign").addClass("glyphicon-plus")
})