1,707 articles and 12,967 comments as of Monday, September 27th, 2010

Wednesday, November 11, 2009

jQuery – List and Document Library Filter Version 2.0 – Part 2

Peter AllenGuest Author: Peter Allen
BitsOfSharePoint

On Oct. 20th I released a solution that would filter any list in SharePoint.  The purpose of the solution was to make it easy to get to the information needed from the list currently being viewed.  Original article: jQuery – List and Document Library Filtering Solution In the latest version 2.0 the purpose has not changed, but improvements have been added.   Based on feedback from others there were a few features requested.

Here is what has been improved in version 2.0:

  • Speed Improvements – Improved the speed to display the results by 4x for large lists.
  • Grouped Lists – Added a solution to better able grouped list filtering.
  • Add Comments – You can easily add comments to the filter box for the end-user.
  • Filter Box Position – You can now easily position the filter box to the left, center or right on the page.
  • New Options Interface – The new options interface makes it so that any of the above customizations can be done code free.

Speed

The first version slowed a bit for larger lists.  I reworked the code to bring additional improvements to the speed of showing the filtered results.  As a result the filtering is about 4 times faster than before.  This should make filtering larger list much better.

Grouped Lists

The first version did not handle grouped lists if they were collapsed.  There are a few challenges with collapsed lists.  The big one is that none of the data in the list is loaded.  This is good from a page loading stand point and makes the page come up faster.  But since there is no data loaded the Filter List has nothing to filter and the results show nothing.  The solution I deployed uses one of Paul Grenier’s jQuery solutions to expand all groupings.  So the solution provides a link to expand all groupings.  This will then load all the data and the Filter List solution will then have something to filter.  You will notice that grouping headers disappear after filtering.  I do not keep the grouping headers for several reasons.  The grouping header shows how many items are in that group.  This is calculated at the server and then displayed locally.  It would mean that when filtered the groupings would still show the original number of items in a group.  So as not to confuse people the groupings are removed.


jQuery List Filter
This image shows the new option to expand groups.  This will only show up if the list is grouped.

Add Comments

You now have the ability to add comments to be show in the Filter Box.  I noticed on some implementations that people added comments and so I made this a feature.  It is very simple; if comments are added the options interface (read below)  then it will show.  If the comments field is blank then the comments area does not shows up.  This is all done with the new interface that I will explain more below.

jQuery List Filter
This image shows what it looks like with comments added.

Filter Box Position

I realized that some people like to have the filter box in different places.  So I added the feature where you can designate if the filter box is to the right, center or left on the page.  Again, no need to go into the code to figure this out.  You can do this all from the new interface.

Options Interface

To improve on the end-user experience I have implemented a new way to make changes to various aspect of the solution without having to go into the code.  All of the changes can now be done through the Rich Text Editor (RTE).  That is correct, just choose Modify Shared Web Part for the edit pull down and then select Rich Text Editor in right panel.  You will then be presented with a view of the options that can be changed.  All the gray boxes are values that can be changed.  Simply follow the Option’s Help to make the necessary changes.  I will be deploying this on all future solutions.  For CEWP solution developers I will be launching a site that will go over how to integrate this into your solutions.

jQuery List Filter
This image shows the new end-user interface to be code free in making changes.

Conclusion

Filter List version 2.0 now has improved speed, ability to address grouped lists, add comments, position the filter box, and a new options interface to make it easy to change these options.  I look forward to your feedback on this latest version.

The new version 2.0 can be found here:  http://www.bitsofsharepoint.com/ExamplePoint/Site/ListSearch.aspx

Peter AllenGuest Author: Peter Allen
BitsOfSharePoint

Peter Allen is a SharePoint enthusiast and evangelist having deployed solutions in Healthcare, financial, and engineering firms.  He has worked in the technology field for 15 years creating solutions both internally and externally for clients. He has worked at start-ups, mid and larger corporations and has consulted.  He currently hosts a site http://www.bitsofsharepoint.com where he blogs about solutions to extend the features of SharePoint.

View all entries in this series: PeterAllen - jQuery List and Document Library»
Entries in this series:
  1. jQuery - List and Document Library Search Solution in SharePoint
  2. jQuery – List and Document Library Filter Version 2.0 - Part 2
 

Please Join the Discussion

14 Responses to “jQuery – List and Document Library Filter Version 2.0 – Part 2”
  1. Shalin Parmar says:

    Why doesn’t the Collapse option appear after we expand it?

  2. Peter Allen says:

    Shalin,

    The code for that to happen is there, I was not sure the best way to implement it, so it was not implemented. For example when you click collapse does it reset the filter or not.

    If you would like test this for me I have a web part with it enabled. Just send me an email.

    Anyone else wish this feature was available?

  3. Shalin Parmar says:

    Peter,

    Well I think when we say collapse it should go back to the default view as per my view, so i think it will reset the filter as well because it is no more applicable. What do you think?

  4. Peter Allen says:

    Shalin,

    Email me so that I can have you test out this feature. [email protected]

  5. Chris Doran says:

    When editing the Filter box location, using the Rich Text Editor, from right to left, the whole List Filter Configuration shows. It should stay hidden.

    I have the same issue if I change it to center.

    Option Filter Box Location
    Value left
    Help left, center, or right. You can set where the filter box is displayed by entering in either left, center or right.
    Option Comments

    — This is what shows up —

    List Filter – Configuration
    Overview Here you can change the location of the filter box and add comments that the enduser can see.
    OPTIONS
    Option Filter Box Location
    Value left
    Help left, center, or right. You can set where the filter box is displayed by entering in either left, center or right.
    Option Comments
    Value
    Help You can add comments for the endusers who use this. Leave blank to have no comments show.
    Option jQuery File
    Value http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
    Help Only change this option if you want to use a local copy of the jQuery file.
    —- Change only the gray boxes on this page. —-

    Please do not Edit, Change or Add any information below this line.

    ——————————————————————————–

  6. Chris Doran says:

    Issue above. If I edit it in the Source Code it works fine.

  7. Peter Allen says:

    Chris,

    I am not sure from what you describe, what issue you are having. Can you email me, [email protected], with screen shots?

    Screen shot of where the configuration editor is showing and a screen shot of th Rich Text Editor.

    Thanks.

  8. Chris Doran says:

    Peter -

    I am getting this error on 2 different email accounts I am using to respond to you.

    This is an automatically generated Delivery Status Notification.

    Delivery to the following recipients failed.

    [email protected]

  9. Rene says:

    This is a great tool, I just can’t get it to work right!

    I have a document library with over 1500 documents and it only finds the items which are in view. I do have two groupings enabled on the view. I downloaded the latest version 2.1 and it does not find items that are not in the view. Please help!

  10. Rene says:

    This worked great, thanks for all your help. Great instructions, I was able to follow easily and I’m a novice with Sharepoint Designer.

  11. Scott says:

    Peter,
    Is there a way to not show the expand\collapse options at all? Is it as simple as commenting out some code?
    Thanks for this solution. It is a huge benefit

    Scott

  12. Peter Allen says:

    That is a good feature request. When I have time I will look at incorporating it. For now you can comment out or just take out the table row for option in the code. This can be found at the bottom of the code. This should only be done if your list is not grouped.

    Option:
      (Click to Filter All Grouped Items)   (Click to Reset and Collapse List)


Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!