How to use the Dojo Data Grid with XML in the Notes Client

Question

My customer wants to be able to search across multiple databases and then be able to filter and sort the data. I was hoping to use the Dojo Enhanced Datagrid using an XML input. That way I could compile all the results in the backend and then present them to the Grid as a whole.

I've tried a number of examples and they all seem to work in the browser, but not in the Notes Client. Unfortunately, this is a Notes Client application.

I've been using the Texas BBQ application as a test just because all the data is included within the application. I found this on:

NotesIn9 92: Using the Dojo Enhanced Data Grid in XPages by Paul Calhoun http://www.notesin9.com/2012/12/03/notesin9-092-using-the-dojo-enhanced-data-grid-in-xpages/

I've been able to get the "Dojo Enhanced Data Grid with XML Data Source" to load the Dojo control, but I just get "Sorry, an error occurred" where the data should be.

Here's a link to the Texas BBQ from Notes in 9. http://www.nnsu.com/nnsusite.nsf/Download.xsp?documentId=5EB484B0C31CC83886257B59006DA42A&action=openDocument

If I can get this to work it will be an extremely useful tool as I have to start looking at archiving soon and will use this to consolidate my search results.

I'm using a Domino 9.0.1 FP5 server with a Notes 9.0.1 FP9 Client.

Any help would be appreciated.

Image of Notes Client results page:

Answer 1

I managed to trace the problem down to the actual calling of the dataStore. If you use the BBQ example, Paul uses a separate Xpage to form the XML input and calls it as the URL reference in his code:

var strURL = "/DanF/TexasBBQ_DGO.nsf/BBQXML_NC.xsp"
var xmlStore = new dojox.data.XmlStore({ url: strURL });

This wouldn't work inside the Notes Client!

My solution was to use an XML restService on the same page to build the input instead. This made the page more self contained and the Notes Client was able to build the page all in one go.

Here is the Xpage if my final result: (You will need to point the URL for the dataStore to your own Xpage)

<xp:this.resources>
    <xp:dojoModule name="dojox.data.XmlStore"></xp:dojoModule>

    <xp:dojoModule name="dojox.grid.EnhancedGrid"></xp:dojoModule>
    <xp:dojoModule name="dojox.grid.enhanced.plugins.DnD"></xp:dojoModule>
    <xp:dojoModule name="dojox.grid.enhanced.plugins.NestedSorting"></xp:dojoModule>
    <xp:dojoModule name="dojox.grid.enhanced.plugins.IndirectSelection"></xp:dojoModule>
    <xp:dojoModule name="dojox.grid.enhanced.plugins.Filter"></xp:dojoModule>

    <xp:styleSheet href="/.ibmxspres/dojoroot/dijit/themes/dijit.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/EnhancedGrid.css"></xp:styleSheet>
    <xp:styleSheet href="/.ibmxspres/dojoroot/dojox/grid/enhanced/resources/tundraEnhancedGrid.css"></xp:styleSheet>
</xp:this.resources>

<xe:restService id="restService1" pathInfo="xmlStore">
    <xe:this.service>
        <xe:customRestService contentType="text/xml">
            <xe:this.doGet><![CDATA[#{javascript:
// initials xmlStore
var strXmlStore:String = "";

strXmlStore = "<?xml version='1.0' ?>" ;
strXmlStore = strXmlStore + "<joints>" ;

//Get the current application
var db = database;
//Access the People View
var pview:NotesView = db.getView("joints");
//Create Variables to hold the Documents and get the first document
var doc:NotesDocument;
var ndoc:NotesDocument;
doc = pview.getFirstDocument();
var nam:NotesName;
//Create a while loop to process the document in the View
while (doc != null) {
    strXmlStore = strXmlStore + "<joint>";
    strXmlStore = strXmlStore + "<name>";
    strXmlStore = strXmlStore + doc.getItemValueString("Name");
    strXmlStore = strXmlStore + "</name>";
    strXmlStore = strXmlStore + "<city>";
    strXmlStore = strXmlStore + doc.getItemValueString("City");
    strXmlStore = strXmlStore + "</city>";
    strXmlStore = strXmlStore + "<url>";
    strXmlStore = strXmlStore + doc.getItemValueString("URL");
    strXmlStore = strXmlStore + "</url>";
    strXmlStore = strXmlStore + "<description>";
    strXmlStore = strXmlStore + doc.getItemValueString("Description");
    strXmlStore = strXmlStore + "</description>";
strXmlStore = strXmlStore + "</joint>";
//Get the next document in the view and store to the placeholder
ndoc = pview.getNextDocument(doc);
//recycle the doc object to preserve memory
doc.recycle();
//set the doc object equal to the placeholder
doc = ndoc;
}
//close the root tag
strXmlStore = strXmlStore + "</joints>";

return strXmlStore}]]></xe:this.doGet>
        </xe:customRestService>
    </xe:this.service>
</xe:restService>

<xp:panel style="text-align:center;font-family:Comic Sans MS;font-size:16pt"
    disableTheme="true">
    <xp:label
        value="Dojo Enhanced Data Grid With XML Data Source thru Rest Service"
        id="label2"></xp:label>
</xp:panel>
<xp:br />
<xp:panel id="gridNode" styleClass="DemoLeft" tagName="div"
    style="height:30em;width:42em">
</xp:panel>
<xp:eventHandler event="onClientLoad" submit="false">
    <xp:this.script><![CDATA[
var xmlStore = new dojox.data.XmlStore({ url: "Simple_XML.xsp/xmlStore" });
var grid = null;

dojo.addOnLoad(function(){

var layout = [{
defaultCell: { editable: false, type: dojox.grid.cells._Widget },

rows:[
    { field: "name", name: "Name", width: 20 },
    { field: "city", name: "City", width: 20 },
    { field: "url", name: "Web Site", width: 20,formatter: formatHTML },
    { field: "description", name: "Description",width:80}
]
}];

function formatHTML(url, rowIndex){
    if(url.firstChild != null || url !=""){
        var linkVal =  "<a target='_blank' href='"+url+"'>Web Site</a>";
        return linkVal;
    } else{
        return "";
    }
}           

grid = new dojox.grid.EnhancedGrid({
    query: { name: '*' },
    store: xmlStore,
    structure: layout,
    autoHeight:25,              
    plugins:{nestedSorting: true, dnd: true,filter:true}
}, '#{id:gridNode}');

grid.startup();
});
]]></xp:this.script>
</xp:eventHandler>

</xp:view>

Answer 2

The Notes Client uses an older version of the Firefox engine. Check this documentation for comparison:

https://iwonthemove.wordpress.com/2013/03/14/how-to-get-a-proper-javascript-debugger-in-xpinc/

(Latest versions might be newer, but you get the idea. This presentation:

https://www.slideshare.net/ddrschiw/ad108

describes XPiNC (XPages in Notes Client). Slide 21 shows the client toolbar that allows access to the source. Slide 22 talks about debugging.

Update

You also want to look at Firebug light, it will show you eventual JS errors. See this post for details: https://www.mindoo.com/web/blog.nsf/dx/02.02.2012162412KLEL3Q.htm

/Update

Hope that helps.

Btw. I wouldn't use a GUI tool (Dojo Grid) to query different sources. Rather use a managed bean and a 1:1 connection Grid - Bean.