Multivalue Dropdown Refiner Sharepoint 2013

-

Filter Multivalue dropdown.html
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Multi-value Dropdown Refinement Item</title>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:CompatibleManagedProperties msdt:dt="string"></mso:CompatibleManagedProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:CompatibleSearchDataTypes msdt:dt="string"></mso:CompatibleSearchDataTypes>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106604</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Refinement;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:_dlc_DocId msdt:dt="string">7QNHQRECQA2S-2-1893</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">679cf8ef-c0e0-4dd9-82f5-b5823606c43d</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">YoursiteCol/_layouts/15/DocIdRedir.aspx?ID=7QNHQRECQA2S-2-1893, 7QNHQRECQA2S-2-1893</mso:_dlc_DocIdUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://dev365x785065.sharepoint.com/sites/SearchDemo/_catalogs/masterpage/Display Templates/Filters/Filter_MultiValueDropdown.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties></xml><![endif]-->
</head>
<body>
<script>
   
$includeCSS("", "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css");

    $includeCSS("", "~sitecollection/Style%20Library/Jquery/jquery.multiselect.css");
    $includeScript("", "~sitecollection/Style%20Library/Jquery/jquery.multiselect.filter.min.js");


    $includeScript("", "https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-multiselect-widget/2.0.1/jquery.multiselect.js");
    $includeScript("", "~sitecollection/_catalogs/masterpage/Display Templates/Filters/Filter_MultiValueDropdown_Body.js");
 
</script>
<div id="Filter_MultiValueDropdown">
<!--#_
var Options = {
    ShowCounts: false
};

var listData = ctx.ListData;
var hasControl = !$isNull(ctx.RefinementControl) && !$isNull(ctx.ClientControl);

if(hasControl) {
    var hasNoListData = ($isEmptyArray(listData));

    var propertyName = ctx.RefinementControl.propertyName;
    var displayTitle = Srch.Refinement.getRefinementTitle(ctx.RefinementControl);
    var isExpanded = Srch.Refinement.getExpanded(ctx.RefinementControl.propertyName);
    var useContains = false;
    var useKQL = false;
    var refiners = [];

    var currentRefinementCategory = ctx.ClientControl.getCurrentRefinementCategory(ctx.RefinementControl.propertyName);
    var hasAnyFilterTokens = (!$isNull(currentRefinementCategory) && currentRefinementCategory.get_tokenCount() > 0);
    var renderEmptyContainer = hasControl && (hasNoListData && !hasAnyFilterTokens);
    if(!renderEmptyContainer) {
        var listDataTokenToDisplayMap = {};
        var listDataTokenToCountMap = {};
        if(!hasNoListData) {
            for (var i = 0; i < listData.length; i++) {
                var filter = listData[i];
                if(!$isNull(filter)) {
                    listDataTokenToDisplayMap[filter.RefinementToken] = filter.RefinementName;
                    listDataTokenToCountMap[filter.RefinementToken] = filter.RefinementCount;
                    if(!hasAnyFilterTokens && !$isEmptyString(filter.RefinementName) && !$isEmptyString(filter.RefinementToken)) {
                        refiners.push(
                        { 
                            RefinementName: filter.RefinementName,
                            RefinementToken: filter.RefinementToken,
                            RefinementCount: filter.RefinementCount,
                            IsSelected: false
                        });
                    }
                }
            }
        }
        if(hasAnyFilterTokens) {
            for(var j = 0; j < currentRefinementCategory.get_tokenCount(); j++) {
                var token = currentRefinementCategory.t[j];
                var displayValue = listDataTokenToDisplayMap[token];
                if($isEmptyString(displayValue) && !$isNull(currentRefinementCategory.m)) {
                    displayValue = currentRefinementCategory.m[token];
                }
                if(!$isEmptyString(displayValue) && !$isEmptyString(token))
                {
                    refiners.push(
                    { 
                        RefinementName: displayValue,
                        RefinementToken: token,
                        RefinementCount: !$isNull(listDataTokenToCountMap[token]) ? listDataTokenToCountMap[token] : 0,
                        IsSelected: true
                    });
                }
            }
        }
    }
    ctx["DisplayTemplateData"]["BodyTemplateId"] = "~sitecollection/_catalogs/masterpage/Display Templates/Filters/Filter_MultiValueDropdown_Body.js";
    ctx.RefinementControl["csr_propertyName"] = propertyName;
    ctx.RefinementControl["csr_displayTitle"] = displayTitle;
    ctx.RefinementControl["csr_filters"] = refiners;
    ctx.RefinementControl["csr_isExpanded"] = isExpanded;
    ctx.RefinementControl["csr_renderEmptyContainer"] = renderEmptyContainer;
    ctx.RefinementControl["csr_useContains"] = useContains;
    ctx.RefinementControl["csr_useKQL"] = useKQL;
    ctx.RefinementControl["csr_showCounts"] = Options.ShowCounts;
_#-->
        _#= ctx.RenderBody(ctx) =#_
<!--#_
}

