Domino Keyword Lookups, jQuery & JSON
In Domino 8 it became possible to return a view in JSON format using &outputformat=JSON querystring parameter.
Here’s a simple view in Notes:
Here is what the JSON looks like:
{
“@timestamp”: “20090303T123231,91Z”,
“@toplevelentries”: “3″,
“viewentry”: [
{
"@position": "1",
"@noteid": "8000000C",
"@children": "4",
"@descendants": "4",
"@siblings": "3",
"entrydata": [
{
"@columnnumber": "0",
"@name": "Index",
"@category": "true",
"text": {
"0": "Option A"
}
}
]
},
{
“@position”: “1.1″,
“@unid”: “84FE562575501BE88025755F0031E1B1″,
“@noteid”: “8F6″,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice A1"
}
]
}
}
]
},
{
“@position”: “1.2″,
“@unid”: “84FE562575501BE88025755F0031E1B1″,
“@noteid”: “8F6″,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice A2"
}
]
}
}
]
},
{
“@position”: “1.3″,
“@unid”: “84FE562575501BE88025755F0031E1B1″,
“@noteid”: “8F6″,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice A3"
}
]
}
}
]
},
{
“@position”: “1.4″,
“@unid”: “84FE562575501BE88025755F0031E1B1″,
“@noteid”: “8F6″,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice A4"
}
]
}
}
]
},
{
“@position”: “2″,
“@noteid”: “80000010″,
“@children”: “4″,
“@descendants”: “4″,
“@siblings”: “3″,
“entrydata”: [
{
"@columnnumber": "0",
"@name": "Index",
"@category": "true",
"text": {
"0": "Option B"
}
}
]
},
{
“@position”: “2.1″,
“@unid”: “866C6FA4AEA492158025755F00328A60″,
“@noteid”: “8FA”,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice B1"
}
]
}
}
]
},
{
“@position”: “2.2″,
“@unid”: “866C6FA4AEA492158025755F00328A60″,
“@noteid”: “8FA”,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice B2"
}
]
}
}
]
},
{
“@position”: “2.3″,
“@unid”: “866C6FA4AEA492158025755F00328A60″,
“@noteid”: “8FA”,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice B3"
}
]
}
}
]
},
{
“@position”: “2.4″,
“@unid”: “866C6FA4AEA492158025755F00328A60″,
“@noteid”: “8FA”,
“@siblings”: “4″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"textlist": {
"text": [
{
"0": "Choice B4"
}
]
}
}
]
},
{
“@position”: “3″,
“@noteid”: “80000014″,
“@children”: “1″,
“@descendants”: “1″,
“@siblings”: “3″,
“entrydata”: [
{
"@columnnumber": "0",
"@name": "Index",
"@category": "true",
"text": {
"0": "Option C"
}
}
]
},
{
“@position”: “3.1″,
“@unid”: “B6C86E0C587E08CB802575620031CA0F”,
“@noteid”: “8FE”,
“@siblings”: “1″,
“entrydata”: [
{
"@columnnumber": "1",
"@name": "Choice",
"text": {
"0": "Choice C1"
}
}
]
}
]
}
Using jQuery and its incumbent JSON AJAX methods we can return data from the view and process it.
Below is a simple form which has 2 select option drop downs on it:
When the User chooses an Option from the ‘Option’ drop down, a set of choices specific to the selected option need to be offered in the ‘Choice’ field.
Here is the code from the JSHeader
function Option_changed()
{
//URL to the view with the restricttocategory set to the selected choice
var url = dbpath + ‘/keywords?readviewentries&outputformat=json&restricttocategory=’ + $(‘#Option option:selected’).text()
//Select object
select = $(‘#Choice’)
//Default option
options = ‘<option value=”">– Please select –</option>’
//jQuery AJAX call to return JSON
$.getJSON(url,function(data) {
//Check if we have any rows
if(data.viewentry){
//Loop through the rows
$.each(data.viewentry, function(i, item){
$.each(item.entrydata, function(i, item){
//If the column contains multi-value
if(item.textlist){
//Loop through the multi-value column data
$.each(item.textlist, function(i, item){
//Loop through the text values
$.each(item, function(i, item){
options += ‘<option>’ + item[0] + ‘</option>’
})
})
} else {
//No multi-value so just grab the text
$.each(item.text, function(i, item){
options += ‘<option>’ + item + ‘</option>’
})
}
})
})
//Loop through the columns
select.html(options)
}
})
//
$(‘#Choice’).html(options)
}
You can download a copy of the Demo database here.
admin :: Mar.03.2009 :: Uncategorized :: No Comments »
Leave a Reply
You must be logged in to post a comment.
