Overview
A Search Interface comprises of a search form where users can enter a search term and view the search result. Zoho Creator supports creating a Search Interface that displays customized reports based on the search keyword.
Let us take the example of the Employee Manager application to illustrate how to create a search interface in Zoho Creator.The Dashboard page in the application displays the Search form to search employees based on the specified Employee Name, Team Name or Department. On click of the "Search" button a custom html page is displayed, as shown in the screen-shot below.
Steps to create a Search Interface
1. Create the Search Form
- Create a Search Form with the Fields that would make up a Search Dialog.
- A search Form is basically a Stateless form, that does not store data in the ZC database. Refer Stateless Forms for more information on creating Stateless forms.
- Add a Custom Button of your choice to the Stateless Form.
For example, in the Search form displayed below, we have a field with script name “searchEmployee” and Custom button named Search.
2. Create the html page with Search Parameter
- Create the required html page with parameter, e.g.searchParam to pass the search key (specified in the above Search form).
- Write the code for this view to retrieve the records from your Table whose value matches the passed parameter.
For example, in the Employee Manager, the html page named Employee_Search is created to fetch and display the required data whose value matches with the search key that is passed as paramater to this report. You can use the drag-n-drop Script Builder in the html page, to add HTML and Deluge code and create the required report. Refer the Help link Creating html pages for more information.The script for fetching records and populating it in Employee_search html page is given below.
EmpOtherInfo = Other_Information [(((Employee_Name.contains(input.searchParam) || Team.contains(input.searchParam)) || Department.contains(input.searchParam)) || Employee_Name.Email_Id.contains(input.searchParam))] range from (stIndex + 1) to endIndex;
where,
- The Fetch records task scripted above checks the searchParam variable (i.e Input value) against various fields in the Other_Information form and stores the related records in the collection variable named EmpOtherInfo.
- stIndex and endIndex denotes the the range of records that is displayed in the html page.
srchCount = Other_Information[(((Employee_Name.contains(input.searchParam) || Team.contains(input.searchParam)) || Department.contains(input.searchParam)) || Employee_Name.Email_Id.contains(input.searchParam))].count();
where,
- count() - is the function returns the number of records in the Other_Information form that matches the searchParam value.
- srchCount - is the collection variable that stores the number of records returned by the count() function.
if (srchCount > 0)
{
div elName='zc-component' formLinkName='Search_Form' params='zc_Header=false&zc_BdrClr=white&zc_LblClr=FFFFFF&srchParam=<%=searchParam%>
where,
- If Condition checks whether the search count is greater than 0.If the condition is satisfied, then the form with the link name Search_Form with header, border and Label colour will be created as a table in the html page. Else, the result will be displayed as No records found.
The code <%=searchParam%> is the deluge variable within the HTML code.Usually a deluge variable within the HTML code is scripted within the <%= %>.For more details on adding parameters to the page, please refer the following link.
In the Employee search page, the code,"<%=srchCount%> records found for <%=searchParam%>" returns the number of records found in the "srchCount" variable that matches the input parameter "searchParam"
"for each EmpRow in EmpOtherInfo"
In the code mentioned above, the variable "EmpRow" iterates each value present in the EmpOtherInfo parameter using the for each loop and inserts the record details (work location, mobile number, work phone) in the rows and columns of the table and.To view the entire script,Click on the workflow of the Employee_search page.
Extn. no.: <%=thisapp.replNullValue((""+EmpRow.Extension)
In the code mentioned above, thisapp.replNullValue is the function that returns the extension number of the EmpRow variable against the Extn.no field.The code for the function replNullValue is given below.
string replNullValue(string val)
{
if ((input.val == null) || (input.val == ""))
{
return " ";
}
return input.val;
In the above code, val is a variable that holds the value of the field. If the input value is null or an empty string, then a single empty space is returned as output against the particular field name. If the val contains an entry, then that value is returned as the output against the field.
In the similar way, various other field values are returned using the function. To see the script of the function in the application, go to Workflow --> Functions -->replNullValue from the edit mode.
3. Invoke the html page on click of the Search Form
The html page is displayed on click of the search button. This is achieved by invoking the html page on click of the search button.
To perform this action,
- In the edit mode of the stateless form, click on workflow tab.
- Select Form Actions--> On Click tab and enter the following code.
searchUrl = “#View:Employee_Search?searchParam=” + input.searchEmployee;
openUrl(searchUrl, “same window”);
where,
-
- searchUrl – is the variable that holds the url to be displayed when the Search button is clicked. In the Employee Manager application, #View:Employee_Search is the html page link, searchParam is the parameter that holds the search key from the searchEmployee field in the stateless form (Search Form).
- openUrl – is the Deluge task that redirects the form to the specified url. Refer the Help Doc ->Open URL for more information on the syntax and usage of each Deluge task.
- The on click script, uses the "openUrl" Deluge task to redirect the stateless form to the html page.
- Click Save Script to update the script. In live mode, the Employee Search view will be displayed on click of the Search button.
