In this article I will demonstrate how we can use the same REST service we used to populate our grid, to accept an update to one of the row values.

EXTJS in XPages series
Here are links to all of the previous articles in this series

• EXTJS in XPages #16 – Right Click Context Menus
• EXTJS in XPages #15 – Multi-select of documents
• EXTJS in XPages #14 – Grid editing and saving data via REST CRUD
• EXTJS in XPages #13: Totaling your columns with a groupingSummary
• EXTJS in XPages #12 – Counting categories with Grouped columns
• EXTJS in XPages #11 – Grids with Locked Column(s)
• EXTJS in XPages #10 – Grid Row Expander plugin
• EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer
• EXTJS in XPages #8 – Selecting data from the grid and opening a document
• EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent in the grid
• EXTJS in XPages #6 – remote sorting using the REST service
• EXTJS in XPages #5 – Infinite scroller
  
• EXTJS in XPages #4 – Adding a Pager
• EXTJS in XPages #3 – Creating a basic grid from a Custom Control
• EXTJS in XPages #2 – Basic Grid capabilities
• EXTJS in XPages #1 – Starting from scratch (the first grid)

Demonstration
The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xContextMenuRESTUpdate.xsp

Download
The sample database that will accompany this series is available from the menu in the live demo database from this link – http://demo.xomino.com/xomino/Extjs.nsf

Introduction

In the last article we saw how we can easily create a context menu and in this article we are going to add the icing on the user experience – updating the data on the server via a REST service. Once again in this incremental series, this is a small mount of additional effort to effect a large benefit for the end user experience.

How does that work?

In the XPages world we are able to update a document via a REST service using the URL format:

• /path/database.nsf/rest.xsp/restPathInfo/UNID

To that URL we have to post (or in this case PUT) a JSON string in the format {“field”: “value”, “field2”: “value2”}

To achieve this we have to “handle” the context menu in the following manner:

var approveAction = Ext.create('Ext.Action', {
    icon   : 'images/add.png',  // Use a URL in the icon config
    text: 'Approve Users',
    disabled: false,
    handler: function(widget, event) {
        var selection = Ext.getCmp('myPanel').getSelectionModel().getSelection()[0];
        buildSubmit.updateREST(selection, "Approved")

    }
})

In this handler we get the selected document, and pass that “selection” and the status value to be updated to the buildSubmit.updateREST function.

Within the function we:

• Build the JSON data string
  • {‘unid’: selection.data[“@unid”], ‘status’: status}
  • The @UNID is pulled from the REST service property of this document
  • The status is passed into the function “Approved”
• Pass the string array to the updateStatus function which in turn
  • Creates an AJAX “PUT” request to the REST service
    • xRestService.xsp/byFirstNameFlat/’+data.unid
  • If this successfully updates we then update the row field value with the “Approved value”

var buildSubmit = {

	updateREST: function(selection, status){
		var data = {'unid': selection.data["@unid"],
					'status': status}
		buildSubmit.updateStatus(selection, data)
	},
	updateStatus: function(selection, data) {
		  $.ajax({
			   type: 'PUT',
			   contentType: 'application/json',
			   url: 'xRestService.xsp/byFirstNameFlat/'+data.unid,
			   dataType: "json",
			   data: JSON.stringify(data),
			   success: function(response, textStatus, jqXHR){
				  //update the cell in the grid
				  selection.set("status",data.status);
				},
				error: function(jqXHR, textStatus, errorThrown){
					   console.log('sort order error: ' + textStatus);
				}
		  	});
	}
}

When the data is successfully updated in the grid the EXTJS code automatically adds a marker which indicates that the contents of this field have been changed

Looking at this through Firebug

As we can see from the image below – the “PUT” request is sent to the URL
http://copper.xomino.com/xomino/Extjs.nsf/xRestService.xsp/byFirstNameFlat/B73326B7CDBEFAD385257B1B00254C58
and the JSON is successfully sent to the REST service.

 

Conclusion

There are a few of things to think about in this example:

1. Once again a few simple lines of code provides a huge benefit to the user.
   1. Being able to update data directly from the grid means they can get their job done faster
   2. Being able to update via a right click action menu means they can get their job done faster
2. Being able to update the grid field values programmatically means we do not have to reload the grid data
   1. If this is the only point you take away form the this article this is the most important.
   2. Reloading grid data has a cost, in data consumption on the server, time expended to download, time to redraw and most importantly time wasted for the user getting a confirmation that their data was updated. If you have a large number of data rows and the update is in the order of seconds then the user has to wait. Updating a single field of data is instantaneous and the user experience gratification is immediately satisfied.
   3. If you are updating data within the grid itself – DO NOT reload the grid data from the server – EVER – plan your user experience better !
3. Using the jsonviewservice out of the box EXTLib REST service allows me to make field updates to the database with a tint data footprint.
4. I cannot understate how awesome #3 is !