The XPages Blog

Here's a technique that you might find handy to help you customise your XPages view. 

View Panels are great though they can be inflexible. I prefer using Data Tables or Repeats when I want to do some fancy stuff, stuff that's not always easy to do on a View Panel. But if you don't want to go down the Data Table or Repeat route just yet this tip will help you get more out of a View Panel.

• Take any View Panel and insert or append a column; 
• Next switch to the Source pane and for this new column add in a blank value for this column - a column need a value in order for it to work at runtime; 
• Next, add in a control between the viewColumn tags;
• Configure the control to what is desired, and you're done.

 This snippet of a view panel contains a customised column, and in the following example I've added a link control. I'm using the link control here as I want to use the 'target' property which isn't available to me when the column is set to display as a link.  

<xp:viewPanel rows="30" id="viewPanel1">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager1">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="v01" viewName="v01"></xp:dominoView>
</xp:this.data>
<xp:viewColumn columnName="subject" id="viewColumn1">
<xp:viewColumnHeader value="subject" id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="category" id="viewColumn2">
<xp:viewColumnHeader value="category" id="viewColumnHeader2">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="viewColumn3" value="">
<xp:this.facets>
<xp:viewColumnHeader xp:key="header" id="viewColumnHeader3"
value="a link with a Target property">
</xp:viewColumnHeader>
</xp:this.facets>
<xp:link escape="true" text="Lotus" id="link1" value="http://www.lotus.com"
target="_blank">
<xp:image id="image1" url="/EmoticonBigSmile00.gif"></xp:image>
</xp:link>
</xp:viewColumn>
</xp:viewPanel>

So what do you do if you want to work with the data in the row?

First thing you do here is add a var to the viewPanel. This will become your data collection reference and you'd used this to configure control in very much the same way as you would on a Data Table or a Repeat.

<xp:viewPanel rows="30" id="viewPanel1" var="vp1">
...

<xp:viewColumn id="viewColumn5" value="">
<xp:this.facets>
<xp:viewColumnHeader xp:key="header" id="viewColumnHeader5"
value="Subject">
</xp:viewColumnHeader>
</xp:this.facets>
<xp:link escape="true" text="#{javascript:vp1.getColumnValue('subject')}"
id="link3">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<xp:openPage name="/readerPage.xsp" target="openDocument"
documentId="#{javascript:vp1.getNoteID()}">
</xp:openPage>
</xp:this.action>
</xp:eventHandler>
</xp:link>
</xp:viewColumn>

</xp:viewPanel>

 The above example is very useful for when you want to open a document in an alternative XPage other than the XPage that is set to open by the View Panel.

Going another step further, how about adding a rich text control to the view panel column and displaying a rich text field from that document?

Well here's one way. As with the above, add a Panel to view column and set the document data source of this panel to the form that contains the rich text item you need. Then use the row id as the document id of the document the data source is to use. Next add a Rich Text control to the panel and bind it to the rich text field from the form.

The view panel column source might look like this...

 

<xp:viewColumn id="viewColumn4" value="">

<xp:this.facets>

<xp:viewColumnHeader xp:key="header" id="viewColumnHeader4">

</xp:viewColumnHeader>

</xp:this.facets>

<xp:panel>

<xp:this.data>

<xp:dominoDocument var="document1" formName="xspCountryCity"

action="openDocument" documentId="#{javascript:vp01.getNoteID()}">

</xp:dominoDocument>

</xp:this.data>

<xp:inputRichText id="inputRichText1" value="#{document1.CityFacts}"

readonly="true">

</xp:inputRichText>

</xp:panel>

</xp:viewColumn>

 

And at runtime, it might look like this...

Hope this helps.

p.