Data Binding in Form Inputs
 Use Combo Boxes to Select From a List
This lesson is part of the Developer Online Class for OutSystems 9 course.

in this lesson we'll see how to allow users to
select a value from a list and we will do this by using
combo boxes the first thing will is to
again go back here into the Data tab and we'll create a new
entity this will be a static
and it will be that categories of our products
and we will add few records here
we want to have Books
Music and one last one
Let me just add here
the entity to our
entity diagram and these will be
a category of a product so again we will need to
add new attribute to the product which will be
that CategoryId and
let's make sure these changes are sent to the database
and for that we will publish okay
and let's go back into the ProductDetail so that we can
edit this new attribute and what we'll do
let me just close here this pane we want to
add the category here to the form so again
we add a container and a label
this'll be
the category and
as I said in the beginning we want to edit
we want to let the user select this category from a list of values
and for that we will use we will use a combo box widget
and the combo box widget is a relatively complex widget
it has many patterns of usage we will show you
one on these patterns, the most common one, and you can find for more information
about other patterns
in the reference help of this widget so
what we want to do here is to set
this property here the Source Entity
and and what we want to say is that
this combo box will list
categories so we will select here the Category entity
now by setting this property
the Source Entity the platform will
fetch all the records of this entity from the database
for you, you don't have to do any of this, and it will
populate this combo box with
those records and now that we've said that
the combo box will have categories
we will need to fill in the variable property
what happens here in the combo box is that
the values that you show here in the combo box
like you see here, Iet me just go into the preview mode
so here we will see the books, the movies, the music and so on
these values are the ones that the user sees
but the value that we want to store in the database
is actually let me go back here into the
data tab is actually
a Category Identifier this is the value that we want to store
this means that variable property of the combo box
needs to be a Category Identifier
and we will bind this again to the record
property of the form and we will choose from the product
we will choose the category identifier
so in the interface the user will see
the list of values here it will show the label
of our category static entity and when
a category is selected the value that is stored in the variable
is actually the identifier of
that record now
this populates the combo box with all the records from the category
but since we defined the CategoryId as a non mandatory field
we want to allow the user to
leave this combo box
with a blank value so we need to add
an extra value to this combo box and we will do this
we will do this using here the Special List
this is a list of options that appear
on top of the ones we already have here that come from the database
and when this value is selected let me just put here
special value when this None
is selected it means that the variable that we have here
will be set with NullIdentifier
okay so this is done
let me go back now into the Products screen
and let me add here
and new filter so that we can filter here the products
based on category so let me add here a
container to add this new filter and we want to filter by category
and let me add a combo box here
for doing that and again here in the combo box we want to select
category so choose here the Source Entity
to be Category we will need a variable to store
to store this value and let's create a new
local variable this will be the CategoryId
and let's bind this variable to
the combo box and again
like we did for the form we want to use here the special value
to be able to see all
categories all products from all categories
in our list okay and
let's use this CategoryId in
our GetProducts aggregate that we have in the preparation
let's add a new filter
and remember when we choose the special value the CategoryId
will be NullIdentifier so what we want here
is to test either the CategoryId
is null
or the Product
CategoryId must match
the one the user selected so
again here this variable
were set to go let's publish and test
adding categories to our products and filtering our product list by category
okay again let's go back into the products and let's edit here
some of these products let's say that the Dell screen this is
Electronics. Save.
and Finding Nemo this is
Movies and that
Harry Potter this is Books
and let's set a couple of
other ones Logitech headset this is
Electronics and Mac Book
air this is also Electronics okay and
now let's test our filter let's say that we want to show
only Books and there we have it
let's say now that you want to do show all Electronics
products and there we have it and
let's say that we want to see Products from all categories
there we have it. That's it.