DontPanic - a blog about Lotus Notes / Domino

Runtime optimized JavaScript and CSS - workaround for multiple stylesheets

2012-01-26T09:55:00.005+01:00

Update: This workaround is only needed if you use "folders" in the image resource name.
E.g. backgrounds\home.png.

If you have multiple local stylesheets on a page, the CSS files are combined into a single file.

This changes the url to the stylesheet (adds xsp/.ibmmodres/.css after the path to the db).

If you have an image reference like url(image.png), the image can no longer be loaded, as the url is relative to the path of the stylesheet.

To work around this issue, add ../../../ to the image reference.

E.g.
url(../../../image.png)

Useful tool when working with text files (CSV, source code, etc)

2012-01-05T12:50:00.004+01:00

WinGrep is a tool that let's you search one/several folders for parts of strings. It supports searching in zip files, and lets you use Regular Expression (Perl syntax?) for searching strings.

The result pane shows all the matching lines in the file(s) you are searching.

Thing to be aware of when using "Generate unique keys.." in view

2012-01-02T12:43:00.004+01:00

I had trouble with a couple of views today. The views had the option Generate unique keys in index checked.

When the views were replicated to other servers, they weren't built. When trying to open them I got the error message Entry not found in index

I found the solution on the Domino forums, add @IsUnavailable($Conflict) to the view selection.

ClassNotFoundException with the new Java design element

2011-12-13T09:16:00.005+01:00

Last week Vince Shuurman blogged about having to recompile when opening an XPage app in Domino Designer.

I had the same issue. I was using some Java code in an XPage, and every time I opened the app in designer, I got ClassNotFoundException when opening the XPage. A build of the project fixed the issue.

My java code was in the new Java design element (new in Domino 8.5.3), so I suspected that it might have something to do with this.

I moved the code to a "custom" java source folder, and the error went away. Closing/opening the app in Designer did not result in ClassNotFoundException.

Java Debugging in Designer without hacks

2011-10-21T07:44:00.003+01:00

I found this today: How can I enable Java debugging?.

Not sure if this is new in 8.5.3, but I never heard of it. It makes it a lot easier to debug than the using the two headed beast method which seemed like too much trouble.

The full instructions are in the Designer help. Search for java debugging.

Collecting data for HTTP hang or performance issues on a Lotus Domino server

2011-09-28T11:12:00.001+01:00

We're currently having problems with one of our old Domino servers. The HTTP task randomly hangs.

In the process of looking for help to track down the reason, I found this document from IBM.

Collecting data for HTTP hang or performance issues on a Lotus Domino server

Indicator for all partial refreshes

2011-09-27T13:06:00.007+01:00

Sometimes partial updates take a while. To make users aware of updates happening, I made a small JS object that automatically shows a dojox.widget.Standby over the area being updated. Initially I thought that it would be too much, showing the mask over every refreshed area. So far, I quite like the effect.

The app isn't in production yet, so I don't know how users will react, but hopefully they will appreciate being made aware of that things are happening.

To load the object, put this in a JavaScript library (client side)

dojo.addOnLoad(function(){ new StandbyWidget(); });

The default background color is bright yellow. To override, simply put a hex string in the "constructor" call.

dojo.addOnLoad(function(){ new StandbyWidget( '#555'); }); // Dark grey

To use the code snippet below, you also need the partial event hijacker

var StandbyWidget = function( backgroundColor ){
 dojo.require( 'dojox.widget.Standby' );
 this.widget = new dojox.widget.Standby();
 this.widget.attr( 'color', backgroundColor || '#ffe' );
 
 document.body.appendChild( this.widget.domNode );
 this.widget.startup();
 
 dojo.subscribe( 'partialrefresh-init', this, function( method, form, targetId ){
  if( targetId && targetId !== '@none' ){ this.show( targetId ); }
 });
 
 dojo.subscribe( 'partialrefresh-complete', this, function( method, form, targetId ){
  if( targetId && targetId !== '@none' ){ this.hide(); }
 });
 
 dojo.subscribe( 'partialrefresh-error', this, function( method, form, targetId ){
  if( targetId && targetId !== '@none' ){ this.hide(); }
 });
}

