Getting data using the outputformat=JSON parameter

[Fredric Berling]

I have been testing getting grid data using Dominos new parameter for JSON. Its quite nice and suits well for lots of things. especially small amounts of documents or responses in "embedded view" type fashoin.

You will reqognice most of the code from a previous post about jsonreader but here we go.

NOTE!! outputformat=JSON is only available in Domino 7.02 and above. but then..Who wouldnt upgrade to at least 7.02 anyway..right?!!

NOTE 2!! outputformat=JSON can be combined with the usual parameters fro readviewentries


Simple form with Ext initializing in HTMLHead and some passthrue HTML in body. nothing else

<div style="margin-left:100px;margin-top:50px">
   <div id="file-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 400px; height: 300px;"></div>
</div> 

Create a View named "testjson" with a single column populated with a text describing the document.

Here is the code from the forms onLoad event

// JavaScript Document
var jsonReader;
var myDataStore;

Ext.onReady(function()
{
    jsonReader = new Ext.data.JsonReader({
           root: 'viewentry',
           totalProperty: '@toplevelentries',
           id: 'id',
           fields: [{name:'@position', type:'int'},{name:'unid', mapping:'@unid'},{name: 'description', mapping: 'entrydata[0].text[0]'}]
    });
                
    myDataStore = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'testjson?ReadViewEntries&outputformat=JSON',
            method: 'POST'
        }),
        reader: jsonReader,
      autoLoad: true,
        remoteSort: false
    });
    
    function renderTitle(value, p, record) {
          return String.format('<a href="#" onClick="javascript:AddProperty({1})">{0}</a>',
          value, record.data.unid);
     }
    function renderBold(value) {
        return '<B>'+ value + '</B>';
     }
    
    var colModel = new Ext.grid.ColumnModel( [
             {header: "id", width: 100, sortable:'true', resizable: false, renderer:renderBold,dataIndex: '@position'},
          {header: "name", width: 220, resizable: false, dataIndex: 'unid'},
          {header: "Descripion", width: 220, resizable: false, renderer:renderTitle, dataIndex: 'description'}
    ]);

         
    var grid = new Ext.grid.GridPanel({
        renderTo:'file-grid',
        store:myDataStore,
        colModel:colModel,
        viewConfig: {
            forceFit: true
        },
        sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
            width:600,
            height:300,
            frame:true,
            title:'Test',
            iconCls:'icon-grid'
        });
                
    grid.render();
    grid.on('rowdblclick', function(){
        var selection = grid.getSelectionModel().getSelected();
        alert(selection.data.description);     
    });
}) 

Personally i find the renderer stuff especially awesome, and that you have the complete record in the "record" variable. And also later in the "selection" variable gotten from "grid.getSelectionModel().getSelected();" .. SO USEFUL!!

The "mapping" config in the jsonreader field section are very useful for extracting the correct column from the entrydata array, but still be able to use a readable variable name for the column.

Its possible this way is faster compared to getting the data using an agent and when it comes to encoding and strange character sets i beleive we can run into trouble by forcing the charset like we do in the agent variant. The outputformat=JSON has all possibilities to deal with this in the appropriate way since its built in.

I hope more Ext newbies find this example valuable.

[RWaters]

Nice Example Fredric, thanks! We would personally love to switch Ext.nd over to JSON but we want to maintain support for those who are stuck in companies that can't/wont upgrade.

Just wanted to mention that we've been continuing work on the new version and have the ability for developers to provide custom renderers as well now. Previously we had been putting everything through the single 'dominoRenderer' that we wrote and you had to hack that one up to make any changes.

[Fredric Berling]

Nice to know you are also thinking JSON when it comes to Ext.nd. Cant help but wondering how many companies that are ready to put effort into making Web 2.0 applications out of their databases but NOT willing to upgrade to 7.02.

But its just me thinking again...

[daddyschmack]

I have tried to mock this model exactly, but I keep getting an error, H is null.

Should this work with ext 2.2 and notes 8. (local preview)

I'm trying to figure out how to make this data store with with json so I can create a new way to populate an ajax combo box. If you use readviewentries, one should be able to get around the "weird" sorting currently seen when using the viewEntryCollection and documentcollection classes.

Here is the error from firebug..

H is null
initComponent()(null, null)ext-all.js (line 76)
GridView()(null, null)ext-all.js (line 143)
Action()("file-grid", undefined)ext-all.js (line 58)
ContainerLayout()()ext-all.js (line 64)
Action()(Object renderTo=file-grid store=Object colModel=Object)ext-all.js (line 58)
getViewWidth()()ext-base.js (line 9)
getViewWidth()()ext-base.js (line 9)
getViewWidth()()ext-base.js (line 9)
getViewWidth()()ext-base.js (line 9)
(?)()JsonView...?OpenForm (line 101)
getViewWidth()()ext-base.js (line 9)
getViewWidth()(0, undefined, undefined, undefined)ext-base.js (line 9)
camelFn()(renderTitle(value, p, record), undefined, Object)ext-all.js (line 13)
onload()JsonView...?OpenForm (line 11)

[IMG]chrome://firebug/content/blank.gif[/IMG]Ext.Panel=Ext.extend(Ext.Container,{base...utoLoad})}});Ext.reg("panel",Ext.Panel);

Thanks,

John

[mdm-adph]

Nice to know you are also thinking JSON when it comes to Ext.nd. Cant help but wondering how many companies that are ready to put effort into making Web 2.0 applications out of their databases but NOT willing to upgrade to 7.02.

But its just me thinking again...

Sometimes when you have tens of thousands of users to support, and hundreds of old legacy applications, it can take years to upgrade even to the next minor version. Just the way it is.

