How To Use Text Area - XMPRO App Designer Toolbox
In this video, you’ll learn how to use the text area block in the XMPRO App Designer.
Need help with creating your XMPRO apps? Send an email to support@xmpro.com
Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.
Transcript
welcome to another training video from
XM Pro today we will look at the text
area control in app designer and how to
use it so in the tool box you will find
that there is a control called text area
you would use this when you want to
capture an input from the user
which is more than one lung this control
is very similar to the text box but the
basic difference is that you're able to
capture multi-line input from the user
now how to use it is very easy you
simply have to drag it across all I'll
put a field here and then drag a new
texture here inside it and that's it now
you have a text area control if you look
at its configuration options starting
with appearance we have a few options
like visible which basically just says
if the control should be visible or not
then there is minimum height and maximum
height that is if you want to give it
some height like 100 or a minimum height
of 50 what that will do is that it will
always have if that amount of height
minimum height mean that will never be
smaller than that and maximum height
means no matter how much content it has
its height will not grow beyond 100
pixels if it has more content it will
display a scroll bar but the hike will
stay static similarly we have outlining
mode where you have three options and
you would have noticed that this adding
mode option is there with many of our
controls basically what it does is if I
take the gridlines off from here you
will be able to quickly see the
difference the star this control is
stalled without line the next one is
underlined so that is just a stall and
then the last one is using the filled
stall and you can see three different
styles of the control being rendered
and then if we continue huh you will see
we have an option to put placeholder
that is if that if the control is empty
and there is no text inside it
um this placeholder will be displayed
and you can see that it is displaying it
on that then we have a tooltip which is
very obvious that when I use it will
hover over the control the texan built
it will be displayed then in behavior we
have an option to specify max length
which is basically number of characters
user should be allowed to enter in this
text area and if they use it tries to
type more than that um he won't be
allowed lastly we have standard options
like read-only and disabled and to
finish it off we have a spell check
which basically tells the browser if the
text that is entered inside should be
spell checked or not now how does this
look so if I save my app and launch it
you will be able to see those three
stalls also the text being displayed in
them and for example and this one you
you see that there's no text but the
placeholder is being displayed if I try
to type in you we had put a 50 character
limit you will see that it's not letting
me type more than that now if I go back
I only provided static values for these
controls at the moment and you can see
they have been specified there but if I
wanted to specify a dynamic value I can
do that by first of all I will have to
put the control inside a container which
has a data source attached to it for
example I have this container here a
data repeater and it has a data source
attached any control that is inside that
container can use a dynamic value and to
do that you just have to change the
value
option here - dynamic and then you can
bind it to any of the options that are
being sent to you by your data source
for example if I want to bind it to
history I can do that and then when this
app will run it will actually display
the value coming from my data source so
that was a quick video on how to use
textarea control in app designer thank
you for watching
Last updated