StandbyWidget.prototype = {
 show: function( targetId ){
  this.widget.attr( 'target', targetId );
  this.widget.show();  
 },
 hide: function(){  
  this.widget.hide();
 }
}

Using themeId for maintainability

2011-09-26T18:46:00.014+01:00

In an application I'm currently working on, there are several categorized views with number-/totals columns. As the number of views/columns increased, I looked for a way to make styling of the columns more maintainable.

The solution I found was using themeId on the columns and calling a SSJS function in the theme, that generates the style classes.

I chose numberColumn as the name for the themeId.

In theme

<control>
 <name>numberColumn</name>
 <property>
  <name>styleClass</name>
  <value>#{javascript:return StyleHelper.getNumberColumnStyleClass( this );}</value>
 </property>
</control>

this refers to the column object.

SSJS code

var StyleHelper = {
 // Used to calculate styleClass for a number column
 getNumberColumnStyleClass: function( column ){
  try {
   var entry = column.getViewRowData();
   var styleClass = 'numberCell';
   if( entry.isCategory() ){ styleClass += ' categoryCell'; }
   if( entry.isTotal() ){ styleClass += ' totalsCell'; }
   return styleClass;
  } catch( e ){ /* Exception handling */ }
 }
}

Regular column cells will get class="numberCell".
Totals column cells will get class="numberCell totalsCell".
Category column cells will get class="numberCell categoryCell".

All I have to do to add dynamic styling to future columns is to set themeId on the column to numberCell.

XPages: Passing event handler code to custom control

2011-08-26T11:55:00.007+01:00

Update: After a little test, it looks like the onchange event of the combo fires for every refresh. I'll move the code to beforeRenderResponse or something like that instead.

In an application I'm currently working on, I have a combobox that's used in several pages. The values the combobox contains persist over every page, but what happens when the user changes value varies from page to page.

I saw that the combobox has several properties for events under all properties. I tried adding
#{compositeData.onchange} to the onchange event, and it works. One caveat is that it seems to fire three times, but I can live with that.

To implement:
Add custom properties to the custom control for the events you want to have custom event handlers for. In the source code of the field, add attributes for the events you want code to run. E.g. onchange="#{compositeData.onchange}"

In the XPage under custom properties for the custom control, write the SSJS you want to run for your events.

That's about it.

I have only tested this with ComboBoxes, but I'm not surprised if it works for most fields that have event properties.

Tested on server running Domino 8.5.2 FP2

Update on the "enhanced" validation messages

2011-07-22T08:57:00.001+01:00

I added functionality to select/focus a dijit tab if the field is inside a dijit.layout.TabContainer. I also added a highlight effect when a field is focused.

Source code for the custom control can be found in the original post.

Custom Control for "enhanced" validation messages

2011-07-19T19:52:00.012+01:00

Update 22.07.2011: I added functionality to select/focus a dijit tab if the field is inside a dijit.layout.TabContainer. I also added a highlight effect when a field is focused.

Disclaimer: This custom control is not entirely my idea. I've been thinking about doing something like this for a while. After I tried to help with this question by Steve Pridemore in the XPages Development Forum, I found the solution.

