I have been prototyping trying to squeeze a Notes View into the Dojo Tree Dijit, so far so good but what I do not understand is how to invoke a partial refresh to update one or two fields with data from a document in the background?

So I guess my chances will rise if I just post an example database and people could start it to work…

Notes View

What I got so far is the Notes View in the dijit.tree. The data for the store is collected by an Agent will runs through the View using a ViewNavigator. The data is in JSON format including the universalID as UNID.

I have added also an expand and collapse functions.

If you click on an item in the tree the corresponding document will be loaded in the browser.

The code for loading the dijit.tree and opening a underlying document is not so exciting:

<div dojoType=”dojo.data.ItemFileReadStore” url=”../(JSONAgent)?OpenAgent&amp;view=$v-treeview” jsid=”navigatorStore” />
<div dojoType=”dijit.Tree” id=”domJSONTree1″ store=”navigatorStore” labelAttr=”sname”>
<script type=”dojo/method” event=”onClick” args=”id”>
if(id){
window.location=navigatorStore.getValue(id,”unid”)+”?OpenDocument”;
} else{
alert(“No doc found.”);
}
</script>
</div>
</div>

Instructions how to enable everything you can read here.

Partial refresh how-tp?

Instead of loading a complete new document I rather would do a partial refresh. But how? The partial refresh option is not available like for the build-in XPages controls:

Perhaps IBM could extend the controls with some groovy Dojo Dijits?

The onclick event is however available (see code) but how I could initiate there the trigger to trigger another Control that might could do the job is a mystery to me? (like in pre-XPages days you would create a button which invokes an agent and you initiate the buttonvia the _doClick way) You tell me!

For anyone wanting to help here is an upload of an example database so you can work with it… Much appreciated!

Hej,

I am wondering if someone took the time for writing a user friendly manual for beginning end-users of the  IBM Blog template?

The ‘using this application’ document does not support a good guidance for end-users.

For now I have just made an abstract of what is available in the Notes 8 Client Help.nsf ( Link ) and an abstract from posts on Steve Castledines Blog ( Link ), the last one is more for application administrators or (web) designers.

But in case you have a friendly description of the template including some screen-dumps I would be thankful if you sharing it!

We are moving from office landscapes so I thought at least to place our The View collection into boxes.  I was surprised that I even found the first release of the magazine:

Time goes fast when you are having fun…

Bildr is a prototype application that never received enough funding to become a full blown (internal) Notes template. The idea is to offer a place where teams can share high resolution images.

Bild is  the Swedish word for photo and Bildr refers ofcourse to Flickr.

Another reason why I stopped prototyping the database is that I started looking at XPages and the limitations I experience with pre-XPages development. To shorten it: it takes just too many design elements to build it in the old-fashioned way to be able to offer a Web 2.5 experience. Maybe after a long break I will move the idea behind the application into an XPages based solution.

For now you can download the application and use it as a start for your development project.

What’s in it?

1. Easy import and thumbnailing of images (Notes client)

Open any of the Picture views and select the New Upload button.

The idea is that you can upload multiple images at once in a new or an existing category. You can add tags and a description to the to be created document(s). New uploads you may want to appear in the ImageFlow gallery in the startpage and you can enable commenting and read restrictions.

When you select the Upload Images action button you can select the pictures you want to upload. The code behind this function is taken from the NSFTools site (I guess). After uploading you can select to include more images or just leave it as it is.

Behind the scenes each picture is included in a Notes document with also a mid-size image and a thumbnail:

For the Notes client that is just it. Nothing more exciting here except some gaps in the completeness of the functionality (hey, I was talking about a prototype).

2. Presentation (Browser)

For the way of presenting different elements I guess I was so bold to use Jake Howlet’s DomBlog Template (for search, calendar, commenting, RSS etc.) which was for a long time a learning application for many Domino developer. I guess if you compare the layout with that of LinkedIn you will see some comparison.

3. Tagcloud (Browser)

For the Tagcloud I got some help.

4. ImageFlow Gallery

5. Lightbox

