Prev
Next
Forums User Experience Lawson Design Studio

Dynamic Text Counter in Design Studio

 5 Replies
 1 Subscribed to this topic
 12 Subscribed to this forum
Sort:
Author
Messages
keenaf
New Member
Posts: 1
New Member
11/18/2011 7:59 PM
    Hello I would like to dynamically count and display the amount of characters available/left to enter in a textbox with a character limit of 240.  Currently I can only do this with OnBlue and OnFocus which only updates once the user clicks away from the textbox.  See code and screenshot attached.  Additionally I've added a sceenshot of the textbox and display I'm modifying.

    Example of what I'm trying to do.

    http://www.plus2net.com/j...textarea-counter.php

    Code:

    function TEXTAREA_OnBlur(id)
    {
     if(id == "question1_response")
     {
     var vres1text = lawForm.getElement('_l384').value;
     var v1 = lawForm.getElement("_l381",0);
      if(vres1text.length > 240)
      {
      v1.focus();
      vjustalert = "You have exceeded the maximum response length";
             vjustalert += " of 240 characters for Response #1. Please reduce response and/or";
             vjustalert += " use the Additional Information box for more space.";
       alert(vjustalert);
      }
     var vres1_textcount = 240 - vres1text.length;
      lawForm.setFormValue("text1_count",vres1_textcount,0);
     }
    Randy Jacoy
    Veteran Member
    Posts: 46
    Veteran Member
    2/21/2012 2:56 PM
      Hi keenaf,

      Not sure if you've found a solution but this is what I did:

      In your Design Studio form you should have two fields: a text area (or text box) that contains the text with the length restriction, and a label field to display the characters remaining.  The label should initially be blank.  You can set up a keystroke watcher as described below.

      Step 1:

      Add the following javascript function to your form.  In my case I've placed it in a javascript file (so I can use it in multiple forms) and I include the .js file in the form.  If it's just one form than you can just add it directly to the script area of your form:

      function limitMessageLength(txtField,msgField,maxLength)
      {
      /*
      This routine is fired each time a character is typed into the text message box.  It will display the number of characters remaining in a label. 

            Calling program Usage: limitMessageLength("_l45","_l84","60");
            Call it once in the FORM_OnInit() function.
                
            txtField: This is the id of the textArea field where the message is entered.
            msgField: This is the if of the field where you display the "characters remaining" message.
            maxLength: This is the maximum number of characters that can be entered in the txtField.

      */

       var el = document.getElementById(txtField); // Get an instance of the message text area field.
       var charsUsed = document.getElementById(msgField); // Get an instance of the characters used field.
       
       el.onkeyup = function() {
          var textLength = el.value.length;  // See how many characters have been typed in the field.
          var charsRemaining = maxLength - textLength;
         
          if (charsRemaining < 0) {
             el.value = el.value.substring(0,maxLength);
             charsUsed.style.color = "red";
             charsUsed.innerText = "Maximum length reached.";
          } else {
             charsUsed.style.color = "#666666";  // Dark Gray color.
             charsUsed.innerText = charsRemaining + " characters remaining.";
          }
        };
      }

      The above javascript sets up a keystroke watcher for the txtField you pass into it.

      Step 2:

      Now, in your FORM_OnInit() method, add the following call to the keystroke watcher.

          /* The javascript for this next function is located in limitMessageLength.js.  It will limit the number of characters entered in the text area to 60.  Once the user starts typing the textarea, a label field below the textarea will indicate the number of characters remaining.

              "_l45" is the message text area field.
              "_l84" is the characters used field.
              "60" is the maximum characters that can be entered.
          */

          limitMessageLength("_l45","_l84","60"); // Set up the keystroke watcher for the message text box.

      That's all there is to it.  Once the user starts typing in the text area the "xx characters remaining" message will display and count down to 0 as the user types.  You can add keystroke watchers for multiple fields in the same form.  Just add one limitMessageLength() call for each field you want to limit in the FORM_OnInit() method.

      Hope this helps!

      AlexW
      Posts: 3
      2/12/2015 2:51 PM
        Hi Randy, First thank your for your code contribution. The code seems simple enough and I've implemented on LSF 9.0.1.11. My script fails at the point of the definition of the onkeyup function.
        Maybe it's a simple syntax mistake? -or- has anybody else doing this and is willing to contribute to this thread.

        /*
        function limitMessageLength(txtField, msgField, maxLength)
        {
        alert(txtField);
        var el = document.getElementById(txtField);
        alert(msgField);
        var charsUsed = document.getElementById(msgField);
        alert(maxLength);
        el.onkeyup = function() {
        alert("E");
        var textLength = el.value.length;
        alert("F");
        var charsRemaining = maxLength - textLength;

        if (charsRemaining < 0)
        {
        el.value = el.value.substring(0,maxLength);
        charsUsed.innerText = "Max length reached!";
        }
        else
        {
        charsUsed.innerText = charsRemaining + " characters remaining.";
        }
        };
        alert("J");
        }
        */
        Randy Jacoy
        Veteran Member
        Posts: 46
        Veteran Member
        2/12/2015 3:19 PM
          Alex,

          Can you show me how you are calling the function in your FORM_OnInit() method?

          Thanks,
          Randy
          AlexW
          Posts: 3
          2/12/2015 4:36 PM
            l164 is a textarea object l186 is a label object 

            
function FORM_OnInit()
{
limitMessageLength("_l164", "_l186", "60");
}



            Thanks!
            Randy Jacoy
            Veteran Member
            Posts: 46
            Veteran Member
            2/12/2015 5:00 PM

              Alex,

              Your syntax looks correct.  The only thing that I can think of is that you may not be referencing the correct field number.  For example, here is my call in the Form_OnInit() function:

                  limitMessageLength("_l45","_l84","850","_l89");

              And here is the first field I am referencing in the first parameter (the textarea).  (You can see the fields when you set your view to source):

              fld border="1" col="8" color="" font="font-family:arial;font-style:normal;font-size:8pt;font-weight:normal;" height="2" id="textarea1" nbr="_l45" nm="" overflow="auto" par="TF0-0" readonly="false" row="1" tp="textArea" width="20" wrap="on"/

              I notice your first parameter is "_l164".  Are you sure you don't have an extra "1" in there?  Also, make sure that is a lower case "L" right after the underscore rather than a number 1.

              Thanks,

              Randy