The code below can be used as a custom control that is a little bit more advanced (probably has its flaws) than the regular Display Errors control. If the field with a validation error has a label, it shows the label, then the error message. On the label, a link is generated that sets focus to the related field when you click it.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
 <xp:this.beforeRenderResponse><![CDATA[#{javascript:try {
 var messageObjects = [];
 var clientId,
 clientIds = facesContext.getClientIdsWithMessages(); 
 while( clientIds.hasNext() ){
  clientId = clientIds.next();
  var component = view.findComponent(clientId.replace( view.getClientId(facesContext), '').replace(/\:\d*\:/g, ':'));
  if( !component ){ continue; }
  
  var message = '',
  messages = facesContext.getMessages(clientId);
  while( messages.hasNext() ){
   message += (message) ? ', ' : '' + messages.next().getSummary();
  }
  
  var labelComponent = getLabelFor(component);
  var label = (labelComponent) ? labelComponent.getValue() : '';
  if( !label && component ){ 
   var id = component.getId(); 
   if( id.indexOf( '_' ) > 0 ){ 
    label = id;
   } 
  }
  if( label && label.indexOf( ':' ) === -1 ){ label += ':'; }
  
  messageObjects.push({
   clientId : clientId,
   label : label,
   message : message
  });
 }
 
 viewScope.messageObjects = messageObjects;
} catch (e) { /*Debug.logException(e);*/ }}]]></xp:this.beforeRenderResponse>
 <xp:this.resources>
  <xp:script src="/UtilitiesSSJS.jss" clientSide="false"></xp:script>
 </xp:this.resources>
 <xp:scriptBlock>
  <xp:this.value><![CDATA[var EMessages = {
 // Set focus to field
 setFocus: function( clientId ){
  var matchingFields = dojo.query('[name=' + clientId + ']');
  if( matchingFields.length > 0 ){
   if( dijit && dijit.registry ){
    this.showDojoTabWithField( clientId );
   }
   var field = matchingFields[0]
   field.focus();
   dojo.animateProperty({
    duration: 800,
    node: field,
    properties: {
     backgroundColor: {
      start: '#FFFFEE',
      end: dojo.style( field, 'backgroundColor' )
     }
    }
   }).play();
  }
  return false;
 },
 
 // If field is inside a dijit TabContainer - activate
 showDojoTabWithField: function( clientId ){
  dijit.registry.byClass("dijit.layout.TabContainer").forEach(function( tabContainer ){
   dojo.forEach( tabContainer.getChildren(), function( containerPane ){
    if( dojo.query( containerPane.containerNode ).query( '[name=' + clientId + ']' ).length > 0 ){
     tabContainer.selectChild( containerPane );
    }
   });
  });
 }
}]]></xp:this.value>
 </xp:scriptBlock>
 <xp:div styleClass="xspMessage" 
  rendered="#{javascript:return ( getComponent( 'messageRepeat' ).getRowCount() > 0 );}">
  <xp:repeat id="messageRepeat" rows="30" 
   value="#{viewScope.messageObjects}" var="messageObject">
   <xp:this.facets>
    <xp:text value="Validation errors:" xp:key="header" 
     tagName="strong" />
   </xp:this.facets>
   <br />
   <xp:text value="#{messageObject.label}" />
   <a href="#" 
    onclick="return EMessages.setFocus( '#{messageObject.clientId}');">
    <xp:text value="#{messageObject.message}" />
   </a>   
  </xp:repeat>
 </xp:div>
</xp:view>

The code should work with fields inside a single level repeat. I'm not sure about deeper nesting. Pop the custom control into the page like you would with the Display Errors control.

Feel free to use the code however you like. If you improve on it, please share with the community.

XPages: Styling required and invalid fields

2011-07-13T09:47:00.010+01:00

Just discovered that in Domino 8.5.2 (not sure about previous releases), invalid fields get the attribute aria-invalid=true, and required fields aria-required=true.

That makes it easy to style in modern browsers (>IE6).

Simply add a couple of style rules (just an example):

