1

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.

Per Henrik Lausten
  • 21,331
  • 3
  • 29
  • 76
Bill F
  • 2,057
  • 3
  • 18
  • 39

1 Answers1

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.

Knut Herrmann
  • 30,880
  • 4
  • 31
  • 67
  • I had done something like this previously and it worked but the dropdown was displaced (did not line up under the pill. I must have had the xp:panel wrapped wrong. In any case this works fine. Thanks – Bill F Jul 25 '15 at 15:14
  • Some further findings. In my earlier attempts to wrap the drop down in xp:panel I had been wrapping it around the div class="dropdown" and the drop down works but it messes up the display of the button and the drop down is displaced to the right (does not line up under the pill. I moved it down one level and wrap li class="dropdown" and the pill displays correctly and the dropdown is properly placed. So initially I had the right idea I was just wrapping the wrong element with the panel. I kind of figured out the whyit behaves the way it does when looking at elements as containers. – Bill F Jul 25 '15 at 15:40
  • one more piece of information I was declaring the dropdown class in a div -- div class="dropdown" which works just fine until you attempt to wrap the div in a panel several strange things happen. Change the div to an li and now you can wrap it in a panel and it works the way you would expect it to. Scary thought I might be catching on to this bootstrap stuff! – Bill F Jul 25 '15 at 16:12
  • Bill, great it works for you. Do you use `disableOutputTag="false"` in this case? If yes, I would add it to my code example. – Knut Herrmann Jul 25 '15 at 18:52
  • I have used it with the disableOutputTag="false" and with it set to true and I don't see any difference in the function. Are there advantages/disadvantages to setting it? – Bill F Jul 27 '15 at 02:34