Version 2
Visibility: Open to anyone

    This document describs how to modify jive's search functionality in order to add jump links that take entered text by a user and redirect to an external search page based on link's category or section. This customisation is part of custom theme, the goal is to override soy files, then add JS & CSS code as necessary.

     

    Target Files

    1. soy/spotlight/views/search.soy
    2. scripts/js-custom.js
    3. soy/template/template.soy

     

    Search.soy View

    This file represents the search view result when a user search for something inside jive.

     

    So the perfect place to add jump links is to have a new block below People & Places like this

    I have named it Custom, but you can change it to whatever you want.

     

     

    Search.soy Code

    the target soy file is called search.soy In order to override that file, you go to admin console --> settings --> themes --> edit current installed theme, and then search for search.soy file but make sure it has this directory soy/spotlight/views/search.soy because there are many files with same name, then click on Create New Template.

    In line 40, is the aside container tag that wrap the right contents of the search result, we need to follow the same structure for our new elements, which are ( h2 tag for heading & ul tag for the new jump links we want to add ). You can add them after the closing ul tag in line 57.

    In that last image, i have followed the same structure of the HTML markup as well as the attributes naming convention, Notice that i'm using custom but you can change it to whatever you want but try to be consistent as much as you can. if you want to more than one link then add more li tags with an anchor tag (a) inside each one. Regarding id="people", this will be my target section for jump links if i want to jump to Content, People or Places in search page. Please have a look on this image.

    So you can use have your target jump links as an id for each a tag or or custom HTML attributes like data-id to avoid collision in case we have the same id somewhere. Now it's time to add the JS code  for our functionality.

    js-custom.js

     

    When developing a custom theme for Jive instance, you may want to add some JS code, so i have named the file js-custom.js but you can name it whatever you want,

    and it's placed under script folder in your theme directory "scripts/js-custom.js"

    That JS code listens for click events on the jump links we have created and then takes the input value and redirect user to search page with 2 params ( entered text & clicked link ).

     

    template.soy

     

    We use template.soy file to reference our JS or css code for custom theme development. We need to create one then modify it by adding our css or js markups. You can create it from admin console the same way we did when creating search.soy but the path for that file is soy/template/template.soy under theme directory. The file contains more than one closure templates aka soy templates, but we're interested in first template which is called {template .main} at line 77.

    And notice that i'm referencing js-custom.js file before the closing head tag.

     

    Now you can test your changes after updating the theme with the new files for the new feature.