[aria-required=true] { background-color: #ffe; }
[aria-invalid=true] { background-color: #fee; border-color: red; }

Valid - required fields "highlighted"

Invalid

+1 to IBM for implementing :)

Share and enjoy!

Small tip regarding optimizing FTSearches

2011-07-12T17:03:00.005+01:00

Lately I've been working on SQL (MS). At work today, I had a talk about optimizing queries with a colleague more seasoned in the art of writing queries. We got into a talk about if the order of the filter statements (WHEN ..=..) and performance. Apparently, MS have optimized their engine so that the order of the filtering statements don't have much influence on the performance of the query.

This got me thinking about FTSearch. A year or so ago, I thought about doing some testing on how you could structure an FT query to get the best performance, but never got around to do it.

I did a little test today, and it seems like the order of the filters doesn't influence the result much. One thing that seems to heavily influence the result is if one of the query items alone results in a lot of documents.

If you search for "Tom", and the value "Tom" is in a field in a lot of documents, this will drag down the result, no matter if another query item in the query would result if only one document being returned from the query.

Example from test:
Searching for 'abigail AND abbott' - 2-5ms to get result.
Searching for '[Form=Person] AND abigail AND abbott' - 15-20ms to get result.

Conclusion from my test. Query items in a FTSearch that alone results in a lot of documents drags down the performance of the entire query. Order of query items doesn't seem to influence the performance of the query.

If you're building a search engine for databases with a lot of documents, try to avoid having general filters (Form/etc.) if possible.

Tip for those working with Database events in 8.5.x designer

2011-06-21T09:17:00.002+01:00

If you're working with Open/Close events, it's quite cumbersome when you want to test your code. You have to close the app in both Domino Designer and Notes. I used to close the designer every time I wanted to test modified code.

During a chat, Tim Tripcony mentioned that you could close the apps in Designer from the Package Explorer. In Package Explorer, each app is shown as a project. To release the app from Designer, simply right click the project, and select close project. No need to remove the app from Designer or close Designer to release the app from memory.

Share and enjoy! :)

Creating your own keyboard shortcuts in Domino Designer

2011-06-21T08:33:00.004+01:00

File -> Preferences --> General -> Keys

I currently have two custom keyboard shortcuts, Alt + b to build a single project, and Alt + c to close a project in Package Explorer.

One editable area can be used multiple times in a Custom Control

2011-06-17T06:54:00.006+01:00

Not sure how many now this, but an editable area (xp:callback) can be used multiple times inside a custom control.

If you have an editable area with fields, you can put the field several places in the custom control (same facetName). I'm currently working on a custom control that lets the user edit/add documents. Inside a repeat control, I show the existing documents. Below that, the user can add documents.

E.g.

..
<xp:repeat>
..
<!-- View and edit existing fields -->
<xp:callback facetName="fields" disableTheme="true" />
..
</xp:repeat>
..
<!-- Create new document -->
<xp:callback facetName="fields" disableTheme="true" />
..

I also discovered that currentDocument seems to point to the "closest" document data source.

Simple API tester - SSJS bugs remain

2011-06-13T17:03:00.007+01:00

A couple of years ago I blogged about bugs in Array.splice, String.match with global modifier, and String.replace with function as parameter.

I did a little test on the current beta of 8.5.3. Guess what. Two years later, the bugs still haven't been fixed.

I made a small API tester utility that you can set up tests for the API/expected result. In the demoapp, there are tests for the bugs that I'm aware of. I also added a couple of tests for inconsistencies in the @-functions api.

It's quite simple to set up for JS/ECMAScript tests. Do the test in Firebug or a similar JS console. Copy/paste the expression, and the result into the fields in the XPage. Run test to see if the result is what should be expected. Note that SSJS follows ECMA-262 Edition 3. Firefox also follows this standard, but has features from JavaScript 1.8.x (according to wikipedia) that SSJS doesn't have.

>> Download API Tester

Disclaimer:
This is beta software from IBM and does not represent a commitment, promise or legal obligation by IBM to deliver, in a future release of Notes/Domino or Lotus Notes Traveler, any material, code or functionality described/shown in this presentation.

Another release of the API Inspector

2011-06-10T19:53:00.007+01:00

Changes
* Possibility to select XPage to inspect
* No longer a custom control - One XPage to inspect them all!
* Links to the XPages API for XPages classes

