Lectora Advanced: Adding a Character Counter to an Entry Field

In my last blog, we built a global Student Notes feature in Lectora®. Entry fields, like the one we used on the Notes Entry Page of the feature, require you to supply a character limit value on the field.

But this is a value that the user cannot see automatically. And when the character limit is reached, with no warning, typing further content into the field is prevented. This could leave users scratching their heads! So, as a nice user-feedback feature, let’s add a character counter to our Notes Entry Page that shows the user how many characters are remaining in the character limit.If you built your own Student Notes feature using my last blog, open that now. Or, you can download the completed version from the Trivantis® Community and follow along.

Download Example

Let’s begin by adding an additional text field to the Notes Entry Page.

1. If your version does not yet have the Character Remaining text block, add a Text Block to the Notes Entry Page and position it to the left of the Notes Summary button. Resize it so that it fills the space between the left side of the page and the Notes Summary button, and has a height to accommodate one line of text.
2. Type the following text into the new text block: Characters Remaining: 250
3. Rename the text block in the Title Explorer to Characters Remaining.

Now we need to add an additional User-Defined variable that will keep track of how many characters can be typed into the entry field on the Notes Entry Page. Every time a character is typed into the entry field, the value of the variable will change and its value will be displayed in the Characters Remaining text block.

1. From the Tools ribbon, open the Variable Manager and click the Add button at the bottom of the User-Defined tab.
2. Set the Variable Name of the new variable to _NoteCharsRemaining.
3. Set the initial value of the variable to 250, and click OK.

The Notes Entry page should already have one action attached to it, OnShowResetForm. This will clear out the previous note that the user typed. If the action doesn’t exist yet, add it now.Action 1 – This action resets the contents of Form_1, in this case the Entry_0001 field, to its initially empty state.Name: OnShowResetForm Trigger: ShowAction: Reset FormTarget: Form_1Since we are resetting the form and clearing out the contents of the entry field, we need to reset the value of the _NoteCharsRemaining variable back to 250.Action 2 – This action resets the value of the _NoteCharsRemaining variable to 250.Name: OnShowModVar _NoteCharsRemaining = 250 Trigger: ShowAction: Modify VariableTarget: _NoteCharsRemaining Type: Set Equal To Value: 250After this action, we want to add a series of actions that are triggered by keystrokes that will add or subtract to the value of the _NoteCharsRemaining variable in this order.Action 3 – This action always subtracts 1 from the _NoteCharsRemaining variable regardless of which key is typed.Name: OnAnyKeyModVar _NoteCharsRemaining – 1 Trigger: Any KeyAction: Modify VariableTarget: _NoteCharsRemainingType: Subtract from VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 1As you know, not all keys add a physical character when typed and some actually delete characters. So, we need to add a series of actions to offset the subtraction done by Action 2 by adding 1 or 2 back to the value of _NoteCharsRemaining when one of these keys (such as Backspace, Home, End, or arrow keys) is typed. The following 10 actions do this.Action 4 – The Backspace key does not produce a physical character and it deletes a physical character, so we add 2 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Backspace ModVar _NoteCharsRemaining + 2 Trigger: KeystrokeKey: BackspaceAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 2Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 5 – The Delete key does not produce a physical character and it deletes a physical character, so we add 2 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Delete ModVar _NoteCharsRemaining + 2 Trigger: KeystrokeKey: DeleteAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 2Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 6 – The Left Arrow key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Left Arrow ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: LeftArrowAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 7 – The Right Arrow key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Right Arrow ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: RightArrowAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 8 – The Up Arrow key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Up Arrow ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: UpArrowAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 9 – The Down Arrow key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Down Arrow ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: DownArrowAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 10 – The Home key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Home ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: HomeAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 11 – The End key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey End ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: EndAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 12 – The Insert key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Insert ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: InsertAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 13 – The Page Up key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Page Up ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: PageUpAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250Action 14 – The Page Down key does not produce a physical character, so we add 1 back to the value of _NoteCharsRemaining when this key is typed.Name: OnKey Page Down ModVar _NoteCharsRemaining + 1 Trigger: KeystrokeKey: PageDownAction: Modify VariableTarget: _NoteCharsRemainingType: Add to VariableValue: 1Conditions: All conditions must be trueVariable: _NoteCharsRemainingRelationship: Greater Than Or EqualValue: 0 ----------Variable: _NoteCharsRemainingRelationship: Less ThanValue: 250And finally, once all of the other keystroke actions have run, we need an action to update the contents of the Characters Remaining text block with the new value of the _NoteCharsRemaining variable.Action 15 – This action updates the contents of the Characters Remaining text block every time a key is typed.Name: OnAnyKeyChange Characters Remaining Trigger: Any KeyAction: Change ContentsTarget: Characters RemainingValue: Set TextText: Characters Remaining: VAR(_NotesCharsRemaining)When you are done adding actions, the Notes Entry Page should look something like this in the Title Explorer.

Now you can run the title, open the Notes Entry Page, and watch the value of the Characters Remaining text block change as you type into the entry field. If you have not done so yet, you can download the finished version of the Students Notes Feature Example from the Trivantis Community.

Download Example