However, keep up the work working with Domino's JSON output! It's actually faster than getting the information via XML -- I can't remember where I found, but there's an examination that someone did out there on the interwebs where they extensively tested the speed at which view queries were returned from the Domino server in both XML and JSON formats, and JSON consistently won.

I use it for all my apps, though I leave an easy way to fallback to XML if necessary by just having an alternate Ext.Reader handy.

[roudoudou]

I have tried to mock this model exactly, but I keep getting an error, H is null.

Should this work with ext 2.2 and notes 8. (local preview)

I'm trying to figure out how to make this data store with with json so I can create a new way to populate an ajax combo box. If you use readviewentries, one should be able to get around the "weird" sorting currently seen when using the viewEntryCollection and documentcollection classes.

Here is the error from firebug..

H is null
initComponent()(null, null)ext-all.js (line 76)
GridView()(null, null)ext-all.js (line 143)
Action()("file-grid", undefined)ext-all.js (line 58)
ContainerLayout()()ext-all.js (line 64)
Action()(Object renderTo=file-grid store=Object colModel=Object)ext-all.js (line 58)
getViewWidth()()ext-base.js (line 9)
getViewWidth()()ext-base.js (line 9)
getViewWidth()()ext-base.js (line 9)
getViewWidth()()ext-base.js (line 9)
(?)()JsonView...?OpenForm (line 101)
getViewWidth()()ext-base.js (line 9)
getViewWidth()(0, undefined, undefined, undefined)ext-base.js (line 9)
camelFn()(renderTitle(value, p, record), undefined, Object)ext-all.js (line 13)
onload()JsonView...?OpenForm (line 11)

[IMG]chrome://firebug/content/blank.gif[/IMG]Ext.Panel=Ext.extend(Ext.Container,{base...utoLoad})}});Ext.reg("panel",Ext.Panel);

Thanks,

John

Hello
I had the same problam as you with Domino 8 + ext 2.2.
I chaged the html code as bellow :

<div id="file-grid"></div>

And now the error message disapears.

[DServe]

Thank you Fredric, very useful this example!

I'm currently working on this subject and try to integrate Domino's native paging system.
For this I set

paramNames:{start: 'start', limit: 'count' } 

property of PagingToolbar, and it works like a charm. Except...

In Domino the URL below returns only the @toplevelentries property :

http://server/path/db.nsf/view?readviewentries&outputformat=json&preformat&start=0&count=25 

So I have to set the start parameter to 1, but the PagingToolbar component has no parameter allowing me to set the start index (the first page 'first' and 'previous' buttons are active, and the count is 'Documents 2 to 26 on 150' instead of 'Documents 1 to 25 on 150').

I think I'll have to derive my own PagingToolbar but if anyone as a simple trick....

[Bob Wilson]

Hi all,

Since Ext 4.1 remapped most of the grid configs, I wonder if there is somewhere a working example of how to deal with "Domino views + readviewentries + ext grid".

I have (over) looked at the forums, but we can only find old versions of components that uses deprecated methods.

Is there an updated version of "domino view to grid component" ?

Regards.

[Bob Wilson]

I've tried to apply the same principle with Ext 4.1 objects, but I can't even load the store.

Here is a very simple example (not working) :

jsonReader = Ext.create('Ext.data.reader.Json', { 
   id: 'id',
   root: 'viewentry', 
   totalProperty: '@toplevelentries', 
   fields:
   [
            {name:'position',        mapping: '@position'},
            {name:'unid',             mapping:'@unid'},
            {name:'description',      mapping: 'entrydata[0].text[0]'}
   ] 
}); 
                 
myDataStore = Ext.create('Ext.data.Store', { 
   proxy: {
      type: 'ajax',
      url: '../lookupResourcesByName?ReadViewEntries&outputformat=JSON',
      reader: jsonReader
   },

   fields: ['position', 'unid', 'description'],
   autoLoad: true
});


console.log(myDataStore);

This code returns an empty store in the console log.
Using chrome Network tracking, I can see that the server response is like this :

{
"@timestamp": "20120621T094711,17Z",
"@toplevelentries": "4"
}

I must miss something obvious, because when I'm using the exact same URL in the browser, I get this :

{
    "@timestamp": "20120621T094922,72Z",
    "@toplevelentries": "4",
    "viewentry": [
    {
        "@position": "1",
        "@unid": "A30CE56AF0D8C53144257A11004ECFC0",
        "@noteid": "1B66",
        "@siblings": "4",
        "entrydata": [
        {
            "@columnnumber": "0",
            "@name": "name",
            "text": {
                "0": "Resource A"
            }
        }
        ]
    },
    {
        "@position": "2",
        "@unid": "5561A36406F4477244257A11004F8596",
        "@noteid": "1B6A",
        "@siblings": "4",
        "entrydata": [
        {
            "@columnnumber": "0",
            "@name": "name",
            "text": {
                "0": "Resource B"
            }
        }
        ]
    },
    {
        "@position": "3",
        "@unid": "D6BA9D1324F1909844257A1A0079671B",
        "@noteid": "1D9E",
        "@siblings": "4",
        "entrydata": [
        {
            "@columnnumber": "0",
            "@name": "name",
            "text": {
                "0": "Resource C"
            }
        }
        ]
    },
    {
        "@position": "4",
        "@unid": "6A4317E51CF4CFBB44257A1A0052E36D",
        "@noteid": "1D9A",
        "@siblings": "4",
        "entrydata": [
        {
            "@columnnumber": "0",
            "@name": "name",
            "text": {
                "0": "Resource D"
            }
        }
        ]
    }
    ]
}

[daddyschmack]

Gentlemen,
I haven't tried Ext.nd since 2009. Are you guys actually making this work? That is impressive. How is the performance on the view grid when generated by an agent. I always found that to be a bit laggy.

Thanks,

John