Skip Ribbon Commands
Skip to main content

Tanmay Shahane | zevenseas | SharePoint Blog

:

Tanmay Shahane | zevenseas | SharePoint Blog > Posts > Sorting Filtering client side .. Rich user experience with JQUERY and ECMA script client object model
August 19
Sorting Filtering client side .. Rich user experience with JQUERY and ECMA script client object model

 

Hello kind readers…
 
So I am back..  With some more stuff to share and not to bore you… so please pardon me if this is something you already knew about…  I mostly write the things I do based on a sandbox solution application
 
Hmm so where to begin from … after the party last night ...errrrr no lets begin with SharePoint straight away :)
 
So this topic has come to my pages for the diggings I did for getting the term store values on a custom html made button, I thought it would work but recently I was happy to find a way to have it and then realized the concept can be used on all fields and could give us a rich user experience solution. Ok enough bla bla now meaningful stuff…
 
Many times we build web parts which show aggregated data from different lists based on some content type or template or something.. So basically like what the content query web part has… but then again in these web parts  we miss the feature of sorting and filtering.. The sweet option we get with the list view web parts… this could be a real important feature at times … and YES now you can have this totally client side without having to refresh the whole page...how can we do that.. Well with the Deathly hollows.. No no we are not watching Harry potter again…(saved u) .. The three masters .. Jquery.. Client object model and SharePoint!!!
 
Initial reason of digging:
As I said earlier getting term store values for field was something I wanted in a dynamically built, from Jquery, html form … and finally came to rescue was a cool page from layouts… the /_layouts/Filter.aspx. 
This page returns all the respective sorting and filtering data from a given viewID on listID with field internal name.
So if you give… /sites/smeweb/_layouts/filter.aspx?ListId={GUID}&FieldInternalName=<TaxonomyColumnInternalName>&ViewId={GUID}&FilterOnly=1&Filter=1
 
Then this nicely returns you all the terms in the term set associated with the field name you specified (You don need the field id, just internal name is enough) So you get all the terms with their respective ids. This all is returned in a well formed HTML UL … so this is basically how the default sorting filtering dropdown in a list view gets the values, it uses the TaxonomyInternalService.json web service to get the data and return to the page. Basically the page is called in a hidden IFRAME on the sorting filter in the list view web part.
 
Now this concept is again applicable to any field, Title.. Or any field. So how would you use this in your solution…. Good question.. The answer would be,
 
When you have a CQWP or a custom webpart returning data from site colleciton and displaying suppose on home page, now using the HTML or Jquery you create a header for your web part for sorting and filtering which can use … well some element ..like Iframe  with a src as link to filter.aspx and query string having the id of the list, view and internal name of the field which you can easily get as a return from the CAML query which got all the items in the first place.
 
Now once you have the items and header links created.. When you click on the header it will use the filter.aspx to return the respective data from the list id supplied by you...this can be tricky to implement coz your data will be coming from number of lists and header is just one :) … but then it depends on how you use the solution.. You can give a multi sort option .. Possibilities are many. Many for the term store field.. The terms are fixed so no matter which list you use the terms in the store are always the same so you can show them in the drop down based on that field… hope this part was clear.
 
Now enters the Client object model (COM) … now when you click header and get the drop down with respective  values and select the specific value… you make a CAML query to the sites again using COM function triggered by Jquery click of course that will do a query again using the filter value as the value you clicked  in the UI and bring back the data Async … and as we know there is a success delegate that is called when COM function is successful, in that you use Jquery again to clear all the exiting HTML and build the HTML again from the new returned values. Thus for user the filtering happens without any refresh and seamless. The same applies to sorting.
 
Now this concept you can also use to get the term store values in your dynamic html as you can just specific a specific list and view where the field is created and it will bring all the term sets from the field .. Now since term sets are common for all fields based on that term set… u can use the term name and id to store in your specific list, hence making a client side seamless solution. :)
 
I am not very sure if I was descriptive enough to explain my findings, there are SO MANY possibilities to use it and I don't know what all to write :) … but I hope you understood the concept and could get some ideas on taking this further to extend and make some cool stuff…  Hope this helps.. Feel free to put questions or suggestions if you have any… Thanks again for hitting this road…
 
    -   "T"

Comments

Christian Louboutin Boots On Sale


My partner and i take a nap, please take a straw head wear, along with buckles face,desire grass inside Hong Kong. I came to be to depart you, Once you enter in the path involving crimson dirt,   Christian Louboutin Boots On Sale   the actual wind chime because i tend not to invest the particular wedding ring.While this individual came up, This individual shook his / her head in a very vast natrual enviroment road, and smiled. I will be myself, you did not maintain myself in a aspiration.
http://www.zamshoes.com/ Christian Louboutin Boots On Sale
http://www.zamshoes.com/categories-pumps.html black christian louboutin pumps sale
http://www.zamshoes.com/categories-boots.html christian louboutin boots on sale
http://www.zamshoes.com/categories-for-men.html  christian louboutin men
http://www.zamshoes.com/categories-sneakers.html christian louboutin sneakers sale
http://www.zamshoes.com/categories-flats.html christian louboutin flats cheap
http://www.zamshoes.com/miu-miu-shoes.html miu miu shoes outlet
http://www.zamshoes.com/jimmy-choo.html jimmy choo shoes on sale
http://www.zamshoes.com/manolo-blahnik.html manolo blahnik something blue
 on 10/24/2012 5:59 PM

1

1
 on 3/7/2013 4:34 AM

1

1
 on 3/7/2013 4:34 AM

Add Comment

Title


Body *


Attachments

 

 Related Posts

 
Firing events inside a modal dialog in SharePoint 2010
Creating publishing pages with powershell in SharePoint2010
Released; Office365 Beta Deployment guide for Enterprises
SharePoint webservices overview
SharePoint Server 2010 performance and capacity test results and recommendations
Export List Data to Excel in SharePoint
Try catch blocks in JSOM for server error in SharePoint 2010
Office365 beta and the SharePoint 2010 Client Object Model
Get HTML from page using the SharePoint Client Object Model
Add Web Part to Page using SharePoint Client Object Model:File not Found error.
Office 365 Sandboxed Solutions:Exceeded the daily resource usage quota.
Bing Maps Silverlight Control in Office 365
JavaScript "L_Menu_BaseUrl" variable for SharePoint
SPSiteDataQuery in Sandboxed solution with multivalued metadata column
Feature activation with Client object model (ECMA script) and sandboxed solution
Overcoming the sandbox limitation…Client object model (ECMA script) volunteers adding web parts on page
Restricting web part adding on page for specific zones with wonderful SharePoint JavaScripting
ECMA script client object model and SQM collection in SP2010
Asset Picker with dynamically created HTML with JQuery in Sandbox solution
Conflicts of a C# developer and PowerShell
Check if page is in Edit Mode on Client Side in SharePoint 2010
Getting Site usage info in SP2010 using Client Object model
Configuring Failover Database in SharePoint 2010
SharePoint 2010 Image library with size options
Missing Site Pages in Personal Site
SharePoint 2010 Search capabilities
 

 Statistics

 
Views: 1835
Comments: 3
Tags:Client Object Model, SharePoint 2010
Published:640 Days Ago