Thursday 17 November 2016

How to hide adf tree leaf node icons

If you are working with Oracle ADF, you must have a menu with af:tree component here or there. i also used af:tree as main menu, but there was this annoying expand icon for leaf nodes. i googled it for a while and searched in forums, nothing has appeared. so i solved this with kind of tricky solution.
this is how a recursive af:tree looks like with expand icons on leaf nodes:
as you see, we can’t figure out which one is leaf node that has no child. you should try to expand to see if there are child nodes:
and here is tricky part. we need a 10px * 10px white spacer image and some inline styling in af:tree nodeStamp facet. initial facet code is:
<f:facet name="nodeStamp">
  <af:outputText value="#{node}" id="ot1"/>
</f:facet>
then i added af:image and css positioning. but most important part is rendered attribute.
<f:facet name="nodeStamp">
  <af:group id="g1">
    <af:image id="i1" source="/i/spacer.png" rendered="#{node.children == null}"
              inlineStyle="position: absolute; margin-left:-17px;
                           border: 2px solid white; width: 15px; height: 10px;"/>
    <af:outputText value="#{node}" id="ot1"/>
  </af:group>
</f:facet>
i added red border styling to make easy to see where spacer image is located and how it covers expand icon.
this tricky solution has challenges like adf skinning. i am using blafplus-rich skin family and white spacer is suitable for me. if you have another skin, you may need different image or css styling.

No comments:

Post a Comment

Contact Me

Name

Email *

Message *