The XPages Blog

Someone ask me a while back about inline editing in XPages. At the time I said I wasn't sure and I thought it wasn't possible yet. However, more often than not there's more than one way to do things in XPages so here's what I tried on a conventional XPages Data Table. 

<xp:column id="column5">

<xp:panel id="panel4">
<xp:inputText id="inputText5" rendered="#{javascript:!viewScope.editPorts}">
<xp:this.value><![CDATA[#{javascript:dt01.getColumnValue("Required Networks Ports")}]]></xp:this.value>
<xp:eventHandler event="onclick" submit="true"
refreshMode="partial" refreshId="panel4" id="eventHandler5">
<xp:this.action><![CDATA[#{javascript:viewScope.editPorts = dt01.getDocument().getUniversalID();
}]]></xp:this.action>
</xp:eventHandler>
</xp:inputText>
<xp:panel
rendered="#{javascript:dt01.getDocument().getUniversalID() == viewScope.editPorts;}"
id="panel5">
<xp:this.data>
<xp:dominoDocument var="document1" formName="form01"
action="editDocument" documentId="#{viewScope.editPorts}">
</xp:dominoDocument>
</xp:this.data>
<xp:comboBox id="comboBox1" value="#{document1.requiredNetworkPorts}">
<xp:selectItem itemLabel="None required" itemValue="None required"></xp:selectItem>
<xp:selectItem itemLabel="1" itemValue="1"></xp:selectItem>
<xp:selectItem itemLabel="2" itemValue="2"></xp:selectItem>
<xp:selectItem itemLabel="3" itemValue="3"></xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="partial" refreshId="panel4">
<xp:this.action><![CDATA[#{javascript:viewScope.remove('editPorts');
document1.save();}]]></xp:this.action>
</xp:eventHandler>
</xp:comboBox>
</xp:panel>
</xp:panel>
<xp:this.facets>
<xp:span style="font-weight:bold" xp:key="header">
Required Network
Ports:
</xp:span>
</xp:this.facets>
</xp:column>

The code snippet above is from a column on a Data Table which is iterating through a document collection from a Notes view. 

First of all there is a Panel (panel4) which is used to contain all the controls as well as be the target for partial refresh on actions. 

Next we have an edit box (inputText5). It's value is computed from the Data Table document collection data source. There is an onclick event on this control which sets a viewScope to the document id from that row of the Data Table. This event also refreshes the Panel and when the viewScope is set the editbox will no longer display (rendered="#{javascript:!viewScope.editPorts}").

When the viewScope is set, another Panel (panel5) displays. This panel contains the document data source. A combo box (comboBox1) here is bound to this document data. And when a change is made an event (onchange) gets fired which removes the viewScope, saves the document and refreshes the containing Panel (panel4).

 
In edit mode on the web browser or in the Notes Client it will look like this...

And when the change is made the Data Table will return to the original state with the document edited.

I found that this technique works well with a combo box. It works well too with other controls like radio buttons, checkboxes and listboxes.  A bit more is needed when using an editbox, in that you need to click out of the editbox to fire the onchange event. And you'll have to do more for the event for when you don't change a value, for which you might use a onblur event.

Hope you find this useful.

p.