ctx.OnPostRender = [];
ctx.OnPostRender.push(function () {
jQuery(document).ready(function() {
jQuery("#s4-workspace").scroll(function (event) {
if(jQuery('.ui-multiselect-menu.ui-widget.ui-widget-content.ui-corner-all').length)
{

jQuery('.ui-multiselect-menu.ui-widget.ui-widget-content.ui-corner-all').each(function( index ) {

if(jQuery(this).is(":visible"))
{
jQuery(this).find('a.ui-multiselect-close').click();
}
});
}
            });


//Get Checked
jQuery("#" + propertyName + "Select").multiselect({
selectedList: 10,
close: function() {
var refinement = {};
refinement[ctx.RefinementControl.propertyName] = [];
jQuery("#" + propertyName + "Select").multiselect("getChecked").each(function() {
refinement[ctx.RefinementControl.propertyName].push('"' + $(this).val() + '"');
                   
});
if (refinement[ctx.RefinementControl.propertyName].length == 0) {
delete refinement[ctx.RefinementControl.propertyName];
}
$getClientControl(this).updateRefinersJSON('{"' + ctx.RefinementControl.propertyName + '":null}');
$getClientControl(this).addRefinementFiltersJSONWithOr(JSON.stringify(refinement));
}
});

if (!hasAnyFilterTokens && array_of_checked_values.length != 0)
{
jQuery("#" + propertyName + "Select").multiselect("uncheckAll");
debugger;

//select an option by default - Working
//jQuery("#" + "DisplayAuthor" + "Select").multiselect("getLabels").find("input[value='ǂǂ42656e2057616c74657273']").click();
//jQuery("select").multiselect("refresh");

  }
jQuery("#" + propertyName + "Select").multiselect().multiselectfilter();
jQuery("#" + propertyName + "Select").multiselect();
jQuery("button.ui-multiselect").css("min-width", "380px");
jQuery(".ui-multiselect-menu").css("min-width", "372px");
});
jQuery(".ms-ref-refinername").css("width", "100%");

});

_#-->
<!--#_
   var array_of_checked_values = [];
   AddPostRenderCallback(ctx, function(){
   jQuery("#" + "FileType" + "Select").multiselect("getLabels").find("input[value='ǂǂ786c7378']").click();
   //jQuery("#" + "DisplayAuthor" + "Select").multiselect("getLabels").find("input[value='ǂǂ53636f7474205275626c65']").click();
   jQuery( "input[value='ǂǂ61737078']" ).prop('checked', true);
   jQuery("select").multiselect("refresh");
 
   jQuery(this).find('a.ui-multiselect-close').click();
 
   jQuery("select").multiselectfilter("updateCache");
   jQuery("select").triggerHandler("multiselectclick");
   var values = $("#" + "DisplayAuthor" + "Select").val();
   debugger;
   var array_of_checked_values = [];
var array_of_checked_values = $("#" + "DisplayAuthor" + "Select").multiselect("getChecked").map(function(){
   return this.value;   
}).get();
   });
_#-->
    </div>
</body>
</html>

Filter Multivaluedropdownbody.html

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>Multi-value Dropdown Refinement Item Body</title>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:CompatibleManagedProperties msdt:dt="string"></mso:CompatibleManagedProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:CompatibleSearchDataTypes msdt:dt="string"></mso:CompatibleSearchDataTypes>
<mso:MasterPageDescription msdt:dt="string"></mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106604</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#Refinement;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:_dlc_DocId msdt:dt="string">7QNHQRECQA2S-2-1893</mso:_dlc_DocId>
<mso:_dlc_DocIdItemGuid msdt:dt="string">679cf8ef-c0e0-4dd9-82f5-b5823606c43d</mso:_dlc_DocIdItemGuid>
<mso:_dlc_DocIdUrl msdt:dt="string">yoursitecol/_layouts/15/DocIdRedir.aspx?ID=7QNHQRECQA2S-2-1893, 7QNHQRECQA2S-2-1893</mso:_dlc_DocIdUrl>
<mso:HtmlDesignConversionSucceeded msdt:dt="string">True</mso:HtmlDesignConversionSucceeded>
<mso:HtmlDesignStatusAndPreview msdt:dt="string">https://dev365x785065.sharepoint.com/sites/SearchDemo/_catalogs/masterpage/Display Templates/Filters/Filter_MultiValueDropdown_Body.html, Conversion successful.</mso:HtmlDesignStatusAndPreview>
</mso:CustomDocumentProperties></xml><![endif]-->
</head>
<body>
<div id="Filter_MultiValueDropdown_Body">
<!--#_
var propertyName = ctx.RefinementControl["csr_propertyName"];
var displayTitle = ctx.RefinementControl["csr_displayTitle"];
var filters = ctx.RefinementControl["csr_filters"];
var isExpanded = Boolean(ctx.RefinementControl["csr_isExpanded"]);
var renderEmptyContainer = Boolean(ctx.RefinementControl["csr_renderEmptyContainer"]);
var useContains = Boolean(ctx.RefinementControl["csr_useContains"]);
var useKQL = Boolean(ctx.RefinementControl["csr_useKQL"]);
var showCounts = Boolean(ctx.RefinementControl["csr_showCounts"]);