You can download the latest release from OpenNTF

Screenshots

New release of the XPages API Inspector

2011-06-09T17:59:00.003+01:00

You can download it from OpenNTF.

Changes:
* Tweaked the user interface
* Now requires 8.5.2 or higher (Process data without validation)
* Removed dijit.form.Textarea from the expression area, and made a simple resize function instead (due to refresh issues)
* Previous expressions are stored/can be selected from a combo box
* SSJS Code and CSS moved into a library/stylesheet for easier maintenance

Screenshots

Enabling template inheritance per design element on new design elements

2011-06-08T09:28:00.007+01:00

The new design elements (everything that you have to edit through Package Explorer) don't have an interface to set template inheritance on them.

You can enable this functionality with a little hack.

Create a view that shows all design elements. Set the first column formula to $Title. This makes it easier to find the design element you're looking for.

Set the $Class field on the design element document to the template you want it to inherit from. You can do this using a formula agent, or a plugin like Formul8.

That's about it. I'm not sure how the refresh task handles compiling of your java code, but since it seems to work when the design task refreshes an entire application from a template, I'm not surprised if everything works as you expect it to do.

Per design element inheritance enables you to have a central repository for things like message bundles. If you want to change a typo in a label (e.g. Adress -> Address), you can change this in the repository, and all applications that "subscribes" to this bundle will be updated with the fix.

Share and enjoy!

Trying to find ntrigger.dll for 64 bit server - Trigger Happy/Audit Manager

2011-06-07T09:33:00.002+01:00

I'm trying to implement Audit Manager on a 64bit domino server.

I've hammered my friend Google with every keyword I can think of, but it doesn't look like anyone has successfully made a 64bit version of the ntrigger.dll/published it.

I managed to compile a 64bit version, but it crashes the server after it's initialized.

If anyone has managed to make a working 64bit version of the dll, I would be very happy if you could send it to me (tvaland at gmail)/contribute it to OpenNTF.

Thanks in advance :)

Simple helper function to get path to an application

2011-06-06T09:23:00.003+01:00

I use this when generating URLs in SSJS. The reason that protocol/hostname is added is so that the generated urls work with xp:link.

If an xp:link url starts with /, it generates the path to the current application at the start of the url. If you want to link to another app/page on the current server you either have to make an html link (<a>), hard code the path, or use something like this function.

// Returns absolute path (including protocol/hostname) to the current application
// or specified [database]
function getAppPath( db:NotesDatabase ){
 try {
  var currentUrl = context.getUrl();
  var hostname = currentUrl.getHost();
  var protocol = currentUrl.getScheme();
  
  db = db || database;
  return protocol + '://' + hostname + '/' + db.getFilePath().replace( /\\/g, '/' );
 } catch( e ){ /* Exception handling */ }
}

Useful sidebar widgets/plugins

2011-05-30T07:13:00.003+01:00

I was looking for the DocViewer plugin and found a couple more plugins posted by Alan Lepofsky a couple of years ago.

https://www.socialtext.net/lotus/lotus_notes_sidebar_apps_and_plugins

Force embedded views to open on the same server as the app containing them

2011-05-16T08:13:00.007+01:00

I've been doing some Notes development lately. I've noticed that the embedded views are being loaded from the server where the app that have the embedded views was opened last. I wrote a little procedure that you can run on PostOpen in database script.

Input parameter: the name(s) of the forms with external embedded views.

The code inspects the DXL of the form and fetches all the replicaids of the external embedded views. It then tries to open these databases and add them to the workspace with the server the user is currently on. As far as I've tested, it seems to work as described. Let me know if there are bugs.