I guess Lightbox alike functions are almost unthinkable when looking at high resolution images so this I also included when clicking on a mid-size or thumbnail image:

What is it not?

You can not call this app a production ready application. Some things are not in place (like cleaning up categories and corresponding image documents). However it can be a nice starting point for a mature application. Untill now I experienced little or none errors so please give it a try and send me the end result of you modification.

Steal with pride and improve! (11 MB)

Something I like about traveling is to be able to spend some time on reading larger documents than a couple of pages. For example publications / articles from The View magazine. This time I had printed out some old skool articles regarding OO development in LotusScript. Good stuff there!

So for another trip I was thinking reading some publications on creating workflow application in Lotus Notes. The results? Hmmm quiet disappointing. You would start to believe Notes is just not build for workflow.

I believe The View sends out a survey every now and then asking what the interest of their audience is but making this more transparent to the outside world via IdeaJam would that not be something for them? Just a thought (could be used also for IBM developerWorks).

In the meantime: If you know a good online source to read some tutorials, hints, tips, examples for creating workflow applications in Lotus Notes don’t hesitate to drop an URL here. Thanks!

What started as a joke (but with some serious undertone) has resulted in one of the most demoted ideas on Ideajam.

To be honest: how often do you prefer that users would call your work an ‘application’ instead of a ‘database’ ?

For all the ‘purple trousers’ marketeers: Lotus Knows… an application is more than a database.

On the Lotus part of IBM’s developerWork you can find a clear, simple introduction to Java for LotusScript developers. With Notes 8 available for considerable period would it not be time for a proper book about Domino Development in Java?

I am testing the latest drop-code for Domino Designer 8.5plus and it is my first development experience with XPages. I just thought I will write down my first experiences, maybe it may be useful one time. At first I was not sure enough to publish this, but it was announced that design partners may write about the design program I fell more confident to do so. For now working with  XPages can not be described as love on first sight.

First impression

Coming from a generation of Notes developers prior to 4.5 this version of Designer impresses me most. It makes Notes 5 as ’super human software’ a joke. The other releases 6 and 7 where not spectacular, you just saw Notes getting behind other development platforms.

So 8.5plus gives a refreshment and hope for the future.

My experiences

With high expectations come also delusions.

As learning example I use a workshop designing in XPages by Emvege and  Declan Lynch lines of articles how to create a basic XPages based application. I also followed the short tutorial in the Designer Help for as long at that one is helpful. Their is definitely a need for adequate developer’s tutorials IBM, you can’t release a new way of developing without providing proper educational material. The Developers Help is just not supportive enough.

Application (database) properties

Much better!  The prior properties box for database was difficult to read. Too bad that text / labels can not be copied as text to the clipboard.

DIVs are poorly visualized

In Declan’s tutorial he uses DIV’s to position blocks of data. When editing the XPage in Designer the present of DIV’s are seen when looking at the source code. Some nice mouse-over with dotted lines would make this more clear.

Okej this gets reduced when you place your DIV’s in custom controls.

Line numbering and being able to collapse blocks of code are nice new add-ons.

Source code view

Oh boy your XPages are a mess when you view the source code. Some people like to indent their code, since they know someone after them are going to give support on the applications. Indenting the source code is a disaster. Tab forward is doable for multiple lines of code but tab backwards? I wonder how the code for IBM templates will look like… Please take a look to example at good WYSIWYG editors where you can indent blocks of text via buttons.

I guess no-one wants to be hand-over unreadable messy-spreaded code, do you?

OneUI Theme

I guess you have to do your homework a bit for understanding the oneUI theme (or other defaut themes). When I tried to apply some common styles from that theme on elements on my XPage I got some unwanted results. This forces me to go back to my common CSS knowledge and not able to exploit the features in the oneUI theme. Does anyone know a good description for all the styleClasses?

Dojo

Dojo is still a mystic for me, I have worked a lot with Prototype and Scriptaculous before, but basic knowledge of Dojo seems to be necessary if you want to go beyond basic XPage development. New courses seem to become available but in these low economic times budgets are frozen. Okej for now I could do with a good book on Dojo.

