en · de

SnTT: Show number of remaining chars

by Bernd,
assono GmbH, Standort Hamburg,


SNTT.gif 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.
zip.gif CharsRemain.zip (108 KB)

Technical article Development

You have questions about this article? Contact us: blog@assono.de

Sie wollen eine individuelle Beratung oder einen Workshop? Read more

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

assono GmbH

Location Kiel (headquarters)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 411

E-Mail adresses:
contact@assono.de
bewerbung@assono.de