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 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.
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");
|
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 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.
(posts) 
Post Comment