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 !

In this article I will discuss and demonstrate how to create a context menu so that when a user right clicks on  grid they are able to take action.

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

• 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/xBufferedRendererContextMenu.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

Context menus (right click menu) are one form of user experience which “reduces clicks”. But that is a fallacy in some senses because the user is not clicking any less they are just less annoyed by the clicks 🙂

If the user is in a grid and has to select some documents, then move their mouse out of the grid and click an “Approve” button that is “one click” but “with an annoying mouse movement”. Right click – select Approve is actually two clicks…..which is more clicks but is less annoying because of little to no mouse movement.

How does that work?

In the grid we are able to create a context menu by “Creating a menu” and “adding it to the onContextMenu event of the grid view. In the example below I am creating the “approveAction”. In that action we:

• define the icon which will appear int he menu
• define the text on the menu action
• have a handler which interprets what happens when the menu action is clicked
  • In this case the action gets all the selected documents and creates a JSON string from it
  • That JSON string is then shown on the console for debugging

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();

    	var theJSON=[]
    	for ( var i = 0; i < selection.length; i++) {
    		theJSON.push({'unid': selection[i].data["@unid"],
    						'field': 'status',
    						'val': 'approved'}
    		)
    	}
    	console.dir(theJSON)
    }
})

I will get to writing about how to do the update like I promised……but suffice to say that this is posted at a customREST control which will then update the values based on the UNID.

The menu is added to the grid in the following manner. A view listener is added to the grid and in the itemcontextmenu event we detect where the event is happening and then display the menu at exactly that point (you could offset this if you wanted)

The menu is smart enough that if you do not click on the menu itself it disappears when you click away from it.

gridFunc = {
    self: this,
    grid: function(){
	  return Ext.getCmp('myPanel')
    },
    contextMenu: Ext.create('Ext.menu.Menu', {
        items: [
                approveAction,
                rejectAction
        ]
    })
}

var grid = Ext.create('Ext.grid.Panel', {
    	viewConfig: {
    		stripeRows: true,
	        listeners: {
	            itemcontextmenu: function(view, rec, node, index, e) {
	                e.stopEvent();
	                gridFunc.contextMenu.showAt(e.getXY());
	                return false;
	            }
	        }
	    },
etc

Reusing the actions

Not only can the actions be added to the context menu, but because they are created as EXT Objects they can be added to other place as well – like a toolbar

	gridDock = [{
		id: 'activeStorePaging',
	     xtype: 'toolbar',
	     dock: 'bottom',
		 items: [
		   {
		       text: 'Clear Filter Data',
		       handler: function () {
		           grid.filters.clearFilters();
		       }
		   },
		   '-',
		   approveAction,
		   '-',
		   rejectAction
	    ]
	 }]

Conclusion

As you can see with great control and little additional effort (as ever!) we are able to add more feature rich functionality to our grid