Creating a custom search page

This page applies to Apigee and Apigee hybrid.

View Apigee Edge documentation.

To enable search of the publicly available content in your portal, you can create a dedicated search page where you embed a Google Custom Search Engine (CSE).

Click for larger image

Click for larger image

To create a custom search page:

  1. Publish your portal content.

  2. Create a Google custom search engine:

    1. Navigate to the Google custom search configuration page.
    2. Click Add to create a new custom search engine.
    3. Configure your custom search engine and identify the portal site domain. See Create a search engine in the Google Custom Search Help. The custom search configuration returns something like the following: 
      <script async src="https://cse.google.com/cse.js?cx=e13bcb52d46f04dfd"></script>
<div class="gcse-search"></div>
       Where cx=e13bcb52d46f04dfd is the Google search engine ID.

  3. Add the following custom script to your portal. See Adding custom scripts.

    Set the cx variable to your Google search engine ID, for example e13bcb52d46f04dfd, and the path value to your search page URL, for example, /search.

    <script>
window.portal = {
 pageEventListeners: {
   onLoad: (path) => {
     // Update with your search page URL
     if (path === '/your-search-page-URL') {
       // Add your Google search engine ID
       var cx = 'your-search-engine-id';
       var gcse = document.createElement('script');
       gcse.type = 'text/javascript';
       gcse.async = true;
       gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
       var s = document.getElementsByTagName('script')[0];
       s.parentNode.insertBefore(gcse, s);
       gcse.onload = function () {
         var search = document.createElement('gcse:search');
         // Note the element ID name
         var searchBox = document.getElementById('search-box');
         searchBox.appendChild(search);
       };
     }
   }
 }
};
</script>

  4. Create a new search page in your portal and customize it as described in Manage pages in your portal.

  5. Add the custom search element ID (search-box) defined in your custom script at the location that you want the Google search box to appear. For example <div id="search-box"></div>

  6. Add the search page to your portal navigation, as described in Set up navigation.

  7. Publish your search page and navigation updates.