Subscribe via FeedPaul Hannan, Oct 13, 2009 8:44:55 AM
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.
refreshMode="partial" refreshId="panel4" id="eventHandler5">
}]]>
rendered="#{javascript:dt01.getDocument().getUniversalID() == viewScope.editPorts;}"
id="panel5">
action="editDocument" documentId="#{viewScope.editPorts}">
refreshMode="partial" refreshId="panel4">
document1.save();}]]>
Required Network
Ports:
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.
6 responses to In-line Editing on a Conventional XPages Data Table
Rune Hegge, February 24, 2010 6:50 AM
Nice example, Paul! It gave me some ideas when programming this XPage In-Line editing prototype. Thought i should share some ideas back with you, so please feel free to have a look and see if it could be useful for you in any way.
Deriksims, January 3, 2010 8:54 PM
�� ��. �� ������ ����������� - ������� �� ���� ���-�� ���������� �����:
�� ������ ���� ������ "������" � "������".
Paul Hannan, October 29, 2009 7:33 AM
@Josep
The combobox in my example is bound to 'value="#{document1.requiredNetworkPorts}"' and 'document1' is declared as a data source 'xp:dominoDocument var="document1" formName="form01" ' of the panel 'panel5'.
When there's a change in the item selected this saves the document.
What problems are you seeing with your scenario?
p.
Josep Alemany, October 28, 2009 11:33 AM
Please, could you explain me better how you link the data with the combobox? I have a combo containing the units to buy...
Thanks in advance,
Best Regards
Paul Hannan, October 14, 2009 6:48 AM
Thanks for your comments Rob, and I will try to answer you questions in reverse.
"It would be useful to see the click-by-click creation of this example in Designer"
Two words - Declan Lynch's Blog, sorrry that's three ;-) Declan has put together a 50' http://www.qtzar.com/blogs/qtzar.nsf/htdocs/LearningXPages.htm
Stephan Wissel and Tim Clark also have an introduction to XPages on the Designer Wiki - http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Tutorial-intro-to-XPages.htm
And there's loads of more stuff under the Tutorial category of this fine site - http://xpagesblog.com/xpages-blog/category/tutorial
"What role does form01 play?"
In XPages Forms and Views are used as data sources. It is part of the separation UI from Data - think XPages as the front end and Views and Forms as the backend.
Int he above example I'm using a form named 'form01' as my document data source and the controls on the panel that displays when the viewScope is set are bound to this data source.
"Is this AJAX buried into the background code?"
Yes, AJAX is used in partial refresh of the panels.
"One is that the attribute "rendered" is a Boolean that determines if an element is visible or not. Is that right?"
Yes. Rendered equals visible and can be computed dynamically or on page load.
RobShaver, October 13, 2009 3:25 PM
Great example. Even though I've yet to do more than read about XPages I was able to understand it. I learned a couple of things. One is that the attribute "rendered" is a Boolean that determines if an element is visible or not. Is that right?
One question, in the code "javascript:!viewScope.editPorts", is "editPorts" a client-side JavaScript variable which will hold the UNID of the target document? Oh yeah, I think I see now. You click on panel4. The onClick event does a partial refresh of panel4 which loads editPorts with the UNID of the target doc. (I'm not sure how this happens since it requires fetching data from the server. Is this AJAX buried into the background code?) When panel4 renders the "rendered" attribute is now false. I guess panel5 gets rendered again somehow with it's "rendered" attribute set to true, so it's now showing.
<xp:dominoDocument var="document1" formName="form01" action="editDocument" documentId="#{viewScope.editPorts}">
This looks like we are editing the document with the UNID in editPorts using a "form formula" of form01. In non-XPages a form is used to control, among other things, how a document is rendered to the client. In this case I can see that the XPage is controlling the rendering of the field as a combo box. What role does form01 play?
Great post. Made me think just enough. But it's one thing to see and understand the code in this example ... quite another to create it in Designer. I'm waiting now for 8.5.1 to appear on my server, which should happen this weekend. It would be useful to see the click-by-click creation of this example in Designer.
Thanks.