Creating a custom search page

This page applies to Apigeeand 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) .

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 Addto 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.