CODEWITHSUNDEEP
xpages
John Glabb
John Glabb

Reputation: 1621

How to make headingText of navBar clickable?

I want the headingText be clickable. Well I can make it as a navbarBeforeLinks node but don't believe there is no way to make headingText clickable. E.g. I want the app redirect to Homepage by clicking on it.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:navbar id="navbar1" headingText="My application name"></xe:navbar>
</xp:view>

Upvotes: 2

Views: 58

Answers (1)

Knut Herrmann
Knut Herrmann

Reputation: 30970

Use client side JavaScript to add an onclick event and style "pointer" to navBar's headingText:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
    xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xe:navbar
        id="navbar1"
        headingText="My application name">
    </xe:navbar>
    <xp:eventHandler
        event="onClientLoad"
        submit="false">
        <xp:this.script><![CDATA[
            function goHome() {
                window.location.href = "... your home URL ..."
            }
            dojo.query(".navbar-brand").forEach(function(node, index, arr){
                node.style.cursor = "pointer";
                node.addEventListener("click", goHome);
            });
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:view>

You can find headingText's node element in DOM with the help of class "navbar-brand".

enter image description here

Upvotes: 2

Related Questions