Viewport Search Functionalities: Quick search and Search Template

[Janne S.]

Hi guys,

Im currently working on a project that requires building a fully custom made Viewport theme, so we are not using SCROLL WEBHELP template as basis. I'm fairly new to customizing Atlassian products (Confluence particulary), so help would be appreciated in this matter. This project holds over 10+ external Confluence spaces dedicated to Viewport and some internal spaces as well. I have followed the instructions in k15t help documentation: https://help.k15t.com/scroll-viewport/latest/search-template-recipe-137871030.html & https://help.k15t.com/scroll-viewport/latest/implementing-quick-search-results-125708861.html

First question is about search functionality:
Is it possible to automate the <input> elements using forEach to check if current Confluence instance has spaces where Viewport is active? Like so:

search_bar.vm (lower):

#set($search = "/search")
#if ($stringUtils.equals(${viewport.link}, "/") == false)
        #set($search = "${viewport.link}/search")
#end
<form action="$search" method="GET" id="search>
    <input type="text" autocomplete="off" name="q" value="$!searchRequest.queryString" />
#forEach ($[spacename variable] in [viewport placeholder?)]
      <input type="hidden" name="s" value="$[spacename variable would come here]" />
#end
</form>

Is there a way to automate this or does the confluence restrictions do by itself? I feel like automating this as presented would give a little extra sense of security, since inputs are limited to only work on active viewports, so it ignores internal confluence spaces when searching content. There is probably a benefit for database query also?

Second question is about quick search functionality:

How can I achieve quick search functionality in custom viewport theme? I have jQuery (main.js named as quicksearch.js) and the code snippet from k15t help documentation, which is "gutted" to two templates:

search.vm - Shows results
search_bar.vm - A subtemplate which is included in every page to top right corner.

search_bar.vm (upper):

#if ($stringUtils.contains($url.query, 'quicksearch=true'))
    #foreach($result in $searchResults.items)
        <li n="$velocityCount" class="search-result">
            <a href="$result.link">$result.displayTitle</a>
        </li>
    #end
#else
    #set($search = "/search")
    #if ($stringUtils.equals(${viewport.link}, "/") == false)
    #set($search = "${viewport.link}/search")
    #end 

LOWER SNIPPET STARTS FROM HERE

quicksearch.js:

$(document).ready(() => {
    $('#search-input').on('keyup', function () {
        if($('#search-input').val().length >= 3){
            $('#search-results')
                .load(
                    $('#search').attr('action'), "quicksearch=true&q=" + $("#search-input")
                .val());
        }
    });
});

I feel like i'm missing something here. The Search Template (Recipe part of help documentation) says something about scroll-search.js, which I think is part of SCROLL WEBHELP theme. Do I need to build something like it? Since it has window manipulation "window.SCROLL_WEBHELP".

Thank you.

[Steffen Burzlaff (K15t)]

Hi Janne,

thanks for reaching out.

For you first question related the spaces for the scope of the search:
This can be automated and I think the easiest way would be to create a collection of your spaces you want to display within the theme and viewports.

Quicksearch in own theme:

The search recipe you are following requires the search files from the webhelp theme like the "scroll-search.js". You can copy them over to your own theme.
You also don't need to rely on this search - you also can implement any search engine you like (like google search) - in case you are more familiar working with that.

Let me know if that helps or if you need more context.

Thanks and have a nice day.

Best Regards,

Steffen