How To Use Select Box Xmpro App Designer
In this video, you’ll learn how to configure a select box 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
hi and welcome to another training video
from xmpro
today we will be looking at how to use
the selectbox component
as a prerequisite you should have
already gone through the video on how to
create and use data sources
if not then i recommend doing that first
the select box can be found in the basic
section of the blocks
to use a select box you will need to
give it a data source
this can either be a dynamic data source
or some static items
if you choose static items you can add
the items one by one
in the grid here
and if you choose dynamic data source
then you'll select
a data source from the page data
if you do this you'll need to assign
display expression
value and group by expression group by
is optional
the display expression is what you will
see for each item
and the value expression is what the
value of this
row will be if you don't choose a group
by expression
then the select box will not be grouped
if you do choose a group by expression
it will group it by
the column you choose
so let's see how this looks the first
select box has the two items that i
added
and the second select box is grouped and
has data coming from a data source
some other properties you can play with
are visible
which is self-explanatory styling mode
if you choose outlined it will have the
basic outline here if you choose
underlined then it will look like this
have a line underneath it
and if you choose filled then it will
have a gray background like that
placeholder will appear in the item
before you select a value
tooltip will show when you hover
and the clear button will show a button
if you have a
value which will clear the value
so you can see the placeholder if i
hover then there's the tooltip
and if i select a value then the clear
button appears on the right here
in behavior we have read only which will
create a dotted outline around it
and make it unable to be edited disabled
will also
make it unable to be edited and we'll
gray out the select box
if you check enable search then you will
be able to search by
typing inside the select box
if you choose accept custom value then
you'll be able to enter your own value
into the select box
and if you check spell check then it
will turn on the spell checker for any
entered values
value can be some static text so for
instance if i put 1 in this then it will
be the first value
or it can be dynamic
so some parameter or a variable
or come from the user properties
or if you add a parent data source
like what i'm going to do here
and i'll drag the item in and i can bind
the value to a column of the parent data
source
so it will take the value of the column
for every row
so if i go in here and you'll see that
this first item has
selected the value first because the
value of first
in the static items is one and these two
fields
have selected their fields already
because the parent data source has these
values
for each of these rows
you can also do validation and make it
required
also you can add a pattern for more
information on this
please see the video on validation
this has been how to use the select box
component
Last updated