1

I've successfully implemented a character counter using js in a visualforce page.

I was hoping to use the same or similar functionality for text area fields in a flow embedded in a visualforce page, but can't seem to have any success.

I have implemented a validation on the flow field that limits to 255 that works fine. But I thought it'd be useful to let users know how much text they've entered vs. how much is allowed.

When I tried to put a formula... LEN({!field_name}) ...in the validation error message, the formula gave me zero. (There's clearly hundreds of characters in the field.)

Any help on a character counter for FLOW text area fields? Or even a decent workaround?

PS. I know very little about development, but enough to be dangerous.

  • Is your flow embedded in a Visualforce page? – cricketlang Oct 7 '15 at 18:33
  • @cricketlang Yes it is – BeckBeck Oct 7 '15 at 19:52
1

Sorry for the late reply on this. I've been super swamped at work.

The answer here is yes, Flows simply have a slightly different id than other input fields, but that's super easy to find if you just inspect the element in the browser.

I have no idea what library you use to count characters, but there is a generic one that i just used to test this available here.

To start, we need to find out what the field Id is by inspecting the rendered field in the browser. Here you can see my field ends with Requester_First_Name.input so I'll use that to select my field with jquery like so: $("[id$=Requester_First_Name.input]")

enter image description here

Now i just have to throw in the library as a Static Resource, import it into the visualforce page wrapping the Flow, configure it how you want, and enjoy the results! If you use the library I referenced, you can see some additional options you can set as desired, but here i just set a max and warning.

Let us know how it goes!

enter image description here

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="{!URLFOR($Resource.charCounter)}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){


        $("[id$=Requester_First_Name.input]").jqEasyCounter({
            'maxChars': 10,
            'maxCharsWarning': 5
        });


});
</script>
  • This worked perfectly! I had actually already put the counter in my org but couldn't figure out how to use it. Thanks so much! – BeckBeck Oct 12 '15 at 20:36
  • @BeckBeck Did you just ping me on another counter question? I saw a notification come through but i cant find it anymore. – cricketlang Jan 11 '16 at 18:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.