Sub loadEmbeddedViewsOnCurrentServer( formsWithEmbedded As Variant )
 On Error GoTo bubbleError
 '// Goes through the form(s) specified by name in formsWithEmbedded and opens the dbs
 '//  that have the embedded views on the same server as the code is running
 If DataType( formsWithEmbedded ) = 8 Then
  formsWithEmbedded = Split( formsWithEmbedded, "¤¤¤" )
 End If 
 
 Dim s As New NotesSession, db As NotesDatabase, currentServer As String
 Set db = s.currentDatabase
 currentServer = db.server
 
 '// Find forms
 Dim noteCol As NotesNoteCollection
 Set noteCol = db.createNoteCollection( False )
 noteCol.selectForms = True
 noteCol.selectionFormula = |$title="| + Join( formsWithEmbedded, |":"| ) + |"|
 Call noteCol.buildCollection()
 
 Dim formNoteId As String, formDoc As NotesDocument
 Dim dxlExporter As NotesDXLExporter, dxlStream As NotesStream
 Dim embeddedPosition As String, embeddedView As String
 Dim formDxl As String, embeddedViews As Variant, replicaid As String
 Dim workspace As New NotesUIWorkspace(), embeddedViewDb As NotesDatabase
 Dim openedDbs As Variant, result As Variant
  
 openedDbs = Split( "" )
 Set dxlStream = s.createStream()  
 
 formNoteId = noteCol.getFirstNoteId() 
 While formNoteId <> ""
  Set formDoc = db.getDocumentById( formNoteId )
  
  '// Extract DXL from form
  Set dxlExporter = s.createDxlExporter( formDoc, dxlStream )
  Call dxlExporter.process() 
  
  dxlStream.position = 0
  formDxl = dxlStream.readText
  
  '// Get embedded view info
  embeddedPosition = InStr( formDxl, "<embeddedview" )
  While embeddedPosition > 0
   '// Embedded views can be defined as <embeddedview /> or <embeddedview></embeddedview> - try both
   embeddedView = StrLeftBack( StrRightBack( formDxl, "<embeddedview" ), "</embeddedview>" )
   If embeddedView = "" Then embeddedView = StrLeftBack( StrRightBack( formDxl, "<embeddedview" ), "/>" )
   
   '// Open databases
   If InStr( embeddedView, "database" ) > 0 Then
    replicaid = Strtoken( StrRightBack( embeddedview, "database='" ), "'", 1 ) 
    If replicaid <> "" Then
     '// If db hasn't been opened before in the script - open
     If IsNull( ArrayGetIndex( openedDbs, replicaid ) ) Then
      Set embeddedViewDb = New NotesDatabase( "", "" )
      Call embeddedViewDb.openByReplicaId( currentServer, replicaid )
      If Not embeddedViewDb Is Nothing Then       
       If embeddedViewDb.isOpen Then
        Call workspace.addDatabase( currentServer, embeddedViewDb.filePath )        
       End If
      End If
      
      openedDbs = ArrayAppend( openedDbs, replicaid )
     End If
    End If
   End If
   
   '// Remove start tag for the processed embedded view - only run once per embedded
   formDxl = Replace( formDxl, "<embeddedview" + embeddedView, "" )
   
   '// Find next embedded view
   embeddedPosition = InStr( formDxl, "<embeddedview" )
  Wend
  
  Call dxlStream.truncate()
  formNoteId = noteCol.getNextNoteId( formNoteId )
 Wend 
 
 Exit Sub
bubbleError:
 Error Err, Error
End Sub

Simple trick to format XPages Checkbox group

2011-04-14T10:22:00.003+01:00

If you put display:inline on a table (which XPages generates for a CheckboxGroup), you can style each cell like an inline element.

To make a four column checkbox group (put fourColumnCheckboxGroup as styleClass on the xp:checkBoxGroup), put this in your CSS file:

.fourColumnCheckboxGroup { display: inline; }
.fourColumnCheckboxGroup td { float: left; width: 24%; }

For three columns, use 32% and so on. I use (100 / numberOfColumns) - 1 as that seems to work best cross browser.

Share and enjoy :)