Performance

I do not know what your experiences are but XPages are far from fast. Just put in a rich text field and see how many files are being called.

Advanced programming

From moving to a senior Domino programmer into a novice XPage developer feels a bit awkward. Some goals you want to achieve are so basic knowledge in previous Domino development. In XPages I find it hard to find a way to solve the question. I guess my more novice co-workers will find it even hard to understand how they must develop in XPages. Best practices, tutorials that have  broad range of topics and go beyond using the default usages of core controls are rare. So no head-starts here.

I guess I am not alone in this area, so maybe an official IBM place where you can post your question and get some leads how to solve you problem would be a winner for most developers. I guess for now the 8.5 forum is that place to be. We all know that that place has never won a price for usability (sigh).

Road ahead

I guess finally we will come to a point where we release our first XPage based application and where we are proud of. For now we are far from that. Luckily the winter starts early in Sweden and it will be long so we have a lot of time to be inside and read and study.

In the meantime I am just saving all your XPages blog-posts in a Notes database so I can use that as a reference when my colleagues start developing in XPages. “Good practice does follow” so please keep contributing your findings via blogs…

Disclaimer

IBM Lotus Notes/Domino and Lotus Notes Traveler 8.5.1 is prerelease code and there are no guarantees from IBM that the functionality presented or discussed will be in the final shipping product.

On an XPage I have a dojo.dijitree module which uses a Notes View as the datastore.

I have the universal ID of the referring document available for each item in my tree widget.

What I would like to do know is when some clicks on an item that a part of the content on the XPage gets refreshed with a part (data field) of the referring document. But I am not sure how to do this.

The only thing I have is an onclick event on my tree-item.

When I have have a button with the partical refresh enabled it says:

<xp:eventHandler event=”onclick” submit=”true” refreshMode=”partial” refreshId=”PaneToRefresh”>

Then I can place an server side action like:

<xp:this.action>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:alert("hi");}]]></xp:this.script>
</xp:executeScript>
</xp:this.action>

If I place this action under my script I get the problem indication:

The markup tag script can only contain controls and markup tags.

So if you have a clue how to place a partial refresh under a ‘normal’ script that collects data from a document somewhere else then I would be greatful to hear it from you…

Cheers

Even though Notes 8.5.1 can be expected soon reality learns us however that a lot of users are still on versions 7 or even 6. Ofcourse you could use the limitations in the UI as an argument to force them to upgrade to newer versions of Notes, but then still a lot would run the basic client, not the standard one, so nice looking Java Views are still a long way to go.

I wrote before something about UI’s in Lotus Notes but now I was thinking about adding an example so those who are interested can test it and give feedback or use it for their projects. Whatever.

Here is the link to the download. Below you can find some snapshots of the UI:

Notes View used as horizontal menu

Collapsible Vertical Menus

Vertical Menu placed in preview pane

Preview on bottom by default

Option to switch place for preview pane

Form example 1

Form example 2

Form example 3

Form example 4

Well hopefully one day we have a “CSS Zen Garden” equivalent somewhere one OpenNTF where people can post good UI examples. Further may we say:

with every Notes Client installation with a version of Notes 7 or older a kitten dies?

faster pussycat

Just before I will stamp some time in displaying a categorzied Domino View in a dojo dijit.tree I am wondering if anyone has done this before and is willing to share the code? Google brought me do far no fortune (allthough I was near).

For now I have managed to display a flat view in the dijit.tree, for generating the proper JSON I use an agent that collects the data in a View. Calling directly a view via the ?ReadViewEntries&OutputFormat=JSON delivers an overload of information.

As source I woud like to use a View with documents in a response hierarchy like I described before here.

Me and my colleague got quiet frustrated today with getting a document into edit mode. Why? In one database the routine works in another database it doesn’t.

What is the best way to be able to get a document from for example:

• a View control or
• a Table control

into Edit mode (after opening the document first for reading)?

