My cascading refinement solution builds upon the instant refinement solution described in my previous post. The modifications update
the result counts in other multi-refinement property sections as well as
disables the filters that are no longer available because of the initial refinement.
Step 1: Store the Property Selected First
Since the cascading is based on the property that is refined
first, you must store the property.
Step 2: Evaluate the List Data and Modify Accordingly
At the top of the file, create a new array to store and
process the list data and previous refiners. Add logic to set the list data to
the previous refiners.
Step 4: Flag Filters that Should Be Disabled
For the disabled version, just copy the input for the unselected check box but add the disabled=”disabled” property.
Finally in the label, add the a style property using the fontWeight variable.
Step 7: Test the Cascade Functionality
GET ALL OF THE CODE AND DETAILED STEPS IN MY NEW SEARCH EXPERIENCE GUIDE:
SPECIAL LOW KINDLE PRICE!!!
This post describes a high level overview of the steps necessary for the cascading refinement functionality. You may find the code and more detailed steps in my new Enhancing the Search Experience in SharePoint 2013 guide book.
Step 1: Store the Property Selected First
Since the cascading is based on the property that is refined
first, you must store the property.
Step 2: Evaluate the List Data and Modify Accordingly
At the top of the file, create a new array to store and
process the list data and previous refiners. Add logic to set the list data to
the previous refiners.Step 3: Determine if Filter is Still Available and Update the Refinement Count
Within the !hasNoListData condition block, change the
refiners.push logic.
Step 4: Flag Filters that Should Be Disabled
Flagging the filters that should be disabled involves two
modifications. The first is to add logic to the hasFilterTokens condition. The second portion involves adding an else condition to the
hasFIlterTokens if statement.
Step 5: Save Changes to the Template File
Step 6: Modify the Body Display Template
Within the for-loop, create an isDisabled variable and a
fontWeight variable.
In the isSelected if statement, add fontweight=”bold”; :
Branch the else statement to check for isDisabled.For the disabled version, just copy the input for the unselected check box but add the disabled=”disabled” property.
Finally in the label, add the a style property using the fontWeight variable.
Save the changes to the body file.
Step 7: Test the Cascade Functionality
Navigate to the search results page that contains the multi
value refinements:
Click on one of the filters.
SPECIAL LOW KINDLE PRICE!!!
Hi sir, Very good explanation, but still I am facing little problem, if you don't mind can you please explain with an example?
ReplyDeleteThe full example is available in my Enhancing the Search Experience guide book.
DeleteSteve - I bought your book today - and it is wonderful - thanks. However, I'm trying to figure our how to create the physical multi-value refinements that are to appear on the search results page such as those shown above. Is there a post that would show me how to go about that?
ReplyDeleteThanks
The bcs bonus chapter shows a little. Some of the properties are set to Refinable. For multi-value you must also check the Allow Multiple Values. Then when you are configuring the refinenent web part you select the multi-value display template.
DeleteLet me know if you need explicit steps. I'll plan on creating a post on it.
DeleteI actually started on something similar in a project today, not seeing this post before. In your approach, are you storing the initial refiners, and then setting values/disable as needed? Also, if you have a third refiner which limits what you see in the Category refiner, will that also update the counts of the sub-category refiner?
ReplyDeleteThanks
Hello Mikael! I've run into your blog/articles many times. My solution treats the first refiner selected as the controller such that it forces the second and third set to change their counts and become disabled if now there are zero occurances. Let me check about the behavior of the third set if something is selected in second and I'll let you know (currently on train).
DeleteHere are the answers to your questions:
Delete1) Yes I store all initial refiners. You need to do this otherwise the postback on the selection doesn't bring all of the original refiners back again (only the selected ones).
2) Yes. Selecting a refiner from the first category, updates the second and third. Selecting a second refiner from the second category updates the third and the counts in the first one.
Send me an email (steve at stevethemanmann.com) and I can give you more details...
-=Steve
Hello Steve I bought your book and implemented cascading solution, but I am facing one problem. With your solution if I select a value from first category it will retain all filters under that category and disable filter that are no longer avaialbe in other category. Now when I select some filter value from different category I want retain that category state and disbale filters in other category that are not available, this is not happening right now. Cascading works for only first selected category
ReplyDeletePlease help!
The first category becomes the controller. I'll look at my code and send you an update.
DeleteThe quickest way to change this behavior is to remove the entire if-else-if block at the bottom of Filter_MultiValue.html that checks the PropertySelectedFirst. The reason I implemented the first category as the controller is, as you will see, without it the user is locked into that first selection. You would need a clear button to reset the refiners.
DeleteSorry Steve this is not working as I am expecting. How can I share my updated js with you so that you can check the changes which I did are correct or not.
DeleteYou can send to steve at stevethemanmann.com. I'll try to play with it on my end in the mean time...
DeleteHi Steve, I bought your book and implemented cascading solution. Only Instant Refinement of Multi Value Properties works. The cascading solution does not affect my site. Can I send my files to you through email so that you can tell me what I did wrong?
ReplyDeleteI have an updated template. Send me an email - steve at stevethemanmann.com.
DeleteHi Steve, it's possible with your solution, to filter from the refiner panel a google maps ubications?, for example integrating the google api with the refiners? Thanks
ReplyDeleteThe refiner values from google maps would have to be part of the crawled properties, otherwise, the OOTB search refinement would not know how to refine the results.
Delete