Wednesday, 20 July 2016

Quick XPages Tip - XPages ViewPanel Hide Empty Start and End Rows using CSS

Last week I was faced with an annoying problem with the presentation of a simple XPages View in an iframe on an IPad. In this case I was only using a simple ViewPanel. As Application Theme I used Bootstrap 3. In the View properties I disabled the Pagers for the Header and Footer. However, when displaying the view in the browser there always were unnecessary empty leading and closing rows generated around the ViewData. So I posted a question on Stackoverflow. Below the simple code of the XPage with the ViewPanel.

Code XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel>
<xp:viewPanel id="viewPanel1" rows="5">
<xp:this.data>
<xp:dominoView var="view1" viewName="Contact"></xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="firstname" id="viewColumn1">
<xp:viewColumnHeader value="First Name" id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="lastname" id="viewColumn2">
<xp:viewColumnHeader value="Last Name" id="viewColumnHeader2">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Subject" id="viewColumn3">
<xp:viewColumnHeader value="Subject" id="viewColumnHeader3">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel></xp:panel>
</xp:view>

Displaying the XPage in the browser an empty leading and closing row were generated around the ViewData.


There is a very simple solution for this problem using a styleSheet.
First create a new stylesheet (or add the line below to an existing stylesheet) and enter the following line in the stylesheet:

table.viewClass > tbody >tr:first-child, table.viewClass > tbody > tr:last-child {display: none;}

In the All properties section of the ViewPanel add the CSS class (viewClass) in the viewStyleClass (last one of the Styling Section).


Add the styleSheet to the Custom Control or XPages and the empty leading en ending row will now be 'hidden'.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
</xp:this.data>
<xp:this.resources>
<xp:styleSheet href="/viewheaderfooter.css"></xp:styleSheet>
</xp:this.resources>
<xp:panel>
<xp:viewPanel id="viewPanel1" rows="5" viewStyleClass="viewClass">
<xp:this.data>
<xp:dominoView var="view1" viewName="Contact"></xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="firstname" id="viewColumn1">
<xp:viewColumnHeader value="First Name" id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="lastname" id="viewColumn2">
<xp:viewColumnHeader value="Last Name" id="viewColumnHeader2">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Subject" id="viewColumn3">
<xp:viewColumnHeader value="Subject" id="viewColumnHeader3">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
</xp:panel>
</xp:view>

The final result in the browser.


There are other solutions like using a theme but for me this solution works great because I always use styleSheets in my XPages Applications. Thanks to Renaud ThiĆ©vent for the CSS solution.

No comments:

Post a Comment