Home›Customise & extend›Search bar app

Search bar app

Build a Custom App that adds a search box and content area selector to a homepage, like the one on the Interact Community page.

Before you start

  • You need access to the Control Panel with permission to manage the App Development Kit.

Note: This example is a sample, not officially supported by Interact Technical Support. Review and test it with your development team before use, as it needs amends to work in your environment.

Overview

On the Interact Community page there is a search feature that helps drive engagement and makes the front page more useful:

The search bar on the Interact Community page

This is built with the ADK. The Custom App, available as a widget, sets up a text box and a dropdown so the user can enter a search term and select a content area to search within. These are added in the HTML component of the widget.

The JavaScript attaches an event to the search button. When selected, the user is navigated to the search page, passing through the selected content area and the search term entered by the user.

<div class="hidden-phone">
  <h1 style="text-align: center; color: rgb(255, 255, 255); margin-top:0; font-size: 55px; margin-bottom: 40px; letter-spacing: -2px;">Hi <span id="welcomename" style="margin-left: 5px;">there</span>, how can we help?</h1>
  <div class="input-append" style="text-align: center;width:100%;">
    <input id="searchinput" placeholder="What are you looking for?..." style="padding: 7px 25px 6px; width: 60%; border-radius: 10px 0 0 10px; height: 40px; font-size: 20px;" type="text"> <select id="searchselect" style="height: 35px;font-size:20px; border-radius: 0px; width: 150px;height:55px;">
      <option value="1">
        University
      </option>
      <option value="2">
        Collaborate
      </option>
    </select> <input class="btn btn-large btn-primary" id="searchbtn" style="height: 55px; font-size: 20px; padding: 15px 30px;" type="button" value="Search">
  </div>
  <p id="popular" style="text-align:left;margin-left:70px;color:white;"><strong>Popular Help Topics:</strong> <a href="/Interact/Pages/Content/Document.aspx?id=7255" style="color:#fff;">Rewards</a>, <a href="/Interact/Pages/Content/Document.aspx?id=7711" style="color:#fff;">Authentication</a></p>
</div>
<div class="hidden-desktop hidden-tablet">
  <h1 style="text-align: center; color: rgb(255, 255, 255); margin-top: 0; font-size: 36px; line-height: 40px; margin-bottom: 30px; letter-spacing: -2px;">Hi there, how can we help?</h1>
  <p id="popular" style="text-align: center; margin-left: 0; margin-bottom: 80px; color: white;"><strong>Popular Help Topics:</strong> <a href="/Interact/Pages/Modules/Blog/Blog.aspx?person=2905&amp;post790" style="color:#fff;">Mobile App</a>, <a href="/Interact/Pages/Content/Document.aspx?id=7711" style="color:#fff;">Authentication</a></p>
</div>
<script>
$(document).ready(function()
{
  // Get the users name
  var yourname = $("#linkViewProfileName").text().split(' ')[0];
  $("#welcomename").html(yourname);

  $('#searchbtn').click(function(event)
  {
    event.preventDefault();
    if ($('#searchinput').val() == '')
    {
      if ($('.errorMsg').length == 0)
      {
        $('#popular').html('<p class="errorMsg top">Please enter a search term</p>');
      }
    }
    else
    {
      var target = $('#searchselect option:selected').val();
      var search = $("#searchinput").val();
      if (target == "1") window.location.href = 'https://developer.interactgo.com/Interact/Pages/Content/Search/Search.aspx?sectionid=3248' + '&' + 'q=' + search;
      else if (target == "2") window.location.href = 'https://developer.interactgo.com/Interact/Pages/Content/Search/Search.aspx?sectionid=1608&q=' + search;
    }
  });
  $('#searchinput').keypress(function(e)
  {
    if (e.which == 13)
    { //Enter key pressed
      $('#searchbtn').click(); //Trigger search button click event
    }
  });
});
</script>

Important: To use this on your intranet, modify the URLs to include your own domain, along with the sectionid values for the content areas you want to search.

Section: Customise & extend