Possible to Add a Character Countdown to RO fields?

JD_Keith

We've encountered an issue where users (mostly technical) input > 4000 characters into a field mapped to the Description field of an Incident RO's template and when that happens, the entire description gets lost.  Being that we are unable to increase the maximum character length (not recommended), can we display a character countdown along the RO's text box to ensure the end user knows that they only have a set amount of characters?

Thanks for any help.
JD

Brian_Wiest

When creating your RO 
Configure Prompt Tab
On the line item for the string choose configure
Place a Length Constraints by checking Limit string length
I perfer to keep each string under 1000 so when I use the Advanced offering builder and perform multiple mapping my results do not exceed the 4000 limit. 
My form directions advise people to use attachments for log files etc.

JD_Keith

@Brian_Wiest thanks for the information, however, what I would like to accomplish to add the "4000 Characters Remaining" (exactly how it is in the Action Log comments section) to fields on RO's.  I have placed constraints, but the end user's inputted description will still get cut off after the maximum allowed characters are reached.  I would just like to notify the end user that they have reached their allotted characters somehow.

Brett_Moffett

Yes, this is possible with some Java Script code added to the Custom.JS file.

What we need now is someone out there who has already tackled this issue to share their code.

If you have done this, please share your code here to help the community.

Konstantin_Slavin-Bo

Just saw this questions, and thought it was a good idea, so I made a simple implementation:

// Add char counter to text areas in ROs
$(document).ready(function (){
    if (document.URL.indexOf("ServiceCatalog/RequestOffering") === -1) { // Only worry about RO forms
        return; 
    }

    // Get all text boxes
    var textAreas = $('[id^=textArea]');

    for (var i = 0; i < textAreas.length; i++) {

      // We need both obj and element
      var thisTextAreaObj = $(textAreas[i]);
      var thisTextAreaElm = textAreas[i];
      var maxLength = thisTextAreaElm.maxLength;

      // We are only interested in text boxes with a defined max length
      if(maxLength != -1) {

        // Create a div for holding the remaing char count
        thisTextAreaObj.after('<div id="charCountOf'+thisTextAreaElm.id+'">'+maxLength+'</div>');

        // Listen in on the key up event
        thisTextAreaObj.on('keyup', function() {
          // Update text in div
          $('#charCountOf' + this.id).text(this.maxLength - this.value.length);
        });
      }
    }
});

It will look like this:


Put the code somewhere in your custom.js and remember to set a max length for your text box in the RO builder.

Brett_Moffett

AWESOME!
This is fantastic and super simple.

Thanks @Konstantin_Slavin-Bo for sharing your code. 

Konstantin_Slavin-Bo

After implementing this in our own environment, I have changed the if-clause to be if(maxLength > 199) as I figured we don't need the counter on one-line prompts. It also cleans the ROs up a bit, so there's only counters on text boxes which are more than 1 line.

Konstantin_Slavin-Bo

I've just updated the code below with a small but (for us very) useful change. Inspired by (stolen from) @john_doyle's @Jeff_Lang's (SORRY!) "SingleLineEntry" tag in the ROToolbox, I've added the same code to this solution, when the text prompt is 199 chars or less (1 line). So when you have a 1 line prompt, it will disable the Enter button, and the users will not be able to press enter and make a line break in that prompt, which can cause all kinds of havoc (or at least ugly titles). Code is below, add it to your custom.js:

// Add char counter to text fields on ROs
$(document).ready(function (){
  if (document.URL.indexOf("ServiceCatalog/RequestOffering") > -1) { // Only worry about RO forms
    // Get all text boxes
    var textAreas = $('[id^=textArea]');

    for (var i = 0; i < textAreas.length; i++) {

      // We need both obj and element
      var thisTextAreaObj = $(textAreas[i]);
      var thisTextAreaElm = textAreas[i];
      var maxLength = thisTextAreaElm.maxLength;

      // Only add counter to > 1-line prompts
      if(maxLength > 199) {

        // Create a div for holding the remaing char count
        thisTextAreaObj.after('<div id="charCountOf'+thisTextAreaElm.id+'" align="right">'+maxLength+'</div>');

        // Listen in on the key up event
        thisTextAreaObj.on('keyup', function() {
          // Update text in div
          $('#charCountOf' + this.id).text(this.maxLength - this.value.length);
        });
      }

      // If the lenght is less than 199, we have a single line text prompt, so
      // disable Enter key event
      else if(maxLength > -1) {
        thisTextAreaObj.keydown(function(event){if(event.which == 13 ){event.preventDefault();}}).keyup(function(event){if(event.which == 13 ){event.preventDefault();}});
      }
    }
  }
}

Edit: Corrected attribution - Sorry Jeff!
Edit 2: Added an extra check, to ensure that the prompt is actually configured to be a one-line prompt, before disabling line breaks.

john_doyle

@Konstantin_Slavin-Bo

Nice work there, but I feel I should point out that the SingleLineEntry tag was contributed to the toolbox by @Jeff_Lang

Konstantin_Slavin-Bo

john_doyle said:

@Konstantin_Slavin-Bo

Nice work there, but I feel I should point out that the SingleLineEntry tag was contributed to the toolbox by @Jeff_Lang

Oh darn! I've edited my post, thanks for the correction.

Peter_Miklian

I returned to this old thread and it seems that most of the code disappeared:

@Konstantin_Slavin-Bo could you please re-add it? And if it was not you who removed it, maybe let someone from Cireson Community portal know about this issue of removing text/code. Thanks.

Konstantin_Slavin-Bo

Hi @Peter_Miklian,

Yeah, it seems like code blocks are being messed up in some or all threads here. @john_doyle, are ya'll aware of the issue? There's a lot of code disappearing.

I've attached the code to this post. I've added a small change since last time, which treats any text box without a set max length as a 1-line, 199 max prompt, but you can comment out line 16 & 17, if you don't want that.

custom_charCountdown.js.txt