Getting started with REST in SharePoint 2013 – Part IV


Me & My SharePoint [FrontEnd]

Welcome to the fourth post in this series about REST in SharePoint 2013. In the previous posts I wrote about how to interact with SharePoint lists, but now it’s time to look in to how to retrieve information from an external source with help of JSON. There’s a lot of web services with APIs that provides JSON like Facebook, Twitter, Foursquare, bing maps, Netflix. Yahoo weather and many many more. In this post I’ll show you an easy example of how to get information from Flickr, as you may know a popular photo-sharing site that has been around for years and has now 5 billions of photos. And yes, this will work the same no matter if it’s SharePoint Online (public or internal) or SharePoint Onprem.

Please read the previous posts in this series before you go on to this post:

View original post 254 more words

jQuery: Cool Filters for SharePoint List


Overview

Sorry for not posting anything for almost a year. So many good ideas died inside my brain and thought now I should again start posting something (good or bad). This time I came up with enhance filter to achieve multi-level filtering of a SharePoint List View web part. Although the default list view comes up with a search box that is very handy the only limitation being that you can do filtering only at one level. The default search box can look at multiple columns but only one search at a time.

Our Custom jQuery filter – some screen shot.

This is what I have come up with, although it needs more work to make it more dynamic…the current version does the basic job of multilevel filtering.

Below is the screen capture of the filter user interface. Much of the credit goes to jQuery-Chosen plugin to make it look so awesome. Thanks a lot Patrick Filler and Team for coming up with this wonderful plugin.

Alright enough of show-off for now, let me dig onto the code and other details.

Solution Files

This solution consists for 5-files. 4 of them related with jQuery:Choosen plugin and 1 for my poor script J

  1. css/choosen.css
  2. css/prism.css
  3. js/prism.js
  4. js/choosen.jquery.min.js
  5. filter-UI.html : Contains the filtering logic and reference to all the above file.

All the source files could be downloaded from GitHub – SudhirKe à splist-filter repository.

Definitely we will need to have reference for jQuery library, I think by this time all browsers should decide to load jQuery for every page I am so much in love with this.

Script References:

First step is to upload the source file onto Site Assets (or any other library) and add the references to CSS and JS files.

HTML Code

HTML Code for filter is very easy, you just add drop down with filter options and another button for clearing the filters.

TODO: A much nicer version would be to pull all the available values based on the list columns, however that will require some more configuration on to the drop downs J

jQuery Script – The Magic

Filter Function

With SharePoint 2013 list views, every data row has a class called .ms-itemhover, this makes our job very easy since we can just look for the selected value in every row and hide everything else.

Here is how my generic filter function looks like, notice that I am passing the value to my hide and show functions, this will hide the rows really slow and makes it look fancy.

Drop down Modification and filtering the records

In this code I am converting my simple drop downs onto more fancy choosen drop down and handling the change event for them. Notice that I am just calling the filter function to do the magic. Same code exists for my other filter drop down.

Reset the filters

Last part of this code is to clear all the filters. This will also clear the previous values from the drop down and show all rows (.ms-itemhover).

Source Code:

Here is all the source code together for reference, same could be downloaded from the link given in solution files.

Putting the code on your SharePoint:

This is the easiest part of all the scripting, below are the steps for you (kind of checklist).

  1. Download all the codes from GitHub – SudhirKe à splist-filter repository.
  2. Upload all the files to Site Assets (or any other library) in your SharePoint site.
  3. Add a list view web part onto your page (or use a page where it is already added).
  4. Edit the page and add a content editor web part.
  5. Update content editor web part and change the source link to point to filter-ui.html (e.g. http://yoursp/sites/yoursite/SiteAssets/filter-ui.html

If everything is done correctly here is how your filter page should look like ( I have added the generic Task list for this example).

Selecting Priority “High” should filter the rows for me.

Further selecting Status “In Progress” will hide the other rows and display only one row.

Clicking on “Reset Filters” button will make all the rows visible again.

Hope this helps someone in need. Feel free to leave comments on this blog. Once again many thanks to jQuery Chosen plugin mastermind Patrick Filler and team.

5 things NOT to do in 2014 !


Saifism

……And the year 2013 is nearing its end. And again it feels like it has went by too fast. One day you are welcoming 2013 and just when you got comfortable writing the date as 2013, they change it to 2014.

It is that time of the year when you and your Facebook wall are bombarded with all types of New Year greetings, New Year Trivia, New Year Resolutions, New Year Horoscope, et cetera. Also the media goes in a frenzy with “10 Best Movies of 2013”, “Top 5 Cute Kitten moments 0f 2013” (Awwww ! ), “5 Worst Celebrity Breakups of 2013”, et cetera.

Finding myself surrounded by these “informative” articles, I thought to come up with one of my own – 5 things you should not do in 2014 !

Number 1 :- DO NOT Make New Year Resolutions.

– Do NOT make any resolutions this year. It’s…

View original post 526 more words

For the Code is Dark and Full of Errors !


a different perspective!!!

Saifism

A great man once said, “To err is human, to detect – Testing”. Now don’t just google it straight away, I will save your time. This was said by Yours truly in a moment of profound enlightenment.

It would require a person to be exceptionally naive to say that testing is a fun job just picking out other’s mistakes. Somehow the “oh-he-has-made-a-mistake-now-lets-trouble-him” part never materializes. Its more like “Oh-he-has-made-a-mistake-Will-I-have-to-test-this-twice?’. Because a Tester’s job never ends with detecting a defect, it’s actually just the beginning. We have to be extremely sure about the defect being valid, in 100% conflict with the given requirement and most of all – if it will be reproducible again. And that means recreating the entire scenario multiple times with multiple parameters/test IDs, to our heart’s content. Let me assure you, you don’t want to be that villain who delayed the deployment. Seriously.

Testing hence becomes more of an…

View original post 424 more words

SharePoint 2007: Hide Empty group headers from List View


You can consider this as part 2 of jQuery How To: Hide rows in SharePoint 2007 List View Grouped web part.  Once you hide rows from a grouped web part,  you may came across a situation where you have a group header showing up without having data beneath it.  This is very confusing for your users since the nice little expand icon will still be showing up along with group header adding to the confusion.

I have been thinking of posting this since long long time but kept on forgetting,  I had been searching for code to hide empty group headers from a list view web part whenever the group does not contains any records in it.  

Here is my code for doing this,  I would like to mention my friend who has always been with me in all the jQuery adventures…one and only Mr. Ankur Chourasia. Thanks Ankur,  you have always been awesome…

So here is my code,  sorry for keeping this post dirty…

/*
Author: Sudhir Kesharwani, Ankur Chourasia
Purpose: This function is used to hide all the empty group headers from the SharePoint 2007 list view web parts
*/
function hideEmptyGroupHeaders()
{
//Variable to count empty groups headers in SharePoint page
var count =0;

//Below selector will loop through all the gropu headers in the SharePoint page. This looks out for all the tbody with id*=’tbod’ on the content area.
$(“.ms-bodyareaframe”).find(“tbody[id*=’tbod’]”).each(function(){
$(this).children().each(function(){
if($(this).css(“display”) == “block”)
{
//Increase the counter
count ++;
}
});

//Scan the number associated with tbody element to generate id of body.
var tempId = $(this).attr(“id”);
tempId = tempId.substring(4, (tempId.length-1));
tempId = “titl” + tempId;

//Hide empty group header if there are no items beneath it
if(count == 0)
{
$(“#”+tempId).css(“display”, “none”);
}
else
{
$(“#”+tempId).css(“display”, “block”);
}

//Reset the counter
count = 0;
});

}