Question (and answer) on styling and input fields

I received the following question about my habit tracking app and thought it would be useful to post the answer here in case others were also interested in the answer.

Here’s the question …

I’m making an app of my own and I was looking at other apps for inspiration, your app is very beautiful and intuitive. I was wondering how you got your app search fields to be the style that they are in now and how you got a toast of “character limit exceed” when the person typed in too many characters into the input field.

Answer 1: To style the search field like this …

Set the background to a darker color than the page background.

And set the border color to the same color as the page background.

image

Answer 2: To set a max char limit on an input field …

On the component onChange event, set an if condition on the length of the field,

LENGTH(pageVars.userProfile.displayName) > 32

and if true set variable,

TRUNCATE(TRIM_WHITESPACE(pageVars.userProfile.displayName), 32)

and display Toast message.