Lectora Advanced: Adding a Character Counter to an Entry Field

blog_LectoraAdvanced_typelimit

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.

entryfieldprops

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.

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.

charsRemainField

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.

varManager-withCharsRemaining

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: Show
Action: Reset Form
Target: Form_1

Since 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: Show
Action: Modify Variable
Target: _NoteCharsRemaining
                  Type: Set Equal To
                  Value: 250

After 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 Key
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Subtract from Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 1

As 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: Keystroke
Key: Backspace
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 2
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: Delete
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 2
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: LeftArrow
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: RightArrow
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: UpArrow
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: DownArrow
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: Home
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: End
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: Insert
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: PageUp
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

Action 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: Keystroke
Key: PageDown
Action: Modify Variable
Target: _NoteCharsRemaining
Type: Add to Variable
Value: 1
Conditions: All conditions must be true
Variable: _NoteCharsRemaining
Relationship: Greater Than Or Equal
Value: 0
                                                      ———-
Variable: _NoteCharsRemaining
Relationship: Less Than
Value: 250

And 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 Key
Action: Change Contents
Target: Characters Remaining
Value: Set Text
Text: Characters Remaining: VAR(_NotesCharsRemaining)

When you are done adding actions, the Notes Entry Page should look something like this in the Title Explorer.

NotesEntryPageTE

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.