Hiding and Displaying XPages Custom Controls from HREF

Question

In an XPages application I've been given the following HTML code for a navigation bar which will be used to select which of three different Custom Controls display:

    <ul class="Navigation">
        <li><a href="optionOne">Option One</a></li>
        <li><a href="optionTwo">Option Two</a></li>
        <li><a href="optionThree">Option Three</a></li>
    </ul>

I know lots of ways to display or hide Panes or Divs or Custom Controls from buttons or code but I can't figure out how to do it from a simple HREF call. I've tried hiding a div using dojo which works in CSJS in a button but not here, and using CSJS to set a sessionScope variable which of course doesn't work:

    <li><a href="javascript:dojo.byId('#{id:myDivTwo}').style.display='none'">Option One</a></li>
    <li><a href="javascript:sessionScope.candidateCC = 'optionTwo';">Option Two</a></li>

I'd appreciate any help with this. Thanks very much in advance!

score 1 · Answer 1 · answered Oct 02 '15 at 01:43

1

If you want to hide a custom control based on url. I believe that's can be done via the dynamic content control that comes with the ext library or 9.0x. I might have the name wrong but should be close. I think there's an example in the ext library demo app that you can get from OpenNTF.

answered Oct 02 '15 at 01:43

David Leedy

3,583
18
38

The Switch control in Ext Lib does something similar. But the Dynamic Content Control does not store the custom controls (or whatever the content of each facet is) in the component tree. So it's a more recommended approach. The facet to show can be displayed via client-side or server-side code and can be managed via an href. – Paul Stephen Withers Oct 03 '15 at 15:35

score 0 · Answer 2 · answered Oct 01 '15 at 20:58

0

You could hide the whole <li> element by using a panel:

<xp:panel tagName="li" rendered="...">
<a href="...">...</a>
</xp:panel>

Just calculate the rendered property with your logic for that panel element.

answered Oct 01 '15 at 20:58

Oliver Busse

3,375
1
16
26

Thanks very much, Oliver Busse, for the response. I think I may have been unclear in my question. I'm not trying to hide
elements of the unordered list, I'm trying to pick which Custom Control will display based on which
element is clicked. The Custom Controls are in panes below the HTML code containing the unordered list. They'll all be hidden except for one default Custom Control when the XPage opens and then the user can select or display other Custom Controls by clicking on the appropriate
tag.

Alex Mendez

Oct 01 '15 at 21:27

score 0 · Answer 3 · answered Oct 02 '15 at 06:41

Use XSP.partialRefreshGet() or XSP.partialRefreshPost() to refresh your panel with all custom controls from client side. Set a parameter "option" with the current value.

javascript:XSP.partialRefreshGet("#{id:panelAll}", {params: {'option': 'One'}}

Refresh the panel on server side testing the delivered option with

param.option == 'One'

and render your sub panels accordingly.

score 0 · Answer 4 · answered Oct 02 '15 at 16:25

0

If it must be

href="optionOne"

or similar, you could try with

href="currentpage.xsp?nav=optionOne"

and use param.nav in your code to find out which option is selected. Much like Knut's idea, but then doing a full refresh.

answered Oct 02 '15 at 16:25

D.Bugger

2,300
15
19

Hiding and Displaying XPages Custom Controls from HREF

4 Answers4