It seems adding a link on the XPage which is used for opening the Document (in read mode) and applying an Action on the onClick event (Change Document Mode) has some uncertain behaviours.

For those of you who would like to use Declan Sciolla-Lynch’s XPage framework as a default development template I have a warning when using View controls. It will lack the default presentation layer as you expect it would look like.

Here is how it shall look like:

I guess you rather would like that it will look something like this:

The reason for it is that the oneUI Theme does not extend the oneui theme. So in that theme add the following line:

<theme extends=”oneui”>

What you will notice then is that the application name will break the design:

Add an extra DIV to the bar section and clear any floating:

The ‘location’ bar is now back in line with the ‘application’ bar but a whitespace is noticeable.

In the custom.css you need to overwrite the default styling for h2:

.lotusForm h2 {
margin:0px 15px 0px 0px;
}

There you have it! You have the styling for a View control back.

Ps. I rather advice to take a look at examples provided by IBM (maybe the discussion template for 8.5 give help) or does somebody else have a good clean development template available?

In a previous post I explained how a jQuery script can be used to transform a Notes view into treeview.

At this moment I am trying to implement the same functionality into an Xpage but some questions rise.

In the old-fashioned way you would invoke the script by adding some script tags on your form:

<script src=”/<Computed Value>/WEBOutputCategoryView?openagent&category=Home&viewname=(LUDocs)”></script>

However if I copy and paste the code on an XPage i get the error message:

The reference to entity “category” must end with the ‘;’ delimiter.

Has anyone a clue what the exact code should be like?

I guess it has been discussed and complained before about IBM Lotus but since a week or so my proxy repeats asking my login credentials. I have no idea what is running on the background at IBM Lotus Forums.

When I login I even get the error message:

OpenForm&login
HTTP Web Server: Couldn’t find design note – Main+Topic

Select a view from the Browse By list, on the right, to return to the forum views.

I am trying to create a new topic on the 8.5 forum…

After all those years of annoyance, it feels awfully cheap still have to locate information this way IBM.

I would like t o quote a famous Dutch soccer trainer

Ben jij nou zo dom of ben ik nou zo slim?

Translated into English it would be something like:

Am you so dumb or am I now so smart?

I have read some tutorials about XPages and I have started with upgrading an existing Domino application with XPage technology. Basically I want to display documents with an XPage instead of a web enabled Form.

I have some nice center layered container layout with sections for a header, leftside menu, main and a footer. With a bit of help of  CSS it looks fine. Now I have started to transform the subforms into custom controls and the structure of the Form into an XPage. In stead of DIVs I am using Panels (I should or not?).

First thing I notice that panels in XPage technology only can get a name, when rendering this will be transformed into an ID. I have added my CSS for now in several files, later I will merge them together. For now for each custom control I have a CSS file attached to it.

What is happening is that the CSS get rendered well in Designer but when I look at the XPage in a browser the styling iscompletely gone! If I check in the source I see that all the ID’s have been modified, so I wonder if my CSS is still valid?

For example the original code:

<xp:panel id=”headerContainer”>

<xp:panel id=”headerLogo”>logo</xp:panel>

<xp:panel id=”headerName”>application name</xp:panel>

<xp:panel id=”headerSearch”>searchform</xp:panel>

</xp:panel>

get’s rendered as:

I was looking for a way to get a web publishing toolkit in Notes away from displaying documents in a frameset.

The frameset consists of several frames:

• a header section
• a leftside navigation section
• a main or content section

The reason why a frameset is used because the leftside navigation is populated from documents in a Notes View.  This navigator would be collapsed again every time it would be re-loaded again.  It is also build by an agent that generates XML which needs to be transformed in the browser.

Here is how it looks today:

Some searching on the web brought me to these documents:

jQuery TreeView Menu and a Show ‘n Tell Thursday blogpost. Combining the 2 topics would solve my problem since the jQuery TreeView allows to re-open the treemenu by the location specified for a menu item!

( I will add the SnTT tag to this document to honour the contributors, even when it is now still Thursday)

