Visual Workflow Text Area Character Counter

Question

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.

Answer 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]")

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!

<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>