if($isEmptyString(propertyName) || (!$isNull(renderEmptyContainer) && renderEmptyContainer))
{
_#-->
<div id="EmptyContainer"></div>
<!--#_
}
else if(!$isNull(filters) && Srch.U.isArray(filters) && !$isEmptyArray(filters))
{
var expandedStatus = !$isNull(isExpanded) ? isExpanded : true;
var iconClass = "ms-core-listMenu-item ";
iconClass += expandedStatus ? "ms-ref-uparrow" : "ms-ref-downarrow";
_#-->
<div id="Container">
_#= Srch.U.collapsibleRefinerTitle(propertyName, ctx.ClientControl.get_id(), displayTitle, iconClass) =#_
<div class="ms-ref-unselSec" id="UnselectedSection">
<div id="unselShortList" class="ms-ref-unsel-shortList">
<select id="_#= propertyName =#_Select" style="width: 200px" multiple="multiple">
<!--#_
for (var i = 0; i < filters.length; i++){
var filter = filters[i];
if(!$isNull(filter)){
var isSelected = Boolean(filter.IsSelected);
var inputName = propertyName + '_ChkGroup';
var inputId = inputName + "_" + filter.RefinementName;
var nameClass = "ms-ref-name " + (showCounts ? "ms-displayInline" : "ms-displayInlineBlock ms-ref-ellipsis");
var token = filter.RefinementToken.substr(filter.RefinementToken.indexOf("\"") + 1);
token = token.substr(0, token.lastIndexOf("\""));
if(isSelected) {
_#-->
<option id="_#= $htmlEncode(inputId) =#_" name="_#= $htmlEncode(inputName) =#_" value="_#= $htmlEncode(token) =#_" selected="selected">
_#= $htmlEncode(filter.RefinementName) =#_
<span id='RefinementCount' class='ms-ref-count ms-textSmall'> (_#= $htmlEncode(Srch.U.toFormattedNumber(filter.RefinementCount)) =#_) </span>
</option>
<!--#_
} else {
_#-->
<option id="_#= $htmlEncode(inputId) =#_" name="_#= $htmlEncode(inputName) =#_" value="_#= $htmlEncode(token) =#_">
_#= $htmlEncode(filter.RefinementName) =#_
<span id='RefinementCount' class='ms-ref-count ms-textSmall'> (_#= $htmlEncode(Srch.U.toFormattedNumber(filter.RefinementCount)) =#_) </span>
</option>
<!--#_
}
}
}
_#-->
</select>
</div>
</div>
</div>
<!--#_
}
_#-->
</div>
</body>
</html>


Comments

Post a Comment

Popular posts from this blog

Birthday Javascript Sharepoint 2013

-
Below is the code to pull birthdays using REST API search Sharepoint 2013. Create a Refinable Property like RefinableString or Refinabledate according to the requirement. In my case I had to try both and had an issue with Refinabledate since the month was getting appended to the year. Lets say someone has mar 23rd as birthday in User profile property, the date was showing as 01-03-2023. Hence I had to assign it to a string. Since in our environment it was a dd-mmm(no year) format which was a custom profile property, It was showing 23rd-March in my case. Once RefinableString02 was assigned it was showing the same dd-mmm format. For getting the right url you need to have the querytext as * and source id to the people, and select the properties required which is  "Title,RefinableString02,Path". Then fire an ajax query as below with the rest url as below:https://yoursitecollurl/_api/search/query?querytext=%27Refinabledate00%3E%222-7-2000%22%27&sourceid=%27B09A7990-05E...
Read more

Event Registration Sharepoint 2013

-
SP doesn't provide any OOB way to stop registration if seats are filled. Or any way to unregister from an event. To do this I created 2 code blocks, one for registration and another for unregistering. The basic idea was from this blog when I was searching for any code to do this. However this uses the Infopath. Since Infopath is becoming obsolete, I had to create ajax and java script updates to lists. Register and Unregister from an event Steps to Follow 1. Create Create 2 lists "Events" & "Volunteer Signup" I will provide steps to perform for the code to execute. Register <script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getCurrentUser); document.getElementById("Meetin...
Read more