Get Bootstrap tabs to work in Xages

1
votes

I want to put a tabbed interface in an Xpage on one of my apps. Using Bootstrap for the Ui.

This works great:

<xp:div styleClass="row">
            <xp:div styleClass="col-sm-12">
                <ul class="nav nav-tabs" id="myTab">
                    <li class="active">
                        <a data-target="#home" data-toggle="tab">Inventory</a>
                    </li>
                    <li>
                        <a data-target="#menu1" data-toggle="tab">Being Built</a>
                    </li>
                    <li>
                        <a data-target="#menu2" data-toggle="tab">Deployed</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane fade in active" id="home">Inventory</div>
                    <div class="tab-pane fade" id="menu1">Being Built</div>
                    <div class="tab-pane fade" id="menu2">Deployed</div>
                </div>
            </xp:div>
        </xp:div>

        <xp:div styleClass="row">
            <xp:div styleClass="col-sm-12">

                <ul class="nav nav-tabs" id="ul1">
                    <li class="active">
                        <a data-target="#xhome" data-toggle="tab">Inventory</a>
                    </li>
                    <li>
                        <a data-target="#xmenu1" data-toggle="tab">Being Built</a>
                    </li>
                    <li>
                        <a data-target="#xmenu2" data-toggle="tab">Deployed</a>
                    </li>
            </ul>

But typically I turn any straight HTML into xp tags so I can use things like disabled and the other Xpages controls and attributes. For example, depending on the status of the document, I want to hide and/or disable some tabs. I find that easier to do with Xpages.

But I have tried all kinds of controls, like inline lists, tabbed panels and nothing works like the html code here.

Is there some Xpage controls that will work?

2
twitter-bootstraptabsxpages

2 Answers

3
votes

I'm not sure I totally follow you. I think you want something like this:

<ul class="nav navbar-nav">
    <li>
        <xp:link styleClass="navbar-brand" text="Home" value="/basic_Menu.xsp"
        id="link1" />
    </li> 
        <xp:panel tagName="li" rendered="#{controller.myObject.isValid}">
                <xp:link text="#{param.myUrlParam}" >
                    <xp:this.value><![CDATA[#{javascript:return "/myPage.xsp?jobId=" + param.get("myUrlParam")}]]></xp:this.value>
                                </xp:link>
                            </xp:panel>
                        </ul>

This is a snippet from Bootstrap code I use in a navBar. There is no <xp:li> tag right? So you have to use <li> straight. BUT if you use a panel and change the tagName to "li" then in effect it becomes "" and you can use all the properties of a panel like rendered.

So use bootstrap code like you posted and then add in this technique where needed. There is also an <xp:span> which might also be helpful - though I use panels for most of this stuff.

1
votes

David's approach is a good one. In one of my apps I also use the Bootstrap tabs and made the hide when on li tag directly

<li role="presentation"
                        style="display:#{javascript:(account.isNewNote())? 'none':'block;'}">
                        <a href="#banking" aria-controls="banking" role="tab"
                            data-toggle="tab">
                            <xp:text>
                                <xp:this.value><![CDATA[#{javascript:language.getLanguageString("page.account.tab.banking")}]]></xp:this.value>
                            </xp:text>
                        </a>
                    </li>