AEM Global Search

[ayush_aem]

Hi All,

We are trying to use the AEM global search functionality to use the search functionality as is. We are looking for a solution where we can consume a JSON and build a custom UI on top of that. If I inspect the network tab I can see that the search call is returning a HTML as below. 

Is there a way we can use the same query and search results as JSON and build a custom UI on top of it ?

[Shashi_Mulugu]

@ayush_aem  possible OOTB like querybuilder api but needs customization, use custom third-party search engine services like elastic, lucid works etc.. and build our own FE components with framework such as react, angular, vue.js etc..

[stiegjo]

How does Elastic work? Is it an add-on to Apache Lucene?

[Shashi_Mulugu]

@stiegjo no it is a external search engine.. please read below article for reference.

https://medium.com/@toimrank/aem-and-elastic-search-integration-2f3db54cb86a

[HrishikeshKa]

Hi @ayush_aem ,

Yes, you can consume the AEM global search functionality and retrieve search results as JSON data to build a custom UI on top of it. AEM provides APIs and endpoints to perform search queries and retrieve search results in various formats, including JSON.

To achieve this, you can use the AEM Query Builder API to perform search queries and retrieve search results as JSON data. Here's a general outline of the steps involved:

1. Perform Search Query: Use the AEM Query Builder API to construct and execute search queries based on your search requirements. You can specify search parameters such as keywords, filters, sorting criteria, etc., to narrow down the search results.

2. Retrieve Search Results: Execute the search query and retrieve the search results as JSON data. The Query Builder API provides endpoints that return search results in JSON format, making it easy to consume and process the data.

3. Process JSON Data: Once you have retrieved the search results as JSON data, you can process and manipulate the data as needed in your custom UI. You can extract relevant information from the JSON response, format it, and display it in your custom UI components.

4. Build Custom UI: Use the processed JSON data to populate your custom UI components such as search result lists, filters, pagination controls, etc. Design and implement your UI layout and functionality according to your requirements.

5. Handle Interactions: Implement functionality to handle user interactions such as selecting search results, applying filters, navigating through pagination, etc. Update the UI dynamically based on user actions and interactions.

6. Error Handling and Testing: Implement error handling to gracefully handle any errors or exceptions that may occur during the search query execution or JSON data processing. Test your custom UI thoroughly to ensure that it behaves as expected and provides a seamless search experience for users.

By following these steps, you can consume the AEM global search functionality, retrieve search results as JSON data, and build a custom UI on top of it to provide a tailored search experience for your users

[kautuk_sahni]

@ayush_aem Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.