Character count - help

How-to Discussions
1

Hey guys,

In the profile section for our users we have them entering a description of themselves. I currently have it set to a 200 character max length. For a good user experience, I want to include a count down of how many characters they have left as they type (max length - current length).

What’s the best way to put this together? Could you guys help me with this? I can’t seem to get something like this working, but it seems pretty simple.

Thanks so much! - Ryan

2 
	<ClientPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var inTxt = Observable("");
			count = inTxt.map(function(e){return 200 - e.length;});
			module.exports = {inTxt, count}
		</JavaScript>
		<TextBox Dock="Top" Value="{inTxt}"/>
		<Text Value="Remaining chars: {count}"/>
	</ClientPanel>
3

You are the man! Perfect.

So I changed it around a bit as I actually have a pre-populated description that is being pulled from the database, but the user can edit. I then pass Description = “{description}” in my ux on actual setting page which pulls the description from the server. Just in case anyone is doing something similar, my code looks like this:

<Panel ux:Class="CharacterCount">
	<string ux:Property="Description" />
	<JavaScript>
	    var Observable = require("FuseJS/Observable");
	    var Value = this.Description.map(function(x){
	    	return 180 - x.length;
	    });

	    module.exports = {
	    	Value: Value
	    }
	</JavaScript>
	<Text Value="{Value}" FontSize="12" />
</Panel>

My question now is… how would I could I change the font color to become red when the character count is less than 20?

if (Value.value < 20){
    Value.fontcolor("Red");
}

Something that like clearly doesn’t work.

4

Like this:

 var color = Value.map(function(c) { return c > 20 ? "Red" : "Blue"; });

Then you databind that to Color on the text