Adding search functionality on the My Tasks page

Likitha Patel
Tera Expert

Adding search functionality to the HRM Todos Summary widget on the My Tasks page

 

Overview

This functionality provides a search bar for dynamic filtering of records on the "MY Tasks" page. Users can search by entering the number or short description of a record in the search.

 

Step 1: Clone the "HRM Todos Summary" widget. Add the following code to the HTML body template:

 

 

<!-- Search Bar and Button -->
<div class="search-bar">
<input 
        type="text" 
        ng-model="c.searchQuery" 
        placeholder="Search {{tab.name}} Approvals" 
        class="form-control" 
        ng-keypress="c.handleKeyPress($event, tab.name)" 
    />
<button 
        class="btn btn-default align-icon" 
        type="button" 
        ng-click="c.fetchSearchedRecords(tab.name, c.searchQuery)" 
        data-toggle="tooltip" 
        data-placement="bottom"
>
<i class="fa fa-search"></i>
</button>
</div>

 

 

Step 2: Add the following code in CSS to ensure that the search bar looks visually appealing and is aligned properly with the button.

 

.search-bar {
  display: flex;
  align-items: center;
}

.search-bar .form-control {
  flex: 1;
  margin-right: 0; /* Ensure no margin between input and button */
  border-right: 2px solid #ccc; /* Adds a line between input and button */
  height: 40px; /* Ensure the height is the same as the button */
}

.search-bar .btn {
  padding: 5px 10px; /* Adjust padding for consistent sizing */
  height: 40px; /* Set the button height to match the input */
  display: flex;
  align-items: center; /* Center the icon vertically */
  justify-content: center; /* Center the icon horizontally */
}

 

 

Step 3: Add the following code to the server-side script to fetch the records from the server with a limit set to 1000 to retrieve all records.

 

// Set query limit to fetch all records (adjust if the utility method has specific handling)
    var todoUtils = new todoPageUtils();

    // Define parameters
    var limit = 1000; // Set to 0 or a high number to fetch all records
    var excludeList = []; // No exclusions
    var includeSysId = undefined; // No specific sys_id to include
    var filters = undefined; // No filters
    var params = undefined; // No additional parameters
    var todoPageFilterConditions = undefined; // No specific filter conditions
    var applyFilter = false; // Do not apply filters
    var tab = data.tabname; // Specify the tab you want to fetch records from

    // Fetch the todos
    var todos = todoUtils.getMyTodos(limit, excludeList, includeSysId, filters, params, todoPageFilterConditions, applyFilter, tab);

    // Pass the todos to the client-side via data object
    data.todos = todos;

 

 

Step 4: Add the following code to the client-side script to handle the search functionality and dynamically filter the records based on the user's input.

 

c.todos = $scope.data.todos; // This will contain the todos fetched from the server
    c.originalTodos = c.todos;
    c.handleKeyPress = function(event, tabName) {
        if (event.keyCode === 13 || event.which === 13) { // Check if Enter key is pressed
            c.fetchSearchedRecords(tabName, c.searchQuery); // Trigger the search function
		}
    };

    c.searchQuery = ''; // Initialize the search query
    c.todosToShow = {}; // This will hold the original todos
    c.todoDisplayed = {}; // This will hold the displayed todos

    // Function to fetch and filter todos based on the search query
    c.fetchSearchedRecords = function(tabName, searchQuery) 
	{
		c.tabname = tabName;
        // Check if there is a search query
        if (searchQuery == '') {
           if (c.todosToShow[tabName]) 
		   {
            c.todoDisplayed[tabName] = angular.copy(c.todosToShow[tabName]);
		   }
        }
        var filteredTodos = [];

        // Store the original todos if not already stored
        if (!c.todosToShow[tabName]) {
            c.todosToShow[tabName] = angular.copy(c.originalTodos.recordsToShow[tabName]); // Keep a copy of the original todos
        }

        // Get the todos to search from the stored original list
        var todosToSearch = c.todosToShow[tabName];

        // Check if there are todos to search
        if (todosToSearch && todosToSearch.length > 0) {
            // Convert the search query to lowercase for case-insensitive comparison
            var searchQueryLower = searchQuery.toLowerCase();

            // Filter the todos based on the search query
            filteredTodos = todosToSearch.filter(function(todo) {
                // Check if the todo's display values contain the search query
                return todo.displayValueList && todo.displayValueList.some(function(value) {
                    return String(value).toLowerCase().includes(searchQueryLower);
                });
            });
        }

        // Update the displayed todos with the filtered results
        c.todoDisplayed[tabName] = filteredTodos;

        // Trigger UI update
        $scope.$applyAsync();
    };

 

 

Key Features:

  • Dynamic Filtering: Users can filter tasks in real time without refreshing the page.
  • Restoration of Original Data: The full list of records is restored when the search query is cleared.
  • Case-Insensitive Search: The search is case-insensitive, making it user-friendly regardless of capitalization.

Output:

 

LikithaPatel_0-1736258577287.png

 

Happy Learning,
Likitha Thangala

 

5 REPLIES 5

SumanthDosapati
Mega Sage
Mega Sage

@Likitha Patel  Great work. But you posted it as a question instead of article.

Kimberly Bass
Tera Contributor

This solution doesn't actually retrieve results for me in ESC. What do I need to adjust or look at to make it work properly?

Hi @Kimberly Bass , 
The fetchSearchedRecords function in the client-side script returns the search results. Please review the code to ensure it is implemented and triggered correctly.

Thanks, 
Likitha

Vasilis Anastas
Tera Expert

Hello @Likitha Patel , thank you very much for this. For some reason it's not working as it should. Could you tell me where I should place each piece of code, I mean at what point in the existing code or if you can export and attach here the widget?