Alright… I’ve finally fixed up the couple of issues with the database and figured I’d toss it out for anyone who cares to take a look. This is an extremely simple database that I created just to demonstrate implementing the various Ext.nd aspects. There is only a single form ‘Request’, a few different views for to filter them based off of status, a single outline with all the views, a page with the outline embedded, and a frameset with the page as the left frame and the views in the right. This setup is pretty typical for basic notes applications that I’ve seen.
I’ve included two copies, the first (extdemo.nsf) is the unmodified, extremely basic notes application. You can open it up on the web and enjoy all that wonderful HTML and Javascript that Domino generates for us 
The first step is to make sure the Ext.nd database is somewhere easily accessible and even better yet, open in designer (ready for lots of copy and paste). Now copy and paste the “Ext.nd.Profile” and “Ext.nd.Session.js” forms, “(Ext.nd.Database)” subform, as well as “ExtND\Edit ExtND Profile Doc” and “($Ext.nd.NotesDXLExporter)” agents. From here, I would drop into the Notes client real quick and run the Edit profile doc agent. The profile form will come up and ask for a single field which is the absolute or relative file path to the Ext.nd database. This step is crucial, as Ext.nd uses this location to find all the Javascript and Agents it needs to function. One final step for the first part of the conversion is to create a new page, you’ll see in the final database that I created “demo.html”. Once you have your new empty page open its time to jump back over to the Ext.nd database in designer and get ready for some more copy and paste action. Open up the “Ext.nd.SampleMain.html” page and copy the entire HTML Head Content into your new page. Hop back over and grab the entire JS Header section as well. As you begin to learn Ext and Ext.nd you’ll become accustom to the code style from the JS Header and how to pass in various other configuration options. For now, we need to change the outlineName and viewName values to be a valid outline and view from your application. For the demo database I changed these to “mainOutline” and “allreq” respectively.
Phew… so we copied and pasted in a few elements, created a page, copied and pasted code into it, and made a minor configuration tweak. With that done it’s time to take a look at our page on the web.
Alright! Already looking better than the plain ‘ol setup that Domino spits out, but lets take a look at what we actually have here. The first thing that should strike your eye is the view, Ext.nd is making some Ajax calls behind the scenes to grab the xml values of the view and translate them into an Ext data grid. The grid has lots of nice features like paging (without page reload), column sorting (if column is marked to be sortable), Icon display, rearraging columns, selecting single or multiple rows, providing simple context menus, built in searching, and much more. So with a few simple lines of code we’ve brought a lot of the functionality normally found in the client views to the web!
Next thing that tends to stick out is the tabbed interface. Double click on any document within the view and notice that instead of moving the whole page away and loading the document, it will open up within a tab, you can easily click back on the tab with the view and open up a whole pile of documents. Clicking on any views in the outline will load them in place of any other view in the “main tab”.
Rather than keep babbling on and on, I’m going to split up this walk-through into a few posts, next time I’ll take a look at using the ViewTemplateDefault and outline we provide, then dive into converting over the form. All of these changes have already been done in the “extdemofinal.nsf” database that is provided.
- Heavily moderated, SPAM will be dealt with.
Great write up! Hopefully everyone will be able to see that with just a few minutes and a few lines of code a typical Notes application can be transformed into a professional looking web application that works as well as its Notes counterpart.
Jack Ratcliff
September 19th, 2007
Your cancel button in the demo final doesn’t close the tab. It opens another window in the view frame.
Tim
September 20th, 2007
Ah Yes… The final demo was actually from what I implemented live during my presentation and I didn’t get that far. I’ll see about making a couple tweaks to finish up some of the issues like that and release an updated version.
Rich Waters
September 20th, 2007
Excellent work!!
galdaka
September 27th, 2007
Great. I’ll use it in one of ours monthly company meeting.
becomcs
September 27th, 2007
Hi Rich, Excellent work.. i’m trying to work out how to adjust the panels via the header js in the demo.html. Can u give me any pointers? I want to add a North panel at the top, thanks, Alastair
uiOutline : {outlineName: “mainOutline”},
uiView : {viewName: “vwdevelopments”, viewTitle: “All Developments”}
Alastair Grant
November 15th, 2007
Hey Alastair, sorry I missed this comment from a while back. DominoUI in the latest version allows you to override the west, center, or south regions. Unfortunately there’s not any easy way to just add a north region. If you override Ext.nd.DominoUI.createDominoUI you should be able to make some changes to the section that creates the Ext.BorderLayout.
This will be addressed in the next release. We’re going to try and open it up so that just about any Ext components we build can be easily modified.
Rich Waters
November 21st, 2007