Data Binding in Form Inputs
Use Input Fields for Text
This lesson is part of the Developer Online Class for OutSystems 9 course.

in this lesson we will see how to use input widgets in detail
we'll start by creating screens to list and edit products
so let's go ahead and add a new screen here
to our application and this will be the Products screen
don't forget to tick the Anonymous role
and let's open the Products screen
and let's add our Products screen to the menu so let me go here back to
desktop mode add the Products screen
there and we're done
and let's add a title: Products
and the table records here into the flow
let's drag and drop the
entity here and again we will need to fetch the products from the database
in this case I'm going to use here another shortcut to do this
in the table records we will need to bind
the aggregate in the preparation to this Source Record List
and I'm going to use here this suggestion to
create a new aggregate to fetch the products
okay let me just show you that
the aggregate was created here in the preparation there you have it
now we will have here a new screen again and this time
it will be the ProductDetail
and again don't forget
to tick the anonymous role we already know that the ProductDetail will need
an input parameter this will be the ProductId
and let me just
open here the screen we will need to
fetch this product from the database in the preparation
so again here use the shortcut to drag and drop the input parameter
and create the aggregate here in the flow
and lets get back to the screen
add a title to our page so
drag-and-drop an If widget here
the condition is when our products
is when our ProductId is null
then we're creating a
new product otherwise we will show
the product name here in the title
and we'll get the product name from the aggregate in the preparation
here there and let's
add a form to the page and bind it
bind it to the
current Property of the aggregate and
and now instead of dragging and dropping
the whole entity here
as we did before I'm going to do this step by step so
every time we drag-and-drop and entity here
then we see that we have a label and an input
for each attribute that we have in the entity so
I'm going to to do that manually so drag and drop
a container here first to hold the label
for this attribute and the first attribute of the product
is actually the name so let me
change here the label this will be the name
of the product and now I'll drag and drop
the input widget here into the form
now you'll notice that we have an error and we have an error here
in the input and this is basically because we need to set
we need to set the variable property since inputs cannot store data by
you need to specify which variable will store the data
sent by the end user and in this case
since we have the input inside the form we're going to bind this property
to the form record property
which has already a product there the data type definition of this
of this record is actually a product entity
and we can bind this input to
name attribute of the product entity
now we fixed the error but it seems that
it still has and issue here
and what what we see here it's a warning that indicates that
the mandatory let me show you here the mandatory property
of the input doesn't match the Mandatory property
the Is Mandatory property of the attribute in the entity
so to fix this let me go here back to the input and set it to true
we will see later ahead how to deal with these validations
for now let me just add the remaining attributes here to the form so
a Description
the Price and the QuantityInStock
when you drag and drop an attribute from the entity
into the form the variable
the variable property and the mandatory property
are set automatically based on the definitions that we have in the entity
so if we go here for instance on the Price
You'll notice that this input was automatically bound
to the Price attribute in the Product entity
and the Mandatory property was set to true because the Price
is a mandatory attribute in the entity you will also notice that
the input size here is different
and this is basically because of the data type
that we have for this attributes so a price doesn't need
an input as big as the description and so on
so the platform takes this information into consideration when
creating the inputs here in the screen now we need to have a button to send
the information back to the server let's add it
after the inputs and let's call it Save
double click to create the action and here in the Save
action we will use the CreateOrUpdateProduct
and here the information that we're going to send to the database which is
this source attribute this source parameter
we need to fill in for this action and we will get this information
from the record property of the form Remember that we bound the input
widgets to this variable here so this is the variable that holds
the values that the end user typed in
so here use the record property
to send it to the database and now
once this is done redirect the user back
to the Products screen now
let's go back into the Products screen
and lets add a couple of links here to the ProductDetail
so one here to link to
the ProductDetail and this will be to edit product
so we need the fill in here the ProducId we will get it from the table records
this one here and another one here
to create a new product
and in this case the ProductId will be null
okay what I want to do next with our application is to
able the end users to filter this
list of products so that they are able to search for specific product
and to do this I'll add an input here
to my screen right before table records
there and on this... and again this input
we will need to bind it to a variable now in this case
we don't have the input inside a form so we don't have the form's
record property to bind this input to
we will need to create a local variable
to store that value and I'll call it
SearchKeyword and now I need to bind this variable
to this input and I will do that by dragging and dropping
the variable here on top of the input
there now we already have an input let me just fill in here this
prompt and this basically is a text that is displayed
in the input widget when the input widget is empty
usually this text guides the user on what
he needs to type in and in this case I want the user to be able to search
by name or description
there and let's add a button here
to send this information back to the server
let's call it search
double click and remember the life cycle of the page when we
when the press that button the information will be stored here
in this parable we actually don't need to do anything here in this
this screen action because the preparation will be executed
once the the screen action ends and we will
fetch the products from the database now it's here
in this aggregate that I want to use this
variable to filter the result so let's open here the aggregate
let's add a filter to it
and what I wanted to test is that
in the product name I will find
that search keyword and this is something like this
you can also use auto complete so search keyword
press control space for the auto complete and
this means that I want to return all the products where
I'll find the search keyword anywhere in the name
or also
on the product's description
so also on the product's description I'll find
the same pattern the keyword anywhere within that product description
and we can actually let me just close here this condition
we can actually go here into the test values and
search for instance for USB let me click here outside
and there we have it these are the results
that we're going to get from the database when we search for
this keyword okay so it looks like
we're done let's
publish and test our filter and our inputs
in the browser okay so here we have our application lets go into the products
and here we have our products
let's search for USB as we did in the development environment
search there you have it and now we can also go into
the Dell mouse for instance and let's edit the price
and there we have it that's it