Home Advanced Request Offering

Possible to Add a Character Countdown to RO fields?

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.


  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_KeithJD_Keith Customer IT Monkey ✭
    @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_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    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. :smile:

    If you have done this, please share your code here to help the community.
  • Brett_MoffettBrett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭
    This is fantastic and super simple.

    Thanks @Konstantin_Slavin-Bo for sharing your code.  B)
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭
    edited February 2020
    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_doylejohn_doyle Cireson Support Ninja IT Monkey ✭✭✭✭

    Nice work there, but I feel I should point out that the SingleLineEntry tag was contributed to the toolbox by @Jeff_Lang
  • Konstantin_Slavin-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭

    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_MiklianPeter_Miklian Customer Advanced IT Monkey ✭✭✭

    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-BoKonstantin_Slavin-Bo Customer Ninja IT Monkey ✭✭✭✭

    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.

Sign In or Register to comment.