SharePoint 2013/2016/Online Search Bar Integration

The ayfie Locator Application for SharePoint can be integrated into the built-in SharePoint search box. This can be configured at the site or site collection level. This document contains instructions to setup two different integrated search scenarios; linking to the hosted app page or to a site page with the embedded app part on it.

Prior to configuring search settings, consideration much be given to whether multiple Result Sources are necessary. For example, SharePoint's built in "Everything", "People", or "Conversations" sources which are displayed as a drop-down menu in the search bar.

If multiple Result Sources are needed, search configuration must be done on each sub-site in a site collection. Site Collection Search Settings do not support customizing the Result Sources drop-down menu.

If only the Locator Result Source is needed, search configuration can be done at either the Site Collection level to apply it to all sub-sites, or on individual sub-sites.

Note: Performing these configuration changes will disable the "Search this site" Result Source unless manually configured on each sub-site.

Configuration for Multiple Result Sources

Before beginning, make note of the existing Result Source's URLs. These will be needed to repopulate the drop-down menu. These can be found by executing a query for each source and copying the URL up to the .aspx

For example:

Everything: /search/Pages/results.aspx
People: /search/Pages/peopleresults.aspx
Conversations: /search/Pages/conversationresults.aspx
Video: /search/Pages/videoresults.aspx

Navigate to Site Settings > Search > Search Settings
Uncheck the box "Use the same results page settings as my parent"
Select the radio button for "Turn on the drop-down menu inside the search box, and use the first Search Navigation node as the destination results page."
In the "Configure Search Navigation" box, click "Add Link..."
1. The first entry will be the default source
Enter "Locator " for the title
Enter the URL for the Locator SharePoint Application
1. This can either be the URL for a page with the Locator App embedded as an App Part or the hosted app URL.
2. For Example:
Click "Ok"
Use the "Add link..." button to add additional Result Sources as needed
Click "Ok" on the Search Settings page.

Locator will now be the default source in the SharePoint search box. Queries entered into the search box will direct the user to the Locator SharePoint app and execute the query. A drop-down menu will be available to select the other Result Sources that were entered.

Note: These steps must be performed on each sub-site. Alternatively, the "Configuration Export/Import" feature can be used to speed up the process.

Configuration for only Locator Result Source

As a Site Collection Administrator, Navigate to the root site and select Site Settings > Site Collection Administration > Search Settings.
1. If search setting inheritance is not desired, navigate to Search > Search Settings instead of the Site Collection Search Settings.
Uncheck the box "Use the same results page settings as my parent"
Select the radio button for "Send queries to a custom results page URL."
Enter the URL for the Locator SharePoint Application
1. This can either be the URL for a page with the Locator App embedded as an App Part or the hosted app URL.
2. For Example:
Click "Ok"

Locator will now be the only Result Source in the SharePoint search box on all sub-sites. Queries entered into the search box will direct the user to the Locator SharePoint app and execute the query.

Obtaining the Hosted App Page URL:

Navigate to the "Site Contents" on the site where the Locator App is installed.
Click the Locator App icon to open the app in its hosted full screen page
Copy the URL up to the /default.aspx
1. The rest of the URL is not needed.

The URL will look similar to this: http://app-abcd12345.apps.domain.com/LocatorSearchSPApp/Pages/Default.aspx

Additional Configuration for Locator App Part Embedded in a Site Page

When the Locator App Part is embedded on a SharePoint Page, some JavaScript is required on that page to allow communication between the host page and the embedded App Part. There are several ways to edit SharePoint pages or Master Pages to ensure the JavaScript is on the proper page. The steps below document a single page setup using the Script Editor Web Part.

Navigate the page that contains the embedded Locator App Part
Open the page in Edit mode
Click the "Insert" tab and select "Web Part"
Select the "Media and Content" category.
Select "Script Editor" and click "Add".
Click the "Edit Snippet" button on the Script Editor Web Part.
Paste the following JavaScript into the Embed script dialog window

<script type="text/javascript">
(function() {
var sendHostPageInfoListener = function (e) {
var messageData;
try
{
messageData = JSON.parse(e.data);
}
catch (error)
{
console.log("Could not parse the message response.");
return;
}
// Construct the return data to send to the app part
var returnData = {};
returnData._spPageContextInfo = _spPageContextInfo;
returnData.hostPageURL = document.URL;
var returnDataString = JSON.stringify(returnData);
e.source.postMessage(returnDataString, e.origin);
console.log("Sent app part iframe message: " + returnDataString);
};
// Register the listener
if (typeof window.addEventListener !== 'undefined') {
window.addEventListener('message', sendHostPageInfoListener, false);
}
else if (typeof window.attachEvent !== 'undefined') {
window.attachEvent('onmessage', sendHostPageInfoListener);
}
})();
</script>
<style>iframe
{min-width: 1240px; height: 100vh !important; }
</style>
Click "Insert"
Save the page and publish it if necessary.