EXTJS in XPages #14 – Grid editing and saving data via REST CRUD

In this article I will demonstrate the ability to edit data within and EXTJS grid and have the changes saved directly to the domino database via the same REST service from whence they came.

I have to say a big thank you to Steve Zavocki who actually found my old failed attempt to make this work in my demo database. It was unblogged because I couldn’t get it to work – well that was in April, he asked some questions about it and I came back to it and with another 4 months of EXTJS experience under my belt I figured it out in no time. Without the prompting it might have sat there for another 4 months untouched.

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

Demonstration
The EXTJS in XPages demonstration database can be found at http://demo.xomino.com/xomino/Extjs.nsf/xRESTCRUD.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
This is really where everything starts to come together and we begin to be able to create functionality customers have always been asking for. Being able to update the data in a view without having to:

  • go to the view
  • go into a document
  • edit it
  • change it
  • save it
  • go back to the view

The Row Editor plugin
The row editor plugin is very easy to add to your grid – you create the variable for the rowEditor (taken from the website example)

 var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
 listeners: {
	cancelEdit: function(rowEditing, context) {
	// Canceling editing of a locally added, unsaved record: remove it
	 if (context.record.phantom) {
		store.remove(context.record);
	 }
	}
 }
 });

and you add it to the grid in the same way as other plugins

	var grid = Ext.create('Ext.grid.Panel', {
	renderTo: 'gridHere',
	plugins: [rowEditing], // <----------
	height: 400,
	frame: true,
	etc.....

and as simple as that you can now double click on a grid and edit the columns!

rc1

Making it communicate with the REST service

In this example I am using a store with a proxy type of REST. The EXTJS grid already understands this is a REST service and does most of the heavy lifting by itself. For more information on how a REST service works in Domino then check out Chris Toohey’s article 

There is also more documentation on the XPages REST here http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-93YBTB

var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        model: 'Person',
        proxy: {
    		pageParam: 'p', // <---important to add
            type: 'rest',      // <---- type of proxy is REST
            url: 'xRestService.xsp/byFirstNameFlat2',
            reader: {
                type: 'json',
                root: 'data'
            },
            writer: {
                type: 'json'  // <- data is written back in JSON format
            }
        }
    });

As you can see it also defines the write format back to the REST service. When you click on the UPDATE button on the row editor a URL is generated and data is sent. It does this via a “PUT” request which only sends a small amount of data to the server.

rc2

Enabling a PUT request

By default PUT is not enabled on a Domino server and you can enable it by turning on domino data services on the server or by adding it to the allowed HTTP methods on the web site document in the Address Book

For more information on that check out this blog article by Michael Brownlee

Domino REST service

The REST service URL which generates the data looks like this

http://demo.xomino.com/xomino/Extjs.nsf/xRestService.xsp/byFirstNameFlat2?_dc=1375392340494&p=1&start=0&limit=25

The REST service POST look like this

http://demo.xomino.com/xomino/Extjs.nsf/xRestService.xsp/byFirstNameFlat2/66F3A5FE2B2A38CC85257B1B00254E6D?_dc=1375392353545

As you can see the UNID has been added to the URL after the byFirstNameFlat2/
The _dc= is a random number generated by the grid

It is important to note that the grid automatically adds a “page=1” parameter to the REST service call and for some reason I cannot fathom this makes the REST service fail!

byFirstNameFlat2?_dc=1375392340494&page=1&start=0&limit=25 —-> FAIL

so I added the pageParam to the store proxy config and told it to use “p” instead – “p=1” apparently means nothing to a REST service and we all carry on happily….

and the UNID comes from where exactly?

So the other thing the grid does is by default it assumes that you want to send back the “id” field to the REST service and appends the “id” field onto the end of it

byFirstNameFlat2

becomes

byFirstNameFlat2/66F3A5FE2B2A38CC85257B1B00254E6D

To do this I added the UNID as a field in the REST service and added that as a hidden column in the grid.

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: ['firstname', 'lastname', 'address', 'city', 'state', 'id']
});

 

        columns: [{
            header: 'id',
            sortable: true,
            dataIndex: 'id',
            hidden: true
        }, {

“id” is not the only field name which can be used as there is another proxy parameter called “idParam” similar to the pageParam which will allow you to name the “unid” field however you like – but the grid must know which field in the grid is the UNID and which it should throw back at the REST service

And that is pretty much it – you can download the sample database and take a look at the code for yourself.

If you want to get really fancy (and we will in the next blog article) you can also edit numbers/date fields and add validation as well to ensure that your users and not submitting rubbish back to the REST.

If you want to be uber secure as well there is always the querySaveDocument event on the REST service which you could also use to validate the incoming data.

rc3

Conclusion

In this article we have seen how we can easily edit data directly in the data grid and from that we can update our domino data with a tiny http post back to the server. This is good for your network traffic and fantastic for your user experience.

No XPage controls were harmed in the creation of this demonstration

One thought on “EXTJS in XPages #14 – Grid editing and saving data via REST CRUD

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s