Wie fügt man Glyphicon neben einem basicContainerNode hinzu?

Question

Hier ist mein xPage mit einem Dropdown (basicContainerNode), das ein Benutzername ist. Ich möchte nur ein Symbol neben dem Label hinzufügen. Angenommen, ich muss es zur IMAGE-Eigenschaft, aber nicht zur Beschriftung hinzufügen.

<xe:this.navbarUtilityLinks> 
    <xe:basicContainerNode> 
     <xe:this.label><![CDATA[#{javascript:var currentUserName:NotesName = session.createName(session.getEffectiveUserName()); 
     return "<span class='glyphicon glyphicon glyphicon-user' style='margin-right: 1em;'></span>" + currentUserName.getAbbreviated();}]]> 
     </xe:this.label> 

    <xe:this.children> 
     <xe:loginTreeNode rendered="false"></xe:loginTreeNode> 
     <xe:basicLeafNode title="Logout" submitValue="appLogout" label="Logout"></xe:basicLeafNode> 
    </xe:this.children> 
    </xe:basicContainerNode> 
</xe:this.navbarUtilityLinks> 

Answer 1

Das Label basicContainerNode kann nur Nur-Text sein.

Entfernen Sie den Spanne-Teil von Ihrem Label und fügen Sie das folgende Ereignis zu Ihrem XPage:

<xp:eventHandler 
    event="onClientLoad" 
    submit="false"> 
    <xp:this.script><![CDATA[dojo.query('.dropdown .dropdown-toggle').forEach(function(e){ 
     var spanNode = document.createElement("span");    
     spanNode.className = 'glyphicon glyphicon-user'; 
     spanNode.style.marginRight='1em'; 
     e.insertBefore(spanNode, e.firstChild); 
    })]]></xp:this.script> 
</xp:eventHandler> 

Es sucht nach Klassen „Drop-Down“ + „Drop-Down-Toggle“ und fügt ein span-Element mit den Klassen " glyphicon glyphicon-user "und der Stil" margin-right: 1em ".

Auf diese Weise können die Benutzer-Symbol vor dem Benutzernamen erhalten: