xpages application layout control html label

Question

I need to customize the output produced by the standard application layout control such as adding HTML code to the label (e.g. to specify fa icons that nest the label):

<xe:this.configuration>
            <xe:simpleResponsiveConfiguration>
                <xe:this.navbarUtilityLinks>
                    <xe:basicLeafNode>
                        <xe:this.label><![CDATA[<i class="fa fa-bell">Notification(s)</i>]]></xe:this.label>
                    </xe:basicLeafNode>
                </xe:this.navbarUtilityLinks>
            </xe:simpleResponsiveConfiguration>
        </xe:this.configuration>
    </xe:applicationLayout>

Unfortunate, the output displayed is not escaped and the result is

<i class="fa fa-bell">Notification(s)</i>

instead of Notification(s). Is there any way to set escape="false" /"true" for the options label in an application layout control?

Try this: Set the styleClass value to "fa fa-bell" and leave the label just as "Notification(s)" — Steve Zavocki

Brian Gleeson - IBM Brian Gleeson - IBM · Accepted Answer · 2015-06-08T16:46:01

The tree nodes are a bit limited in this respect. They weren't designed to be able to add additional html inside the rendered output. You've tried to hack it in there using the label property, but that will always be escaped.

Steve's suggestion to set fa fa-bell as the styleClass of the node itself works, sort of. It would display the icon and text, but it messes up the font style of the label text. And if you change the font of the label, it messes up the icon, as they are all part of the same DOM element.

However, in the ToDo sample application (that is now part of the ExtLib release), there is an example of doing what you want using jQuery, in the simpleLayout custom control. It adds the icons during the onClientLoad event of the XPage. If you re-work that code, you could use it to do what you want:

<xp:eventHandler event="onClientLoad" submit="false">
    <xp:this.script><![CDATA[
        $(".applayout-utility-links li:nth-child(1) a").prepend("<i class='fa fa-bell' style='margin-right:5px'></i>")]]>
    </xp:this.script>
</xp:eventHandler>

Font Awesome navbar link

xpages application layout control html label

1 Answers