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 [e-mail]

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