As a beginner SmartClient developer, I have implemented a few basic built-in features available in the SmartClient framework. I created a webpage for one of Segue’s client’s applications which required dynamic search criteria functionality to generate a report. Below, I have created an example of the code I used to accomplish the first part of the report. Assuming, you have your SmartClient development environment set up, you can add the following sections of code into your existing layout. For this simple page, I’ve added the filter builder and a search button to run it. When the status is passed, the results will be displayed in the grid Results section.
Creating a Filter Builder
Figure 1, shows the result of the code that will be explained in this blog.
Figure 1
The code below will show how I created the layout for the page and all its parts. For this page, I created a “SectionStack” because I wanted to stack two page sections together: the “Search Parameters” and the “Results” grid. The “Search Parameters” section title will be placed in the filter header and the “Results” section title will be placed in the grid header.
The first step to create the filter builder is to add the property to your page layout as shown on line #12 below. The following code is used to create the page layout, the file name is “UserStatusLayout.js”.
Figure 2
This simple filter builder is going to allow a user to select from a list of user statuses to perform a search against the users database table. The SmartClient constructor to be used is called “FilterBuilder”. In my example, I’m using a table driven filter so I will be retrieving the list from the database and displaying it through the filter builder as a drop down list. I am setting the importFields variable above to the list of fields in my “UserStatusDataSourceFields.js” file – Figure 4 shown below. The ID is the name that you will use to reference the datasource you created, the fields property will be set to the list of fields/filters that are in the “userStatusDataSourceFields.js” file. When a user selects a filter, then selects a value from the drop down list, and clicks on the Search button, the criteria will be created and sent to the datasource to retrieve the results based on the criteria.
Figure 3
In Figure 3 above, I have the initWidget code that will create all the different parts of the layout and put them together. In this section, you have to initiate each property of the page. Here I create/initiate the userStatusFilterBuilder, searchButton, and the userStatusGrid. Then the sections need to be added in the order you want them displayed. I have the first item for “Search Parameters” and then I add the “Results” item to the section stack. You can add different attributes to the items in your sections. For instance, I have allowed the “Search Parameters” section to be collapsed by not setting “canCollapse:false” as I have for the “Results” section. Since I don’t want the “Results” section to be collapsed, I set this attribute to false in items line #77. You will see that there is a down arrow to the left of the “Search Parameters” title. This can be useful if the user wants to temporarily collapse the “Search Parameters” section to view a larger result set in the grid.
The code in Figure 4 below, shows the datasource in a separate file called “UserStatusDataSourceFields.js.” This is the file used for the datasource fields in the filter builder starting on line #18 of Figure 2. This is the only code I have in this file because I only have one filter in my example. If you want to have more filter options, you would add them here. You can also have text fields as filters, etc.
Figure 4
To set the filter, I’m naming it “STATUS”, the title “User Status” will be the name of the filter, which is the drop down list on the left in Figure 5 below. If you have additional filter options, they will all be listed in this drop down. The drop down in the middle will have the SmartClient built in operators, such as equals, not equals to, contains, etc. The final drop down on the right will be the list of values to select to match the “User Status” filter, which I’m retrieving from a database table called “MY_USER_STATUS”. The optionDataSource is the datasource you have created to actually query the list from the database. The valueField is the ID that will be passed to the query as the criteria value that will later retrieve the data from your search. And the displayField will be the field that you want to display to the user in the drop down list. For example, a title, name, code, etc.
Using the datasource list will show the user a list of values as shown in Figure 5 below:
Figure 5
The filter builder is a great feature of SmartClient. It allows for multiple filters and value pairs. The plus and minus icons allows you to add or remove additional filters when creating criteria for your search. I will be explaining the code for the Search functionality and datasource in part 2 of this blog.