Toggling a Pill or Nav Visible Property using SSJS or CSJS in XPages

Question

I have a rather involved piece of SSJS that determines if a particular pill in a ul class="nav nav-pills" navigator at the moment the SSJS sets viewScope.vsPillVisible to either true or false. So far so good. Now how do I get that to the pill. assume for the moment that the pill list looks like this:

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown” href="#">Menu 1
<spanclass="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>

I now want to hide the dropdown tab if vsPillVisible == false I believe that I need to set an attribute but not sure that can be done in SSJS and then what attribute to set. Any help appreciated.

Answer 1

You can add SSJS code to tags starting with <xp:, <xe: or <xc: usually. They get rendered (= html sent to browser) to something else or maybe don't get rendered at all if the rendered property returns false.

Your code in question is just html and will be sent to browser as it is. Your question now is how to hide parts of your html code depending on a viewScope variable.

A common way is to surround parts of your XPages/html tags by <xp:panel> ... </xp:panel>.

You can add a rendered property to such a panel and conditionally render the whole block depending on SSJS code. In your case it could look like this

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <xp:panel rendered="#{viewScope.vsPillVisible}">
        <li class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown” href="#">Menu 1
              <span class="caret"></span></a>
           <ul class="dropdown-menu">
                ...
           </ul>
        </li>
    </xp:panel>
    ... 
</ul>

The whole <li class="dropdown"> ... </li> block won't be rendered (= sent to browser) if viewScope.vsPillVisible is false.

Usually a panel tag <xp:panel> ... </xp:panel> gets rendered to <div> ... </div>. In case you don't want this just add a property disableOutputTag="false" to the panel tag.