as you add contacts to the application it becomes more difficult for the user to
find a specific contact
in this lesson we will change the order in which results are returned
and implement the filter that allows user to search for a particular contact
so we will do this in the contacts page and
the first thing as we will do is actually to change the order
in which the contacts are are returned from the database
and so this means that we need to change something here
in the Aggregate that fetches the Contacts from
the database and let me open up here the Aggregate
and as you can see we have here the results from the database
and what I would like to sort by the contact name so
let me select here. Let sort this from A to Z
and now we will have our contacts
in thsi order in our screen
okay so this will make it easier for the end-user to find the contact but
what makes it even easier is to have the possibility to search for a specific
contact
and to do this will need to add an input here
in the UI for the user to type in the contact name
so let's just do that and drag-and-drop any input here
right above the Table Records
and let me just complement this with
a button because we will need to send this information that the
user types
back to the server and let me label
the button 'Search' and
now let's fix these errors. We have an error here on the input because
we need to set a variable to hold the selected value so
to hold the value that the user types here in this
input. We will right-click here on the screen
and and a local variable. This variable will hold the value entered by the user
and it has a local scope. This means that we can use it
here in the UI
we can use it in the Preparation and we can also use it in
all the Screen Actions that the screen has. Okay
let me just rename the variable to
'SearchKeyword'. We're done
let me bind this this variable
to the input by filling-in the variable property
and select here 'SearchKeyword'. Now we still need to fix this
error here in the button and again I'm going to double-click to create the
action, the search action and bind it to this button
and well now we need to think a little bit
what we're going to do here in this search action
and actually to go over this, let me just go back here to the screen
and let's review
the life cycle of this page when we press the search button
when the user presses the search button this will trigger
a request back to the server that will execute
the search action and what we've seen in the previous lessons was that
these screen actions would redirect
the user to another page. But in this case I want to keep the user in the same
page I want to keep him
in the contacts page but filter the results that we have
on the screen and this means that I'm need to execute
I need to execute the Preparation on the screen
and actually this is what happens
when the Screen Action ends with the End node
that we have there by default. So when it reaches this
End node, the Preparation
will be executed, we have the Aggregate
in the Preparation that fetches the contacts from the database
let me just switch colors
it's on this Aggregate that we want to use
the search keyword and
with this search keyword we want to fetch that contact from the database
and then we will have the server-side rendering stage
where we are going to render the Table Records
one element at a time and once this is done
we are going to send the response back to the user's browser
to be rendered on the screen
now since we're going to use this information
the 'SearchKeyword', this is going to be used in the Preparation
we don't actually need to do anything
here in this Screen Action. We don't have to change
anything in this value, because once this is sent to the server
the typed now let's do that that the user types in here
Joana
and this value is sent
to the server it will be held here in this variable
and we don't need to change anything here because the variable will hold its
value
when it reaches the Preparation as well
okay so let's go back to Service Studio and implement
the filtering in the Aggregate
using this variable. So will need to go into the Preparation
and open the Aggregate
and left add a filter to our Aggregate
and what we want to check is
the contact name we wanted to match
the 'SearchKeyword'
okay so this will return
only one record in this case this is Alfred
you can use here the Test Values
to for instance let's its search for
Joana that we've been using in our examples
and this well this doesn't return Joana
and actually I I figured out why it doesn't returned Joana. Because
in my filter, here I am comparing
the contact name to be equal to the search keyword
now, Joana's name isn't only Joana, is Joana Rivera so
we don't have any results but we want to change this so that the user doesn't have
to type the whole name
so let's open here the condition and we will need to change here this
operator the equal to use something different
and we're going to use the Like operator
and is operated here the Like operator allows you to use
wild cards to search for a pattern
within these attributes
now the wild card that we're going to use here is a percentage
and this is just a special character that can be used in combination with the
Like operator
on filter conditions in our
Aggregate. It represents any character
that comes in this case before
my search keyword and I can also use it in the and
to add any character that appears
after my keyword, so basically what we're doing here is
we're finding the pattern on the contact name we're finding the pattern Joana
with
any character before and after that pattern
so this gives me the result that I want. Were done
let's just publish and we will use the debugger
so let me just add a break point here will use the debugger
to review the life cycle of the application
okay before we search let me just make sure that we have the debugger running
me go back here and
start the debugger
we will stop the execution in the search
action so let me go back here and let's search for Joana
and here we have we're stopped in the breakpoint
remember that we have a local variable that will hold the value
typed by the user so here the 'Locals'
there we have it, 'SearchKeyword' and the value that we typed so
let's step over and step over again
and step into and there we have it we are
executing the Preparation of the Contacts Screen
and the variable still holds
the value that the user typed in. So this is going to be used let's just step
over
and step over again it is going to be used in the Aggregate
and now if we look here in to the List
we are returning the contact
Joana Rivera and if we continue
we will see this in are application
that's it.