04.10.2007

SnTT: Show number of remaining chars

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/BHOT-77NDHM

Category: Show-n-Tell Thursday Interface Design

Showing the number of remaining chars during input in a web browser is quite common used. It gives the user direct feedback instead of bothering him with error messages during submit.

With a little JavaScript this could be achieved also in the Lotus Notes client.
A picture named M2

Lotus Notes has build in support for JavaScript in the client since version R5. It is definitely less powerful compared to support in a browser. But for our goal there is everything you'd need.

In the JS Header in the form the functions calcCharsRemain and clearCalcCharsRemain are defined.

JS Header:

var activeFunction;

function calcCharsRemain(fieldname, fieldnameDisplay, nr){
var f = document.forms[0];
var field = f.elements[fieldname];
var fieldvalue = "";
show = true;
switch(field.type){
case "text":
fieldvalue = field.value;
break
case "textarea":
fieldvalue = field.value;
break
case "select-one":
if ( field.selectedIndex != -1 ){
fieldvalue = field.options[field.selectedIndex].text;
} else {
fieldvalue = "";
show = false;
}
break
case "select-multiple":
if ( field.selectedIndex != -1 ){
fieldvalue = field.options[field.selectedIndex].text;
} else {
fieldvalue = "";
show = false;
}
break
default:
fieldvalue = "";
show = false;
break
}

if (show){
var charsRemain = nr-fieldvalue.length;
if (charsRemain>=0){
f.elements[fieldnameDisplay].value = charsRemain + " chars remaining";
} else {
f.elements[fieldnameDisplay].value = "You entered " + (charsRemain*-1) + " chars too many.";
}
}
}

function clearCalcCharsRemain(fieldnameDisplay){
window.clearInterval(activeFunction);
var f = document.forms[0];
f.elements[fieldnameDisplay].value = "";
}

Together with the regular text field there is a second field for displaying how much chars are left.
A picture named M2

The second field has to be editable in order to write values to it via JavaScript. Disable "Show field delimiters" to remove the typical Notes corners on fields.

In the text field for the event onFocus the JavaScript function
activeFunction = window.setInterval("calcCharsRemain('Textfeld', 'Textfeld_Laenge_', 20)", 300);
is called. window.setInterval calls the function "calcCharsRemain" every 300 mili seconds. The function "calcCharsRemain" calculates how many chars do remain to be entered.

Somebody familiar with JavaScript in a browser is maybe wondering why I didn't uses the Event onKeyPress, which would be triggered with every key stroke. Unfortunately this event is not supported in the Notes client.

On the event onBlur for the text field the function
clearCalcCharsRemain('Textfeld_Laenge_');
is called, which clears the interval.

This solutions just works fine. Except for a dialog list with the option "Allow values not in list.". When the user enters a value not in the list nothing will be shown. The reason is that there is no equivalent for that in HTML. So there is in JavaScript no way to access the entered value. But I found a LotusScript solution which works similar. Tommy Valand inspired my for this solution.

The class CharsRemainListener uses the NotesTimer. Unfortunately the shortest intervall is 1 second which is for a fast writer nit fast enough.

'/*****************************************************************
' * Calculates the chars remaining of an input field
' *
' * UI-methods or classes are used
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Class CharsRemainListener

'/*****************************************************************
' * The Notes UI Document
' ****************************************************************/
Private uidoc As NotesUIDocument

'/*****************************************************************
' * The fieldname to monitor
' ****************************************************************/
Private fieldnameToMonitor As String

'/*****************************************************************
' * The fieldname to display the remaining chars
' ****************************************************************/
Private fieldnameToDisplay As String

'/*****************************************************************
' * The nr of chars
' ****************************************************************/
Private nrOfChars As Integer

'/*****************************************************************
' * The Notes Timer
' ****************************************************************/
Private timerListener As NotesTimer

'/*****************************************************************
' * Constructor
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Sub New (uidoc As NotesUIDocument, fieldnameToMonitor As String, fieldnameToDisplay As String, nrOfChars As Integer)
On Error Goto errorHandler

Set Me.uidoc = uidoc
Me.fieldnameToMonitor = fieldnameToMonitor
Me.fieldnameToDisplay = fieldnameToDisplay
Me.nrOfChars = nrOfChars

Set timerListener = New NotesTimer(1)
On Event Alarm From timerListener Call calcRemainChars

timerListener.Enabled = False

Exit Sub

errorHandler:
Print "Error Nr.: " & Cstr(Err) & " / Line: " & Cstr(Erl) & " " & Error
Exit Sub
End Sub 'CharsRemainListener.New

'/*****************************************************************
' * Calculates the remaining chars
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Private Sub calcRemainChars(Source As NotesTimer)
On Error Goto errorHandler

Dim charsRemain As Integer
Dim value As Variant

value = uidoc.FieldGetText(Me.fieldnameToMonitor)
charsRemain = nrOfChars - Len(value)

If charsRemain >= 0 Then
Call uidoc.FieldSetText(fieldnameToDisplay, Cstr(charsRemain) & " chars left")
Else
Call uidoc.FieldSetText(fieldnameToDisplay, "You entered " & Cstr(charsRemain*-1) & " chars too many.")
End If

Exit Sub

errorHandler:
Print "Error Nr.: " & Cstr(Err) & " / Line: " & Cstr(Erl) & " " & Error
Exit Sub

End Sub 'CharsRemainListener.calcRemainChars

'/*****************************************************************
' * Enables the listener
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Public Sub Enable()
timerListener.Enabled = True
End Sub 'CharsRemainListener.Enable

'/*****************************************************************
' * Disables the listener
' *
' * @author Bernd Hort <bhort@assono.de>
' * @version 2007-10-04
' ****************************************************************/
Public Sub Disable()
timerListener.Enabled = False
Call uidoc.FieldSetText(fieldnameToDisplay, "")
End Sub 'CharsRemainListener.Disable

End Class 'CharsRemainListener

There is a sample database to show the code in use.

CharsRemain.zip (108 KB)

Comments

I have a small problem with hardcoding the fieldname in the onfocus event:

activeFunction = window.setInterval("calcCharsRemain('Textfeld', 'Textfeld_Laenge_', 20)", 300);

adding a $(this).name would be nicer Emoticon