Instantly share code, notes, and snippets.

Embed
What would you like to do?
custom control for a generic View via Bootstrap table
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xp:panel id="pnlContainer"
style="#{javascript:compositeData.panelStyle}">
<div class="row">
<div class="col-md-6">
<xp:panel
tagName="#{javascript:compositeData.headerSize}" id="pnlSubHead">
<xp:text escape="true"
value="#{javascript:compositeData.header}" />
</xp:panel>
</div>
<div class="col-md-6">
<xp:pager layout="Previous Group Next"
partialRefresh="true" id="pgrTop" for="rptObjects"
styleClass="pull-right"
rendered="${javascript:compositeData.pagerTop}" />
</div>
</div><!-- /.row -->
<xp:panel id="pnlTableContainer">
<table class="table">
<thead>
<tr>
<th>
<xp:span
rendered="#{javascript:compositeData.iconDisplay}">
&#160;&#160;&#160;&#160;&#160;&#160;
</xp:span>
<xp:text escape="true"
value="#{javascript:compositeData.linkHeader}" />
</th>
<xp:repeat id="repeatTableHead" rows="30"
var="objTableHead" indexVar="idx"
value="#{javascript:compositeData.cols}">
<th>
<xp:text escape="true"
id="computedField4">
<xp:this.value><![CDATA[#{javascript:objTableHead["colName"]}]]></xp:this.value>
</xp:text>
</th>
</xp:repeat>
</tr>
</thead>
<tbody>
<xp:panel disableOutputTag="true">
<xp:this.rendered><![CDATA[#{javascript:if (compositeData.collection == null){
return true;
}
else if (compositeData.collection.size()> 0){
return false;
}
else{
return true;
}}]]></xp:this.rendered>
<tr>
<td colspan="3">
<xp:text escape="true"
value="no message found" />
</td>
</tr>
</xp:panel>
<xp:repeat id="rptObjects" var="obj" indexVar="idx"
value="#{javascript:compositeData.collection}"
rows="#{javascript:compositeData.rows}">
<tr>
<xp:panel tagName="td"
styleClass="${javascript:compositeData.LinkColumnWidth}">
<xp:span
rendered="#{javascript:compositeData.iconDisplay}">
<xp:text escape="false">
<xp:this.value><![CDATA[#{javascript:return "<i class='" + compositeData.icon + "' aria-hidden='true'></i>";}]]></xp:this.value>
</xp:text>
&#160;&#160;
</xp:span>
<xp:link escape="true">
<xp:this.text><![CDATA[#{javascript:var lbl = compositeData.linkName;
obj[lbl]}]]></xp:this.text>
<xp:this.value><![CDATA[#{javascript:var key = compositeData.linkKey;
return compositeData.pageLink + "?" +compositeData.linkParam + "=" + obj[key]}]]></xp:this.value>
</xp:link>
</xp:panel>
<xp:repeat id="repeatCols" rows="30"
var="objTableHead" indexVar="idx"
value="#{javascript:compositeData.cols}">
<xp:panel tagName="td">
<xp:this.styleClass><![CDATA[#{javascript:var width = objTableHead["colWidth"];
return width;}]]></xp:this.styleClass>
<xp:text escape="true"
id="typeText">
<xp:this.value><![CDATA[#{javascript:var field = objTableHead["colValue"];
obj[field]}]]></xp:this.value>
<xp:this.rendered><![CDATA[#{javascript:var type = objTableHead["colType"];
if (type != "text"){
return false;
}
else{
return true;
}}]]></xp:this.rendered>
</xp:text>
<xp:text escape="true"
id="typeDate">
<xp:this.value><![CDATA[#{javascript:var field = objTableHead["colValue"];
obj[field]}]]></xp:this.value>
<xp:this.converter>
<xp:convertDateTime
pattern="yyyy-MM-dd hh:mm">
</xp:convertDateTime>
</xp:this.converter>
<xp:this.rendered><![CDATA[#{javascript:var type = objTableHead["colType"];
if (type != "date"){
return false;
}
else{
return true;
}}]]></xp:this.rendered>
</xp:text>
</xp:panel>
</xp:repeat>
</tr>
</xp:repeat>
</tbody>
</table>
<div class="row">
<div class="col-md-8">
<xe:pagerSizes id="pgrSizes" for="rptObjects"
partialRefresh="false"
rendered="${javascript:compositeData.pagerSizer}" />
</div>
<div class="col-md-4">
<xp:pager layout="Previous Group Next"
partialRefresh="true" id="pgrBottom" for="rptObjects"
styleClass="pull-right"
rendered="${javascript:compositeData.pagerBottom}" />
</div>
</div>
</xp:panel>
</xp:panel>
</xp:view>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment