<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>JavaScript Archives : Binary Bits</title>
	<atom:link href="https://blog.binarybits.net/category/web/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>https://blog.binarybits.net/category/web/javascript/</link>
	<description>Bits &#38; Pieces - A blog by Kannan Balasubramanian</description>
	<lastBuildDate>Mon, 03 May 2021 10:50:10 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>
	<item>
		<title>Get query string parameter using JavaScript</title>
		<link>https://blog.binarybits.net/get-query-string-parameter-using-javascript/</link>
					<comments>https://blog.binarybits.net/get-query-string-parameter-using-javascript/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Tue, 18 Jul 2017 06:40:39 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Query]]></category>
		<category><![CDATA[Query String]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=924</guid>

					<description><![CDATA[<p>Following code will help in fetching the value of a query string parameter. function GetQueryStringParameter(parameter) { var search = location.search.substring(1); var queryStringParameters = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&#38;/g, '","').replace(/=/g, '":"') + '"}') return queryStringParameters[parameter]; } Usage: If URL is http://server/page.html?id=1 Then usage would be GetQueryStringParameters(&#8220;id&#8221;) which would return 1</p>
<p>The post <a href="https://blog.binarybits.net/get-query-string-parameter-using-javascript/">Get query string parameter using JavaScript</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Following code will help in fetching the value of a query string parameter.</p>
<pre class="lang:js decode:true " title="Get Query String Parameter">function GetQueryStringParameter(parameter) {
    var search = location.search.substring(1);
    var queryStringParameters = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&amp;/g, '","').replace(/=/g, '":"') + '"}')
    return queryStringParameters[parameter];
}</pre>
<p>Usage:</p>
<p>If URL is http://server/page.html?id=1</p>
<p>Then usage would be <em>GetQueryStringParameters(&#8220;id&#8221;)</em> which would return <em>1</em></p>
<p>The post <a href="https://blog.binarybits.net/get-query-string-parameter-using-javascript/">Get query string parameter using JavaScript</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/get-query-string-parameter-using-javascript/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Remove duplicate list items from SharePoint REST call result using JavaScript</title>
		<link>https://blog.binarybits.net/remove-duplicate-list-items-from-sharepoint-rest-call-result-using-javascript/</link>
					<comments>https://blog.binarybits.net/remove-duplicate-list-items-from-sharepoint-rest-call-result-using-javascript/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Wed, 17 May 2017 07:31:10 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[CSOM]]></category>
		<category><![CDATA[Javascript]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=861</guid>

					<description><![CDATA[<p>The following code snippet show how to remove duplicate list items in the JSON result of a SharePoint REST call using JavaScript. Function Definition: function RemoveDuplicateItems(items, propertyName) { var result = []; if (items.length &#62; 0) { $.each(items, function (index, item) { if ($.inArray(item[propertyName], result) == -1) { result.push(item); } }); } return result; } [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/remove-duplicate-list-items-from-sharepoint-rest-call-result-using-javascript/">Remove duplicate list items from SharePoint REST call result using JavaScript</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>The following code snippet show how to remove duplicate list items in the JSON result of a SharePoint REST call using JavaScript.</p>
<p><strong>Function Definition:</strong></p>
<pre class="lang:js decode:true ">function RemoveDuplicateItems(items, propertyName) {
    var result = [];
    if (items.length &gt; 0) {
        $.each(items, function (index, item) {
            if ($.inArray(item[propertyName], result) == -1) {
                result.push(item);
            }
        });
    }
    return result;
}</pre>
<p><strong>Function Usage:</strong><br />
In the below code, assumption is that, the REST call returns <em>data.d.results</em> and the column for which duplicate items need to be removed is <em>Title</em></p>
<pre class="lang:js decode:true">var items = data.d.results;
items = RemoveDuplicateItems(items, 'Title');</pre>
<p>&nbsp;</p>
<p>The post <a href="https://blog.binarybits.net/remove-duplicate-list-items-from-sharepoint-rest-call-result-using-javascript/">Remove duplicate list items from SharePoint REST call result using JavaScript</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/remove-duplicate-list-items-from-sharepoint-rest-call-result-using-javascript/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Pass multiple parameters in SetTimeout JavaScript Function</title>
		<link>https://blog.binarybits.net/pass-multiple-parameters-in-settimeout-javascript-function/</link>
					<comments>https://blog.binarybits.net/pass-multiple-parameters-in-settimeout-javascript-function/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Wed, 17 May 2017 07:24:11 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Javascript]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=859</guid>

					<description><![CDATA[<p>Following is a code snippet which show how to pass multiple parameters in JavaScript&#8217;s SetTimeout() function. setTimeout(function () { CustomFunction(param1, param2, param3, param4, param5); }, 1000);</p>
<p>The post <a href="https://blog.binarybits.net/pass-multiple-parameters-in-settimeout-javascript-function/">Pass multiple parameters in SetTimeout JavaScript Function</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Following is a code snippet which show how to pass multiple parameters in JavaScript&#8217;s SetTimeout() function.</p>
<pre class="lang:js decode:true ">setTimeout(function () {
    CustomFunction(param1, param2, param3, param4, param5);
}, 1000);</pre>
<p>The post <a href="https://blog.binarybits.net/pass-multiple-parameters-in-settimeout-javascript-function/">Pass multiple parameters in SetTimeout JavaScript Function</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/pass-multiple-parameters-in-settimeout-javascript-function/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Refresh web part without refreshing page in SharePoint</title>
		<link>https://blog.binarybits.net/refresh-web-part-without-refreshing-page-sharepoint/</link>
					<comments>https://blog.binarybits.net/refresh-web-part-without-refreshing-page-sharepoint/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Tue, 16 May 2017 09:34:30 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[Refresh]]></category>
		<category><![CDATA[Web Part]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=850</guid>

					<description><![CDATA[<p>The following code shows how to refresh web part without refreshing page in SharePoint. // Set Ajax refresh context var eventAjax = { currentCtx: ctx, csrAjaxRefresh: true }; // Initiate Ajax Refresh on the list AJAXRefreshView(eventAjax, SP.UI.DialogResult.OK); Source: https://pradiprathod.wordpress.com/2015/05/04/how-to-refresh-list-view-in-sharepoint-2013-using-javascript/</p>
<p>The post <a href="https://blog.binarybits.net/refresh-web-part-without-refreshing-page-sharepoint/">Refresh web part without refreshing page in SharePoint</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>The following code shows how to refresh web part without refreshing page in SharePoint.</p>
<pre class="lang:js decode:true">// Set Ajax refresh context
var eventAjax = {
    currentCtx: ctx,
    csrAjaxRefresh: true
};
// Initiate Ajax Refresh on the list
AJAXRefreshView(eventAjax, SP.UI.DialogResult.OK);
</pre>
<p>Source: <a href="https://pradiprathod.wordpress.com/2015/05/04/how-to-refresh-list-view-in-sharepoint-2013-using-javascript/" target="_blank" rel="noopener noreferrer">https://pradiprathod.wordpress.com/2015/05/04/how-to-refresh-list-view-in-sharepoint-2013-using-javascript/</a></p>
<p>The post <a href="https://blog.binarybits.net/refresh-web-part-without-refreshing-page-sharepoint/">Refresh web part without refreshing page in SharePoint</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/refresh-web-part-without-refreshing-page-sharepoint/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Load scripts in SharePoint within custom Javascript or Workflow</title>
		<link>https://blog.binarybits.net/load-scripts-sharepoint-within-custom-javascript-workflow/</link>
					<comments>https://blog.binarybits.net/load-scripts-sharepoint-within-custom-javascript-workflow/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Thu, 11 May 2017 05:08:03 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Loading]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=844</guid>

					<description><![CDATA[<p>Following is the code which can be used to load JavaScript in sequence. This code for example loads the reputation.js from SharePoint&#8217;s layouts folder &#38; jQuery from site assets. (function () { ExecuteOrDelayUntilScriptLoaded(function () { //sp.runtime.js has been loaded ExecuteOrDelayUntilScriptLoaded(function () { //sp.js has been loaded SP.SOD.registerSod('reputation.js', SP.Utilities.Utility.getLayoutsPageUrl('reputation.js')); SP.SOD.registerSod('jquery-3.2.1', '../SiteAssets/Scripts/jquery-3.2.1.min.js'); SP.SOD.loadMultiple(['reputation.js', 'jquery-3.2.1'], function () { [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/load-scripts-sharepoint-within-custom-javascript-workflow/">Load scripts in SharePoint within custom Javascript or Workflow</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Following is the code which can be used to load JavaScript in sequence.</p>
<p>This code for example loads the reputation.js from SharePoint&#8217;s layouts folder &amp; jQuery from site assets.</p>
<pre class="lang:js decode:true ">(function () {
    ExecuteOrDelayUntilScriptLoaded(function () {
        //sp.runtime.js has been loaded
        ExecuteOrDelayUntilScriptLoaded(function () {
            //sp.js has been loaded
            SP.SOD.registerSod('reputation.js', SP.Utilities.Utility.getLayoutsPageUrl('reputation.js'));
            SP.SOD.registerSod('jquery-3.2.1', '../SiteAssets/Scripts/jquery-3.2.1.min.js');
            SP.SOD.loadMultiple(['reputation.js', 'jquery-3.2.1'], function () {
                //reputation.js &amp; jquery-3.2.1.min.js have been loaded.
                var context = SP.ClientContext.get_current();
                var web = context.get_web();
                //Check if jQuery has been loaded
                if (typeof jQuery != 'undefined') {
                    console.log("Jquery is loaded");
                }
                else {
                    console.log("Jquery is not loaded!");
                }
            });
        }, "sp.js");
    }, "sp.runtime.js");
})();</pre>
<p>Source: <a href="https://sharepoint.stackexchange.com/questions/92082/uncaught-typeerror-cannot-read-property-get-current-of-undefined" target="_blank" rel="noopener noreferrer">https://sharepoint.stackexchange.com/questions/92082/uncaught-typeerror-cannot-read-property-get-current-of-undefined</a></p>
<p>The post <a href="https://blog.binarybits.net/load-scripts-sharepoint-within-custom-javascript-workflow/">Load scripts in SharePoint within custom Javascript or Workflow</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/load-scripts-sharepoint-within-custom-javascript-workflow/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>File Icons in SharePoint Search Results using Display Template</title>
		<link>https://blog.binarybits.net/file-icons-sharepoint-search-results-using-display-template/</link>
					<comments>https://blog.binarybits.net/file-icons-sharepoint-search-results-using-display-template/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Mon, 11 Jul 2016 05:44:37 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[Display Templates]]></category>
		<category><![CDATA[SharePoint 2013]]></category>
		<category><![CDATA[SharePoint Search]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=777</guid>

					<description><![CDATA[<p>In SharePoint 2013 search results, the icon for a file type like .msg, .txt shows up as .html icon. In SharePoint 2010 this was overcome by mapping the icon file type in DocIcon.xml at WFE Servers. But now since access to WFE servers are restricted in on-prem environment and no access in O-365 environment, the [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/file-icons-sharepoint-search-results-using-display-template/">File Icons in SharePoint Search Results using Display Template</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>In SharePoint 2013 search results, the icon for a file type like .msg, .txt shows up as .html icon.<br />
In SharePoint 2010 this was overcome by mapping the icon file type in DocIcon.xml at WFE Servers.</p>
<p>But now since access to WFE servers are restricted in on-prem environment and no access in O-365 environment, the only solution available is to do the following.</p>
<ol>
<li>Edit the existing display template (I use custom display template with results shown in table and following is based on that) or create a new template for existing for the following located at (SiteCollection/All Files/_catalogs/masterpage/Display Templates/Search) accessible by using SharePoint Designer.
<ol>
<li>xxxSearchTableResults.html</li>
<li>xxxSearchTableItem.html</li>
</ol>
</li>
<li>Add the following codes and it should show correct icons.</li>
</ol>
<p><strong>Search Results Display Template:</strong></p>
<pre class="lang:xhtml decode:true">&lt;div style="width:15px;display:table-cell;text-align:left;font-weight:bold;padding: 5px 0px 4px 10px;"&gt;                                       
&lt;/div&gt;</pre>
<p><strong>Search Item Display Template:</strong></p>
<pre class="lang:xhtml decode:true">&lt;div style="min-width:16px;max-width:16px;display: table-cell;white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;"&gt;                                       
&lt;!--#_
 var extObj = new Object();
extObj["FileExtension"] = ctx.CurrentItem.FileExtension;
 var iconUrl = SP.Utilities.HttpUtility.htmlEncode(Srch.U.ensureAllowedProtocol(Srch.U.getIconUrlByFileExtension(extObj, null)));
if(ctx.CurrentItem.IsContainer)
iconUrl = "/_layouts/15/images/icdocset.gif";
if(ctx.CurrentItem.FileExtension === "msg")
iconUrl = "/_layouts/15/images/icmsg.gif";
//console.log(ctx.CurrentItem.FileExtension);
 _#--&gt;
&lt;img id="_#= $htmlEncode(id + Srch.U.Ids.icon) =#_" onload="this.style.display='inline'" src='_#= iconUrl =#_' /&gt;
 &lt;/div&gt;</pre>
<p><strong>Notes:</strong><br />
<em>ctx.CurrentItem.FileExtension</em> always return the file extension name which seems to match with the file name in the <em>/_layouts/15/images/</em> folder.</p>
<p>For example <strong>msg</strong> = ic<strong>msg</strong>.gif or ic<strong>msg</strong>.png</p>
<p>Once done, the search results will show-up as following</p>
<p><img decoding="async" class="alignnone size-full wp-image-781" src="https://blog.binarybits.net/wp-content/uploads/2016/07/Search-Icon.png" alt="Search-Icon" width="27" height="83" /></p>
<p>The post <a href="https://blog.binarybits.net/file-icons-sharepoint-search-results-using-display-template/">File Icons in SharePoint Search Results using Display Template</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/file-icons-sharepoint-search-results-using-display-template/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Execute Custom JavaScript code in SharePoint Content Editor webpart</title>
		<link>https://blog.binarybits.net/execute-custom-javascript-code-sharepoint-content-editor-webpart/</link>
					<comments>https://blog.binarybits.net/execute-custom-javascript-code-sharepoint-content-editor-webpart/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Tue, 22 Mar 2016 07:36:00 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=752</guid>

					<description><![CDATA[<p>When we try to execute a custom java script code in SharePoint content editor web part, it may not work. The reason behind is that, there might be a conflict occurring during load. Microsoft provides ways to launch your function after full page load and following is one of the method. &#60;script type="text/javascript"&#62; _spBodyOnLoadFunctionNames.push("LaunchCustomCode"); LaunchCustomCode [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/execute-custom-javascript-code-sharepoint-content-editor-webpart/">Execute Custom JavaScript code in SharePoint Content Editor webpart</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>When we try to execute a custom java script code in SharePoint content editor web part, it may not work. The reason behind is that, there might be a conflict occurring during load.</p>
<p>Microsoft provides ways to launch your function after full page load and following is one of the method.</p>
<pre class="lang:xhtml decode:true " >&lt;script type="text/javascript"&gt;
    _spBodyOnLoadFunctionNames.push("LaunchCustomCode");
    LaunchCustomCode = function() {
		ExecuteOrDelayUntilScriptLoaded(MyCode, "sp.js");
	}

	MyCode = function() {
	console.log('My Code Start');
        alert('MyCode Called');
        console.log('My Code Finish');
	}

&lt;/script&gt;</pre>
<p>The post <a href="https://blog.binarybits.net/execute-custom-javascript-code-sharepoint-content-editor-webpart/">Execute Custom JavaScript code in SharePoint Content Editor webpart</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/execute-custom-javascript-code-sharepoint-content-editor-webpart/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Add count to drop down refiners in SharePoint search refinement webpart</title>
		<link>https://blog.binarybits.net/add-count-to-drop-down-refiners-in-sharepoint-search-refinement-webpart/</link>
					<comments>https://blog.binarybits.net/add-count-to-drop-down-refiners-in-sharepoint-search-refinement-webpart/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Thu, 10 Mar 2016 11:43:06 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[Refiners]]></category>
		<category><![CDATA[Search]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=747</guid>

					<description><![CDATA[<p>While working on designing display template for drop down based refiners in SharePoint Search there was a requirement to show counts along with refiners in refiners list. Following is the change which I made in the refiner&#8217;s display template. Actual code &#60;option value='_#= onChangeOrClick =#_'&#62;_#= $htmlEncode(refinementName) =#_&#60;/option&#62;  Updated Code &#60;option value='_#= onChangeOrClick =#_'&#62;_#= $htmlEncode(refinementName) =#_ [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/add-count-to-drop-down-refiners-in-sharepoint-search-refinement-webpart/">Add count to drop down refiners in SharePoint search refinement webpart</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>While working on designing display template for drop down based refiners in SharePoint Search there was a requirement to show counts along with refiners in refiners list.</p>
<p>Following is the change which I made in the refiner&#8217;s display template.</p>
<p><strong>Actual code</strong></p>
<pre class="lang:xhtml decode:true ">&lt;option value='_#= onChangeOrClick =#_'&gt;_#= $htmlEncode(refinementName) =#_&lt;/option&gt;</pre>
<p><strong> Updated Code</strong></p>
<pre class="lang:xhtml decode:true  ">&lt;option value='_#= onChangeOrClick =#_'&gt;_#= $htmlEncode(refinementName)  =#_  (_#= refinementCount =#_)&lt;/option&gt;</pre>
<p>The post <a href="https://blog.binarybits.net/add-count-to-drop-down-refiners-in-sharepoint-search-refinement-webpart/">Add count to drop down refiners in SharePoint search refinement webpart</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/add-count-to-drop-down-refiners-in-sharepoint-search-refinement-webpart/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Hide Available Refiners in SharePoint search refinement panel</title>
		<link>https://blog.binarybits.net/hide-available-refiners-in-sharepoint-search-refinement-panel/</link>
					<comments>https://blog.binarybits.net/hide-available-refiners-in-sharepoint-search-refinement-panel/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Tue, 08 Mar 2016 10:37:02 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[Refiners]]></category>
		<category><![CDATA[Search]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=737</guid>

					<description><![CDATA[<p>Recently one of the customer had a strange request where the customer wanted to Hide &#8220;Available Refiners&#8221; in SharePoint search refinement panel. The &#8220;Available Refiners&#8221; is available in &#8220;Drop Down&#8221; type refinement panel. When the refinement panel is being loaded, SharePoint executes a JavaScript function named AddPostRenderCallback. This would be available in the Refinement Display [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/hide-available-refiners-in-sharepoint-search-refinement-panel/">Hide Available Refiners in SharePoint search refinement panel</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Recently one of the customer had a strange request where the customer wanted to Hide &#8220;Available Refiners&#8221; in SharePoint search refinement panel.</p>
<p>The &#8220;Available Refiners&#8221; is available in &#8220;Drop Down&#8221; type refinement panel.</p>
<p><a href="https://blog.binarybits.net/wp-content/uploads/2016/03/sharepoint-refinement-panel.png" target="_blank"><img decoding="async" class="alignnone wp-image-738 size-full" src="https://blog.binarybits.net/wp-content/uploads/2016/03/sharepoint-refinement-panel.png" alt="SharePoint Refinement Panel" width="235" height="140" /></a></p>
<p>When the refinement panel is being loaded, SharePoint executes a JavaScript function named <em>AddPostRenderCallback</em>. This would be available in the Refinement Display Template located under MasterPage/Search Gallery. The actual method looks like below code which is taken from O365.</p>
<pre class="lang:js decode:true" title="Add Post Rende rCallback">AddPostRenderCallback(ctx, function() {
    if (hasAnyFiltertokens) {
        // Get the hidden block
        var hiddenOptions = document.getElementById(hiddenBlockID).children;
        var unSelGroup = document.getElementById(unselDD);
        var selGroup = document.getElementById(selDD);
        // Clone all the elements from the hidden list to the unselected option group
        for (var i = 0; i &lt; hiddenOptions.length; i++) {
            var selectedElm = GetAllElementsWithAttribute(selGroup, 'value', hiddenOptions[i].getAttribute('value').replace('updateRefinersJSON', 'removeRefinementFiltersJSON'));
            if (selectedElm === null || selectedElm.length &lt;= 0) {
                var cloneElm = hiddenOptions[i].cloneNode(true);
                unSelGroup.appendChild(cloneElm);
            }
        }
    }
});</pre>
<p>To the above original code I made a small change so that &#8220;Clone all the elements&#8221; code executes only when user has selected a refiner.</p>
<pre class="lang:c# decode:true " title="Existing " clone="" all="" the="" elements="" code="">// Clone all the elements from the hidden list to the unselected option group
if(selectedFilters.length &lt;= 0)
{
	for (var i = 0; i &lt; hiddenOptions.length; i++) {
		var selectedElm = GetAllElementsWithAttribute(selGroup, 'value', hiddenOptions[i].getAttribute('value').replace('updateRefinersJSON', 'removeRefinementFiltersJSON'));
		if (selectedElm === null || selectedElm.length &lt;= 0) {
			var cloneElm = hiddenOptions[i].cloneNode(true);
			unSelGroup.appendChild(cloneElm);
		}
	}
}
</pre>
<p>To the above orignal code I added the following code to hide the &#8220;Available Refiners&#8221; option.</p>
<pre class="lang:c# decode:true" title="Hide Available Refiners">if(selectedFilters.length &gt; 0)
{
	if(unSelGroup!=null)
	{
		unSelGroup.style.display = 'none';
	}
}</pre>
<p>The above code will hide the &#8220;unSelGroup&#8221;&#8216;s &#8220;Option Group&#8221; HTML to hide the Options for &#8220;Available Refiners&#8221;.</p>
<p>Final code would look like below.</p>
<pre class="lang:c# decode:true " title="Hide Available Refiners in AddPostRenderCallback">AddPostRenderCallback(ctx, function() {
    if (hasAnyFiltertokens) {
        // Get the hidden block
        var hiddenOptions = document.getElementById(hiddenBlockID).children;
        var unSelGroup = document.getElementById(unselDD);
        var selGroup = document.getElementById(selDD);
        // Clone all the elements from the hidden list to the unselected option group
        if(selectedFilters.length &lt;= 0)
        {
            for (var i = 0; i &lt; hiddenOptions.length; i++) {
                var selectedElm = GetAllElementsWithAttribute(selGroup, 'value', hiddenOptions[i].getAttribute('value').replace('updateRefinersJSON', 'removeRefinementFiltersJSON'));
                if (selectedElm === null || selectedElm.length &lt;= 0) {
                    var cloneElm = hiddenOptions[i].cloneNode(true);
                    unSelGroup.appendChild(cloneElm);
                }
            }
        }
        //Added for Gold Asset requirement where once a refiner is selected the "Avaialble Refiners" item should be made hidden
        if(selectedFilters.length &gt; 0)
        {
            if(unSelGroup!=null)
            {
                unSelGroup.style.display = 'none';
            }
        }
        
        var refinerUpArrow = document.getElementById('refinerExpandCollapseArrow');
        if(refinerUpArrow!=null)
        {
            refinerUpArrow.style.display = 'none';
        }
        
    }
});

</pre>
<p>End Result is following<br />
<a href="https://blog.binarybits.net/wp-content/uploads/2016/03/sharepoint-hidden-available-refiners-option.png" target="_blank"><img decoding="async" class="alignnone wp-image-739 size-full" src="https://blog.binarybits.net/wp-content/uploads/2016/03/sharepoint-hidden-available-refiners-option.png" alt="Hidden Available Refiners Option Group" width="169" height="69" /></a></p>
<p>The post <a href="https://blog.binarybits.net/hide-available-refiners-in-sharepoint-search-refinement-panel/">Hide Available Refiners in SharePoint search refinement panel</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/hide-available-refiners-in-sharepoint-search-refinement-panel/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Clear SharePoint Search Results</title>
		<link>https://blog.binarybits.net/clear-sharepoint-search-results/</link>
					<comments>https://blog.binarybits.net/clear-sharepoint-search-results/#respond</comments>
		
		<dc:creator><![CDATA[Kannan]]></dc:creator>
		<pubDate>Mon, 07 Mar 2016 08:33:57 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[SharePoint]]></category>
		<category><![CDATA[Search]]></category>
		<guid isPermaLink="false">https://blog.binarybits.net/?p=734</guid>

					<description><![CDATA[<p>Recently I had a requirement for OOTB search Box + Result where the customer wanted to clear the search results regardless of any refinement selected or not. To implement this, in the display template HTML the following was added. Do note that if refinements are there, the commented single line of code didn&#8217;t work and [&#8230;]</p>
<p>The post <a href="https://blog.binarybits.net/clear-sharepoint-search-results/">Clear SharePoint Search Results</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Recently I had a requirement for OOTB search Box + Result where the customer wanted to clear the search results regardless of any refinement selected or not.</p>
<p><a href="https://blog.binarybits.net/wp-content/uploads/2016/03/clear-sharepoint-search-results.png" target="_blank" rel="noopener"><img loading="lazy" decoding="async" class="alignnone wp-image-741 size-medium" src="https://blog.binarybits.net/wp-content/uploads/2016/03/clear-sharepoint-search-results-300x43.png" alt="Clear SharePoint Search Results" width="300" height="43" srcset="https://blog.binarybits.net/wp-content/uploads/2016/03/clear-sharepoint-search-results-300x43.png 300w, https://blog.binarybits.net/wp-content/uploads/2016/03/clear-sharepoint-search-results.png 565w" sizes="auto, (max-width: 300px) 100vw, 300px" /></a></p>
<p>To implement this, in the display template HTML the following was added.</p>
<p>Do note that if refinements are there, the commented single line of code didn&#8217;t work and I had to replace the entire # as blank. Do check the original source (mentioned below) for more information.</p>
<pre class="lang:xhtml decode:true" title="Clear SharePoint Search Result">&lt;!--#_
    clearSearchResults = function()
    {
        var hash = window.location.hash;
        if( hash.indexOf('Default') == 1 ) {
            hash = unescape(hash);
            var kIdx = hash.indexOf('"k":'); 
            var rIdx = hash.indexOf('","'); 
            var query = hash.substring(kIdx+5,rIdx);
            query = query.replace(/\\/g, '');
            //window.location.href = window.location.pathname + window.location.search + '#k=' + escape(query);
            window.location.href = window.location.pathname + window.location.search + '#';
        } else {
            window.location.href = window.location.pathname + window.location.search + "#";
        }                    
    }
_#--&gt;
&lt;div id="ClearSearch" class="ms-alignCenter"&gt;
    &lt;h2&gt;&lt;a onclick="clearSearchResults();"  style="cursor:pointer"&gt;Clear/Reset All&lt;/a&gt;&lt;/h2&gt;
&lt;/div&gt;</pre>
<p>The source for the above code is <a href="http://www.techmikael.com/2013/06/add-clear-filters-link-to-your-search.html" target="_blank" rel="noopener">Add a “Clear Filters” link to your search page in SharePoint 2013</a></p>
<p>The post <a href="https://blog.binarybits.net/clear-sharepoint-search-results/">Clear SharePoint Search Results</a> appeared first on <a href="https://blog.binarybits.net">Binary Bits</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://blog.binarybits.net/clear-sharepoint-search-results/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced 
Minified using Disk

Served from: blog.binarybits.net @ 2026-04-19 12:35:50 by W3 Total Cache
-->