Add a Button to a table-responsive built in SSJS

Question

I'm creating a bootstrap table responsive using a repeat control and it works fine, but now I want to add a button related to each row. I have this working if I just use a repeat control but not the table-responsive. I build the table row values with a computed field with the output as HTML and this works until I start to add the button. I can add a <button></button> to the code but when I use <xp:button></xp:button> it dos not display properly. I'm using this code to build the table rows:

rtn = "<tr><td align='center'><xp:button value='remove' id='button1' ></xp:button></td><td>" + expPayDate +"</td><td>" + actualPayDate + "</td><td align='right'>" + amount + "</td><td align='center'>" + paymentID  + "</td></tr>"

I then have a fairly extensive onClick event and also a rendered formula which becomes very cumbersome to enter into the in-line code. I have the button working when I just format it and the row data in a repeat control but from a usage point I would like to have a table-responsive. Is there a way to make this work, and a better way to build the table rows.

Answer 1

When you are a hammer everything looks like a nail! I hate it when I get locked into doing something one way (usually the hardest) and keep beating my head against the wall until exhaustion enters and then I step back and re-think the process. In any case the answer is actually pretty simple. Here is what it looks like:

Here is a short version of the 'source code' add your code where indicated:

<div class="row" style="width:600px">
        <xp:panel id="panelRepeatData">
            <xp:this.data>
                <xp:dominoView var="vwCollection">
                    **** Define your view datasource here
                                        </xp:dominoView>
            </xp:this.data>
            <div class="table-responsive">

                <table class="table  table-bordered table-condensed " style="width:550px">
                    <thead>
                        <tr style="background-color:#d9fff0">
                            <th>Remove</th>
                            <th>Est Pay Date</th>
                            <th>Actual Pay Date</th>
                            <th>Payment Amount</th>
                            <th>Payment ID</th>
                        </tr>
                    </thead>
                    <tbody>
                        <xp:repeat id="repeatData" rows="10" value="#{vwCollection}"
                            var="veData" indexVar="rIndex">
                            <div class="row"><!-- rowRepeat -->
                                <xp:text escape="false" id="tableRowstart">
                                    <xp:this.value><![CDATA[#{javascript:if (rIndex % 2){
    return "<tr style='background-color:#fofaff'><td>"
}else{
    return "<tr style='background-color:#fff19a'><td>"
}}]]></xp:this.value>
                                </xp:text>
                                <xp:button id="button1" styleClass="btn btn-sm btn-danger">
                                    <span class="glyphicon glyphicon-remove">
                                    </span>
                                    ****define your button rendering and Event handling
                                </xp:button>
                                <xp:text escape="false" id="tableRowData">
                                    <xp:this.value><![CDATA[#{javascript:
                                                            **** Define and format values for output
        return "</td><td align='center'>" + expDate + "</td><td align='center'>" + actualPayDate + "</td><td align='right'>" + amount + "</td><td>" + veData.getColumnValue("PaymentID") + "</td></tr>"
}]]>
                                    </xp:this.value>
                                </xp:text>
                            </div><!-- rowRepeat -->
                        </xp:repeat>
                    </tbody>
                </table>
            </div><!-- table-reponsive -->
        </xp:panel>
    </div>