Customized search component for report data, using pages

Customized search component for report data, using pages

Requirement            

Provide a search component for users to search for the required data. Data is fetched from reports based on the search keyword.

Use Case  

A library or a book management system wants to allow for searching. Any customer who wants to search for a particular genre of books can do so easily with the available category listings under the main search.
 

Steps to follow            

1. Create a form by importing the attached books.csv file.

2. Rename the created form to 'Book' and the report to 'Books'.

3. We shall now create a function to get all the genres of the Books uploaded. We'll use this listing to show our category listing.
           
4. Add the below Deluge code in the Deluge editor to get the genres.                  
  1. list getGenres()
  2. {

  4. //return a list of genres, hence return type is list
  5. //get all distinct genres available
  6.  genres = Book[ID != null].Genre.getAll().distinct();
  7.  return genres;
  8. }
The above code will return the list of all distinct genres available.

5. Let's create a page now for searching books and name it Search for books.

6. Drag a search element and mark the placeholder as Title/Author. Click the Configure icon and select the Search result component as Report and select the Books report.
 
           
7. Set the criteria to search the Books report for the search string in title or author.
 
 
The configuration of the search element is as follows:


8. Drag an HTML snippet below the Search Element.


9. Let's create a list of the genres with corresponding links to the Books database filtering records that match the current genre.
  1. <%{
  2. //Get all the genres from function created in Step 3 & 4
  3.  genres = thisapp.getGenres();
  4.  for each genre in genres
  5.  {
  6.   %>
  7. <!-  Create an HTML anchor tag to the Books report filtering appropriately -->
  8. <a class="genre-link" href="#Report:Books?Genre=<%=genre%>"><%=genre%></a><br/>
  9. <style>
  10. <!-- Style for the anchor tags -->
  11. a.genre-link {
  12.  display: inline-block;
  13.     width: 115px;
  14.     height: 25px;
  15.     padding: 10px;
  16.  padding-left: 20px;
  17.     text-align: left;
  18.     border-radius: 5px;
  19.     font-weight: bold;
  20.     line-height: 25px;
  21. }
  22. </style>
  23. <%
  24.  }
  25. }%>
10. Finally, although optional, we shall publish the Search for Books page and Books report to make it available for all users to search and check the availability.

See how it works