I soon discovered that the code for the Tree Convertor from Datatribe works with documents in the same level, meaning that documents with a response hierarchy will not be supported because you do not use categorized columns in your View. Nevertheless a little trial and error and rewriting the original code resulted in the following Notes View presented as a tree:

Note: in the example I have already applied some styling.

In this View each ‘Category’ is a document containing one or more response documents. The highlighted (red) item is the currently opened document.

So how do you get there?

• Create a Notes View that displays your documents as you want them to be presented in the tree. In the Datatribe example this View is called (LUDocs).

• Upload all the fields you need for the jQuery TreeView (CSS, Images, JS Libraries) and reference to them in the Head section of your Document Form:

• Add the fuction that will transform the HTML list into a Tree View structure.

Note:  -the persist: “location”- parameter ensures that the tree will be expanded by the item / document opened by default.

• On the place where you want to display the TreeView add the following code:

As you can see a script is here called which uses an Agent to collect the data from a Notes View in an HTML format ( ul and li list format). I had to make come changes to the original code, since I am using a View that support the display of response documents in a hierarchy.

Sub Initialize
‘—This agent is designed to ouput the required javascript to produce a nested HTML list
On Error Goto errorhandler

Dim s As New notessession
Dim db  As NotesDatabase
Dim doc As NotesDocument

‘–Category passed in via URL
Dim inCategory As String

‘—View name passed in via URL
Dim viewName As String

‘—Display Category ?
Dim displaycategory As String

‘—Document in the view
Dim tmpdoc As notesdocument

‘–Category Level
Dim level As Integer
‘—Current Category level
Dim currentLevel As Integer

Dim view As NotesView
Dim i As Integer
Dim JavascriptOutput As String

‘—Due text size limits we need to hold the ouput on 1 or more temporay notes items (never saved)
Dim fieldCounter As Integer
Dim holdingField As Notesitem

Set doc=s.documentcontext

