About the application
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 display customized views based on the search
keyword. Let us take the example of theEmployee Manager application in the Zoho Market place to illustrate how to create a search interface in Zoho Creator.
The Dashboard page 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 view is displayed, as shown in the screen-shot below.
Steps in creating a Search Interface
- 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 Formsfor more information on creating Stateless forms.
- Add a Custom Button 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 View with Search Parameter
- Create the required HTML view 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. You can use the drag-n-drop Script Builder in the HTML View, to add HTML and Deluge code and create the required view. Refer the Help link Creating HTML Views for more information.
For example, in the Employee Manager, the HTML view 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 view. The screen-shot of the drag-n-drop UI to create the HTML view is given below:
3. Invoke the HTML view on click of the Search Form
- Add on click script to the Stateless form to display the HTML view, on click of the Search Button, as shown below:
- The on click script, uses the OpenURL Deluge task to redirect the stateless form to the HTML view.
|searchUrl = “#View:Employee_Search?searchParam=” + input.searchEmployee;
openUrl(searchUrl, “same window”);
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 view 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 ->Deluge Reference for more information on the syntax and usage of each Deluge task.
- Click Save Script to update the script. In live mode, the Employee Search view will be displayed on click of the Search button.