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 Employee Manager application in the Zoho Market place for illustration.
The Dashboard page of the Employee Manager 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.
Here are the steps in creating a Search Interface in Zoho Creator:
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 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.
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.