How To Use The Select Box - XMPRO App Designer Toolbox

In this video, you’ll learn how to use the 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

welcome to another training video from

mixin bro today we will be looking at

the control slick box and how to use an

app designer so as you can see I have a

black page here and if I want to add a

select box I can find it under the basic

controls called select box and to add it

I simply can drag it but let me add a

layout control first like that and in

there I will add my select box so as you

know a select box is just a drop-down

which shows the user some options and

which one can make a selection from now

to configure it we have a few options in

block properties starting with

appearance we have a standard option for

to control the visibility of the control

and then we have the standard styling

option which has been explained in many

of the other videos then we have a have

a placeholder which basically says if no

value is specified what should be the

background over the background text or

the placeholder text that should that

should be displayed which can be simply

something like that

and then if no value is specified you

will see that tooltip is

self-explanatory

you just add the text you want to be

displayed when the user hovers over the

control show clear button basically

shows a button which a user can use to

clear the value that he has selected

then if you go to behavior we have

standard options like read-only and

disabled and then we have a spell check

option which basically tells the browser

if the spell check should be enabled or

not enabled on this control now in order

to configure this further we need to

give it some data source as you know a

drop-down is supposed to show a list of

items that are user concern

so I will go in datasource and for this

control we have two options either we

can choose static items or a dynamic

data source adaiah source comes from an

outside third party system why they're

connected but static items can be

defined straight away over here I'll do

that for an example let's say we want to

capture asset type which can be fixed

and fixed can let's say have a value of

1 or it can be movable which will have a

value of 2 so these are the items that I

have defined and they will be displayed

on runtime as a drop-down list so I can

save that much and one last thing I

would like to do is let's say I want to

give it a default value of moveable

which was number 2 so I'll give it that

value and now when we launch this app we

will see that there I have a drop-down

which has two values that can be

selected as we defined and the default

value was moveable I have my Clear

button showing up which I can use to

clear the control and then it will

display my placeholder now let's go back

and look at how we can assign this

control a dynamic data source I'll use

the one I have for example the furnace

one and that's it it has a valid air

source but when you use a dynamic data

source you also need to come in and

define out of that data source

what column or what item should be

displayed as the as the display

expression so basically the data source

might be sending you five columns but

you don't want to display all all five

of them in the control so I can choose

that one name to be displayed and the

value which should be captured should be

the corresponding asset ID so once I do

that and I launch my app

it will go ahead and load that from the

third-party data source the list of

items that it should display and then

you can see that it is displaying the

names but in the background it will be

storing the asset ID and this is how you

bind the control with an external data

source lastly if this control was part

of a data source bound container for

example this container which I have

given some data source to I can then go

ahead and bind its value to a dynamic

item which is coming from my data source

and then it will take the value that is

sent by the live external source so this

is how you use a select box in app

designer thank you so much for watching