Create custom search functionality in ProcFu

You can implement a custom search functionality in ProcFu. Some of its usecases are:

• Adding a search in a summary screen with custom-filter or related-items.
• Mimic a relationship field in a custom HTML form.

We are going to do it using ProcFu's PfJs.ajaxCall(screenIdent, data, okfunc, errfunc).

This function is used to make an AJAX call.

Step 1: Build the search form

To implement the custom search, add the following code in the header of your screen. If you are working with a custom HTML form screen, insert the code in the content section instead:

<div class="search-container">
    <input type="text" id="search-input" placeholder="🔍 Search" class="search-input" />
    <input type="hidden" id="selected-result" />
    <ul id="search-results" class="search-results"></ul>
</div>

Add the following styles in the header:

<style>
    .search-container {
      position: relative;
    }
    
    .search-input  {
      width: 500px;
    }
    
    .search-results {
      position: absolute;
      top: 92%; /* Position below the input field */
      left: 0;
      width: 500px;
      background-color: white;
      border: 1px solid #ddd;
      display: none; /* Initially hidden */
      list-style-type: none;
      padding: 0;
      margin: 0;
      z-index: 1000;
    }
    
    .search-results li {
     padding: 10px 5px;
    }
</style>

Step 2: Make the form work

Next, in the on-render event, add the following code:

// Minimum characters to be entered to trigger search
var minSearchLength = 3;
var selectedUserId = null;

const searchResults = $("#search-results"); // Convert to jQuery object
const searchInput = $("#search-input"); // Convert to jQuery object
const selectedResult = $("#selected-result"); // Convert to jQuery object

// Function to display the user list based on search term
function showUserList(searchTerm) {
    if (searchTerm.length >= minSearchLength) {
        var data = { search: searchTerm };

        function successFunc(data) {
            searchResults.empty(); // Clear previous results
            if (data.length > 0) {
                $.each(data, function (index, user) {
                    var listItem = $(
                    '<li data-user-id="' + user.item_id + '">' + user.text + "</li>"
                    );
                    listItem.click(function () {
                        selectedUserId = $(this).data("user-id");
                        searchInput.val($(this).text());
                        selectedResult.val(selectedUserId);
                        searchResults.hide();
                    });
                    searchResults.append(listItem);
                });

                searchResults.show();
            } else {
                searchResults.empty(); // Hide the list if no results
                searchResults.hide();
            }
        }

        function errFunc() {
            alert("Search error");
        }

        PfJs.ajaxCall("ajax-screen", data, successFunc, errFunc);
    } else {
        searchResults.empty(); // Hide the list if search term is too short
        searchResults.hide();
    }
}

// Event handler for search input changes
searchInput.on("keyup", function () {
    var searchTerm = $(this).val().trim();
    selectedUserId = null;
    selectedResult.val("");
    showUserList(searchTerm);
});

// Event handler to close the dropdown on outside clicks
$(document).click(function (event) {
    if (!$(event.target).closest("#search-input, #search-results").length) {
        searchResults.hide();
    }
});

Success Behaviour Option 2

When the user clicks on a result, if you want to go to that item, you can adjust the success function to make it happen. Replace the above mentioned successFunc with the following:

function successFunc(data) {
    searchResults.empty(); // Clear previous results
    if (data.length > 0) {
        $.each(data, function (index, user) {
         var listItem = $(
            '<li data-user-id="' + user.item_id + '"><a href=screen_2_detail_4/'+user.item_id+'>  ' + user.text + "</a></li>"
            );
            searchResults.append(listItem);
        });

        searchResults.show();
    } else {
        searchResults.empty(); // Hide the list if no results
        searchResults.hide();
    }
}

Step 3: Handle the backend processing

Next, create a new screen in ProcFu and name it ajax-screen. In the before-process event of the screen, add the following code:

app = 27459340;
field = 238821648;
search = url_parameters["search"];
data = podio_app_search(app, field, search, "C", 10, 1);
results = [];
foreach (json_decode($data, false) as $d) {
    results[] = [
        "item_id" => $d["item_id"],
        "text" => $d["title"]
    ];
}
print results;

You are free to modify which function you want to use and what fields you want to search on, etc. Here, I am using the podio_app_search function to get the item_id and the title value.

How It Works

This custom search implementation involves the interaction between two screens in ProcFu: the display screen and the backend processing screen. Here's a breakdown of how it functions:

1. User Input: The user types a search term into the search input field in the display screen. This input triggers a JavaScript function to handle the search logic.
2. AJAX Request: The input is sent to a backend processing screen via an AJAX call using PfJs.ajaxCall. The search term is passed as a URL parameter in the data object.
3. Backend Processing:
   • The backend screen processes the incoming request. The search term is extracted from the URL parameters using url_parameters["search"].
   • A query is performed using ProcFu's podio_app_search function to search for matching items in the Podio app. This function uses parameters such as app ID, field ID, and the search term to return results.
   • The results are structured into an array containing the item_id and title for each matching record. These results are then printed as the response, which is sent back to the display screen.
4. Response Handling:
   • On the display screen, the successFunc function processes the response from the backend screen. The results are displayed as a dropdown list below the search input field.
   • If the user clicks on a result, the corresponding item_id is stored in a hidden field, and the input field is updated with the selected item's text. The dropdown is then hidden.
   • When the user clicks on a result, if you want to go to that item, you can adjust the success function to make it happen.
5. Fallback for Errors: If the AJAX call fails, the errFunc function alerts the user with a search error message.

That's it. You have now implemented a custom search functionality in ProcFu.