How to set icons in PrimeFaces tree nodes

Question

Hello,

I would like to set icons in PrimeFaces tree nodes. My icons are configured in the project CMS.

Unfortunately, the Resource Demo doesn't help me.

<p:tree id="treeSingle" value="#{treeBean.root}" var="node" selectionMode="single"
        selection="#{treeBean.selectedNode}">
  <p:treeNode icon="">
    <h:outputText value="#{node.name}" />
  </p:treeNode>
</p:tree>

In <p:treenode> I need to set the icon attribute with a syntax that will retrieve icons from the CMS.

Accepted Answer

1

Basically the icon attribute points to a css-class. So if you want to use custom icons you need to create a custom css-class. For example:

CSS-Class:

.customIcon {
   background: transparent url("#{resource['ivy-cms:Images/customIconImage']}") no-repeat top !important;
}

Your code:

[...]<p:treeNode icon="customIcon">[...]

The CSS-class will now reference a file that is within the CMS-Folder Images/ and point to an image with name customIconImage (doesn't matter what format). You can also set the width and height within the CSS-class to control the size of the icon via CSS, although this is not recommended because this takes up bandwith when the original sized icon is loaded and afterwards resized.

Hope this helps.

link

answered 18.11.2013 at 09:21

Nikel Weis
(suspended)
accept rate: 57%

edited 18.11.2013 at 10:01

1

Thanks Nikel,

You saved my day! To be precise, I created a CSS file "style.css" in "<project>/webContent", with the CSS-class content you mentioned.

Then I added <h:outputstylesheet name="style.css"/> right after the <h:body> tag.

And finally, I referenced the icon resource in my <p:treenode> tag. That works.

(18.11.2013 at 10:01) A1234

1

Better practice would be to place it within the <head>-Tag. But that should be done quickly. Glad to hear, that it helped.

(18.11.2013 at 16:22) Nikel Weis

Good point! Fixed it.

I was inspired by the MethodCallbackDialog in the HtmlDialogDemos project.

(18.11.2013 at 16:33) A1234

How to set icons in PrimeFaces tree nodes

Follow this question

Related questions