‘–Set up holding field
fieldCounter=1
Set holdingField=New notesitem(doc,”HoldingField_” & fieldCounter,”")

inCategory=getqueryparam(doc.query_string(0),”category”,”")
viewName=getqueryparam(doc.query_string(0),”viewname”,”")
displaycategory=getqueryparam(doc.query_string(0),”displaycategory”,”")

Set db=s.currentdatabase

level=0
JavascriptOutput=”"

If displaycategory=”false” Then

Else
If inCategory=”" Then
JavascriptOutput=JavascriptOutput & |<h3>All Documents</h3>|
Else
JavascriptOutput=JavascriptOutput & |<h3>| & inCategory & |</h3>|
End If
End If

JavascriptOutput=JavascriptOutput & |<ul id=”tree”>|

‘—-View could be passed in via QueryString to allow a more generic agent
Set view=db.GetView(viewName)

‘—If view is not found handle it – as the view name is passed in this could be missing
If view Is Nothing Then
Print |Content-Type:text/plain|
Print |document.write(‘Error – View not found -| & viewName & |’)|
Goto getout
End If

Dim entry As NotesViewEntry
Dim nav As NotesViewNavigator
If inCategory=”" Then
Set nav = view.CreateViewNav
Else
Set nav = view.CreateViewNav
End If
Set entry=nav.GetFirst

Dim edoc As NotesDocument
Dim childdoc As NotesDocument
Dim coll As notesdocumentcollection

While Not(entry Is Nothing)

Set edoc = entry.Document
Set coll = edoc.responses

If coll.Count > 0 Then
currentLevel=entry.ColumnIndentLevel+1
Select Case (entry.ColumnIndentLevel+1)
Case level
%REM
JavascriptOutput=JavascriptOutput & |</ul></li>|
%END REM
Case Is<level
For i=2 To ((level)-entry.ColumnIndentLevel)
JavascriptOutput=JavascriptOutput & |</ul></li>|
Next
End Select

‘–Update level
level=entry.ColumnIndentLevel+1

‘–Propercase it
JavascriptOutput=JavascriptOutput & |<li><strong><a href=”http://| & returnCommonServer() & |/| & swapchars(db.FilePath,”\”,”/”) & |/0/| & entry.UniversalID & |”>| & edoc.Tx_Document_Title(0) &|</a></strong><ul>|
Else
‘—At document
currentLevel=entry.ColumnIndentLevel+1
Select Case (entry.ColumnIndentLevel+1)
Case level
%REM
JavascriptOutput=JavascriptOutput & |</ul></li>|
%END REM
Case Is<level
For i=2 To ((level)-entry.ColumnIndentLevel)
JavascriptOutput=JavascriptOutput & |</ul></li>|
Next
End Select

‘–Update level
level=entry.ColumnIndentLevel+1

Set tmpdoc=db.GetDocumentByUNID(entry.UniversalID)
Set tmpdoc=entry.Document
If tmpdoc.Tx_Document_Title(0)<>”" Then
JavascriptOutput=JavascriptOutput & |<li><a href=”http://| & returnCommonServer() & |/| & swapchars(db.FilePath,”\”,”/”) & |/0/| & entry.UniversalID & |”>| & fn_escape(Cstr(tmpdoc.Tx_Document_Title(0))) & |</a></li>|
End If
End If

‘–Check for field size
Call holdingfield.appendtotextlist(JavascriptOutput)
Call monitorFieldSize(doc ,fieldCounter,holdingField)
JavascriptOutput=”"
Set entry=nav.GetNext(entry)
Wend

‘–Now we have finished we need to close the remaining tags
For i=1 To (currentLevel-1)
JavascriptOutput=JavascriptOutput & |</ul></li>|
Next

Call holdingfield.appendtotextlist(JavascriptOutput)

‘—-Now output Javascript

Print |Content-Type:text/plain|
Print |document.write(‘\n’+|
If fieldcounter=1 Then
Forall items In doc.GetItemValue(“HoldingField_1″)
Print|’| &  items & |\n’+|
End Forall
Else
For i=2 To fieldcounter
Forall items In doc.GetItemValue(“HoldingField_” & i)
Print|’| & items &  |\n’+|
End Forall
Next
Forall items In doc.GetItemValue(“HoldingField_1″)
Print|’| & items  |\n’+|
End Forall
End If
Print |’\n’)|

getout:
Exit Sub

errorhandler:

‘—As this is an agent that expects to return JavaScript we will return the error message in Javascript
Print |Content-Type:text/plain|
Print |document.write(‘Error – | & Error & | – | & Err & |’)|

Resume getout

End Sub

That is about it! Here is a better look of the result:

Uhm, I have a Page for the Notes client where I want to display a list with references to documents in the same DB. The list is computed text and collects the data from a View. I have set the text as passthru html and enabled the render passthru HTML in Notes.

Here is the formula I am using in the View column:

@Text(@Date(@Created)) + ” – ” + Tx_DocTitle + ” <a href=\”notes:///__”  + @Replacesubstring(@Text(@ReplicaID);”:”;”") + “/0/” + @Text(@DocumentUniqueID) + “?OpenDocument\”>link</a>”

Information about the structure I have taken from this site:

http://www.nsftools.com/tips/NotesTips.htm  -> section: Notes Client Command-Line Options

In the Notes client the links just don’t work, however if I open the Page in a browser they work perfectly.

• Does html references in the Notes client just don’t work?

For distributing database icons we use a Notes database that is dated from 1999. As you understand, this database is pretty much out of date / old fashioned.  Since the database icon in Notes 8 is still crappy 16 colors (I have no idea how it will be in Notes 8.5.x) I do not foresee that searching or creating new 16 color icons is so worth the effort.

Nevertheless I am wondering if you have a collection of 16 color database icons that is worth sharing?

We haven’t distributed any plug-ins or components via an update site but what are your best practices or where can I find them on the web?

The only related topic I could easily find is this one.

Questions of interest is:

• how to handle versioning?
• how to collect statistics? (who has installed what, how many products have been installed)
• how to connect an installation of a product to a billing system?

Thanks in advance for your guidance!