CODEWITHSUNDEEP
twitter-bootstrapxpages
Howard
Howard

Reputation: 1503

How can I build a collapsible bootstrap panel in XPages with a repeat

I am trying to build a repeat that will have collapsible bootstrap panels. The link to expand or collapse does nothing even though the generated html looks fine. It all works with plain html but seems to have an issue with the id in the anchor link? Any ideas?

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:repeat
    id="accordion"
    rows="30"
    styleClass="panel-group"
    style="width:700px"
    indexVar="ind"
    var="col">
    <xp:this.value><![CDATA[#{javascript:return ["test 1", "test 2", "test 3"];}]]></xp:this.value>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <xp:panel tagName="a">
                    <xp:this.attrs>
                        <xp:attr
                            name="data-toggle"
                            value="collapse">
                        </xp:attr>
                        <xp:attr name="href">
                            <xp:this.value><![CDATA[#{javascript:return "#" + getClientId("collapsePanel");}]]></xp:this.value>
                        </xp:attr>
                    </xp:this.attrs>
                    <xp:label id="label1">
                        <xp:this.value><![CDATA[#{javascript:return col + "panel";}]]></xp:this.value>
                    </xp:label>
                </xp:panel>
            </h4>
        </div>
        <xp:panel id="collapsePanel" styleClass="panel-collapse collapse in">

                <div class="panel-body">
                    <xp:text
                        escape="true"
                        id="computedField1"
                        value="#{javascript:return col;}">
                    </xp:text>
                </div>
                <div class="panel-footer">Panel Footer</div>
        </xp:panel>
    </div>
</xp:repeat>
</xp:view>

Upvotes: 0

Views: 481

Answers (2)

Howard
Howard

Reputation: 1503

Here is the trick, instead of using a panel and the getClientId, I used a div and computed the id using the index var. thanks Paul Withers!

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:repeat
    id="accordion"
    rows="30"
    styleClass="panel-group"
    style="width:700px"
    indexVar="ind"
    var="col">
    <xp:this.value><![CDATA[#{javascript:return ["test 1", "test 2", "test 3"];}]]></xp:this.value>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <xp:panel tagName="a">
                    <xp:this.attrs>
                        <xp:attr
                            name="data-toggle"
                            value="collapse">
                        </xp:attr>
                        <xp:attr name="href">
                            <xp:this.value><![CDATA[#{javascript:return "#" + "test" + ind;}]]></xp:this.value>
                        </xp:attr>
                    </xp:this.attrs>
                    <xp:label id="label1">
                        <xp:this.value><![CDATA[#{javascript:return col + "panel";}]]></xp:this.value>
                    </xp:label>
                </xp:panel>
            </h4>
        </div>
        <div id="test#{ind}" class="panel-collapse collapse">

                <div class="panel-body">
                    <xp:text
                        escape="true"
                        id="computedField1"
                        value="#{javascript:return col;}">
                    </xp:text>
                </div>
                <div class="panel-footer">Panel Footer</div>
        </div>
    </div>
</xp:repeat>
</xp:view>

Upvotes: 2

Patrick Sawyer
Patrick Sawyer

Reputation: 1382

Is there a reason you need to use an xpages panel? Could you try getting away from the xpages panels and use a bootstrap panel? This is what I have been using.

Create a new style sheet with the following collapse.css

.panel-heading a:after {
font-family:'Glyphicons Halflings';
content:"\e114";
float: right;
color: grey;
}
.panel-heading a.collapsed:after {
content:"\e080";
}

This is the code

<div class="panel panel-default" id="panel2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-target="#collapseTwo"
                    href="#collapseTwo" class="collapsed">
                    label
                </a>
            </h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
</div>
        </div>
    </div>

Upvotes: 0

Related Questions