Tip:
Highlight text to annotate it
X
In this lesson we will see how to use the input widgets in detail,
and I hope to answer the lot of questions you have in your mind right now.
So let's start by creating a Product List Page, Product List Screen in the Purchase
Management Application, Product List. And let's set this to anonymous,
double click the Product List to change it. Let me just type a title here Product
List and drag and drop the product list to the menu here on the top.
Let's create the Table Record's and the table record's is going to list products,
so I am going to drop the product entity on to the table records and
create the query and the preparation to get the data. I will do it with this shortcut
new query get products and notice how the query was created inside the preparation
automatically. All right, the list is done. Let's go back to the main flow and
create an Edit Page, Edit, set it as anonymous and this page needs an Input
Parameter, Product ID. But before the title we are going to create the preparation
to get the product by Product ID from the database. Drag and drop the parameter and
create the query. Going back to the edit page and create the title.
And this title will be if the ID is null identifier, new product.
If not then we will have to say something like edit and then the name of the
product. Let me double click the expression and get that product name from the GetProductById
query. And here is the product name. Okay. Now we are missing the
condition in the If right there. And this condition will basically check if product
ID equals null. If edit was null, then the first branch, the true branch will be
displayed. If not the second branch, the false branch will be displayed.
Now we'll need to go back to the List Page so just we don't forget to create a link
here on top of the product name to link to the Product Edit page of course.
Let's set the parameter right there with the product table list current Product ID,
product table and don't forget we are selecting from the table records and add a new
link here to create a new product. Right click, link to the Product Edit.
All right. And it seems the Product ID is mandatory, but it shouldn't be.
All right. Let's go back to the Edit Page and finish it real quick.
Let me drag and drop the edit record and create the first field,
the product name field. Then I'll do it manually. So I will type name and I need
also to set the Source Record that will be the output of the query.
The Source Record will be a product from the query. And now we need an input for the
user to type the product name. I'll drag the input and notice how the variable
property is read and it means that we need to fill it in with something and this
variable property is the input variable and an input always needs a variable to
store the typed text. In this case let me double click on it.
I'll select the variable behind the input. This is the Edit Records implicit
variable. The edit record provides this variable so we can use it to later send the
record to the database and I
need to bind it to the name. Now notice how true changes warning us about the fact
that this property mandatory here is not set, we need to set it.
Because in the database the name is mandatory. All right. We will talk abort Field
Validation later. Let's set the other fields directly from the database: description
and price and quantity in stock. Both the variable and the mandatory property were
set automatically and it's important to know that although we are using different
data types for text, integer, decimal, date, time, email and phone number are
through get service studio will create these inputs. Okay, let's finalize this by
adding a save button, set the name of the button to save, create the action that
will create or update the product based on the edit record's implicit variable,
the record variable. Okay, let's link this to the list page main flow product list,
okay, and we get to go. Let's go to the List Page and in the Product List Page we
will add a filter. A filter that will allow users to search by name and description.
So let's do just that drag and drop a table,
just before the table records and this is the standard HTML table and let me set it
well with two and three columns should be enough. I'll need an input to search and
we want to search, well first of all let me set the variable because I don't like to
have the red border here so let me just right click and add a local variable,
a local variable that I'll label its search keyword. Let me bind it,
double click, search keyword is bound. Let me type a prompt texts
to give some feedback to the user, type name or description. Note how the
text is here, greyed out. Now we need a button to trigger this search.
I'll edit here and I'll label this search. Double click the button to create the
action but before that let me just set the submit method to Ajax submit and we will
detail this in a second, but all we want to do is to refresh a part of the page
after the action gets executed that's why Ajax submit is used.
Double click, the action is there. We will come back to it in second and now that we
have that the input and the local variable, let's change the query and the
preparation. Double click the query and we need to somehow take the value of the
search keyword into account to create a condition in the query.
So let me just right click the parameters in other input and input parameter to the
query keyword and let's add a condition. And we want to search were product name
like this plus keyword plus, or the product description and then
the same. Ctrl-C, Ctrl-V, here's our condition. Don't forget to set the
keyword as a search parameter and that's it we are all set. Now all we need to do is
bind the keyword, input parameter from the query to the search keyword variable.
All right, let's go back again to the product list because there is one more thing
that I wanted to do which is create another text field to search by Max Price.
So let me just reduce the width of this and let me just type Max Price and this will
also be bound to a local variable Max Price, bind it to the input and go to the
preparation again, add an input parameter here Max Price, set it as search parameter
and add a condition. Product Price must be less or equal than Max Price.
Close, close this one and bind this with the local variable Max Price.
So we just need to finish the search action so the query is set.
All we need to do is, well, when the user click search refresh it,
re-execute the query because the user type something then the query must be
re-executed. So we are going to use the refresh query here to refresh the get products
query. And after refreshing the query you need to refresh the table records,
do an Ajax refresh in the table records and the table records is called product
table. So the Ajax refresh tells the browser to run only the table records right
there. So I will publish this and we will see this in action because it's easier to
illustrate. Okay, let's open this in the browser, here's the reports,
let's click product's list, there is the list of products. Let me type USB.
All right, now we have an USB. Let me clear this. USB here that's why the Dell mouse
was selected. Let me clean this. Let's select the Max Price,
let's say $35, search and all the products under $35 are here.
We can also create a new product and here we have it the new product page that we
also created. Just one final test which is click the Dell mouse and I can edit the
product here in this form. That's it. We are all set.