Computed expression on TextInput?

How-to Discussions
1

Hi I’m trying to add a computed expression on TextInput

js:

	var searchinput = Observable("");

	searchinputLogger = function(){
		debug_log(searchinput.value);
	};
	searchinput.addSubscriber(searchinputLogger);

	module.exports = {
		'searchinput':searchinput,
	}

ux:

<TextInput PlaceholderText="search..." Value="{= toLower({searchinput})}" Alignment="Center" FontSize="20" />

what I’m trying to do is making the user input lowercase (force capital to lowercase) but this doesn’t seem to work

ps this works:
<TextInput Value="{= toLower(HELLO)}!" Alignment="Center" />

2

Hey Kevin,

it seems there’s a bit of misunderstanding on when you should use UX expressions and when you have to do something else. Let me try to break it down for you.

UX expression string functions are useful to perform some user-facing string manipulation on relatively static things - stuff that the user does not interact directly with. See in the example below how I have used them to change a label and a value.

What you want to do is, instead, something much more complicated. It is a user input validation / manipulation in place. Meaning that you need to change the actual data-bound value of the TextInput, not just its visual representation. And for that you need to use a bit more involved approach, like the one I’ve included in the same example below.

<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");

    var someLabel = "LaBeL";
    var someValue = "sOmE vAlUe";

    var searchinput = Observable("");
    searchinput.onValueChanged(module, function(x) {
        var lowered = x.toLowerCase();
        // to avoid a feedback loop, only change the value when it differs,
        // because when we change the searchinput.value to the lowered string,
        // it triggers this .onValueChanged again, but this time with the
        // already-lowered value
        if (searchinput.value !== lowered) {
            searchinput.value = lowered;
        }
    });

    module.exports = {
        searchinput: searchinput,
        someLabel: someLabel,
        someValue: someValue
    }
    </JavaScript>
    <StackPanel Orientation="Horizontal" Alignment="TopCenter" ItemSpacing="8" Margin="0,16,0,0">
        <Text Value="{= toUpper({someLabel})}" />
        <Text Value="{= toLower({someValue})}" />
    </StackPanel>
    <TextInput PlaceholderText="search..." Value="{searchinput}" Alignment="Center" FontSize="20" />
</App>

Hope this helps!

3

Works great thanks :smiley: