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.

Building SharePoint Dashboards with Google Chart

Building SharePoint Dashboards with Google Chart.

Powershell Magik – Testing & Mounting SharePoint 2007 Database to SharePoint 2010

Recently I had a situation where we needed to do a migration testing for our old SharePoint 2007 database, our goal was to Test the Database and Mount them on SharePoint 2010 web application and find out the error, while this was an easy job with executing bunch of Powershell commands, it would have taken more time to do it one by one for each database.

I thought of developing a re-usable PowerShell script to do this for us, It worked really well and I thought it might help some of you.

Here is what the script does for me:-

1. I write the names of the database in a configuration file (plain text file with one database name each line).
2. PowerShell script reads the configuration file and iterates through each database.
3. Executes Test-SPContentDatabase command on the database.
4. Moves the logs onto appropriate folder.
5. Executes the Mount-SPContentDatabase command.
6. Moves all the upgrade log files created today for Mount command.

PowerShell Script:-

Note: Make sure to provide your DBSERVER and WebApplication details.

#Load SharePoint PowerShell Snapin

if ((Get-PSSnapin “Microsoft.SharePoint.PowerShell” -ErrorAction SilentlyContinue) -eq $null)

{

Add-PSSnapin “Microsoft.SharePoint.PowerShell” -ErrorAction SilentlyContinue

}

$DBSERVER = <<DB SERVER NAME>>

#Store the WebApplication URL

$WebApp = “http://webapplication.sp.com”

#Read the databases to upgrade

$DB = Get-Content content_db_config.txt

#Loop Through each database and execute Test-SPContentDatabase command

Write-Host “**UPGRADING CONTENT DATABASES**”

foreach ($Data in $DB)

{

write-host “>>TESTING:” $Data

$filename = “C:\UPGRADEDB\logs\” + $Data + “.csv”

Test-SPContentDatabase -Name $Data -WebApplication $WebApp|Export-CSV $filename –noclobber

write-host “>>UPGRADING:” $Data

Mount-SPContentDatabase -Name $Data -WebApplication $WebApp -DatabaseServer $DBSERVER

}

Write-Host “**DATABASE UPGRADE COMPLETED**”

#Copy the upgrade log files onto network Share

Write-Host “**COPY UPGRADE LOG TO NETWORK SHARE**”

$DateToCompare = (Get-date).AddDays(-1)

#Get upgrade logs created today and copy them to network share

foreach ($i in Get-ChildItem “C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\LOGS\Upgrade*”|where-object{$_.LastWriteTime -gt $DateToCompare})

{

Write-Host “>> Copying” $i.Name

Copy-Item $i.FullName “C:\Upgrade Logs”

}

Write-Host “**LOG FILES COPIED**”

Batch Script:-

In order to make it easily executable, I created a batch script that invokes this powershell script:-

cd C:\UPGRADEDB

powershell -File DBUpgrade.ps1

PAUSE

Hope this helps someone…

Building SharePoint Dashboards with Google Chart

Overview

Hey glad that I am back with another jQuery magic post here in Word Press. I apologize for taking so long to write this. I had a long list of TODO’s (rather TO-Writes) that I wanted to share but I got stuck onto one thing after another.

So here I am with another wonderful SharePoint recipe…with mixture of jQuery (essential ingredient) + SharePoint (it has to be) and Google Charts Tool.

I must admit that charting was one of the most required feature and which was missing in SharePoint 2007 (although it made place in SharePoint 2010). It was one of my longtime dreams to build a nice looking SharePoint executive dashboard. I also realized that people love to see Graphics more than the text/numbers. This was the motivation behind coming up with this article. And one fine day I accidently landed onto Google Charts Tool.

The code examples really looked difficult to me initially and it looked like Google level code. But somehow I started working with it and recently I had to create almost 10-11 nice looking charts that gave me enough confidence to publish this post.

Charts Gallery – Awesome collection of Tools

The collection of chart types available in Google Charts Tool is really amazing, I have seen some of the chart types for first time.

Have a look at Google Charts Gallery for the frequently used chart types, but there is really more to it when you look at specific chart types. They have got a really extensive list of charting possibilities.

Data Policy

None of the data is really posted to Google server, or travels through any network. It’s all client side rendering so you can be very sure about your data privacy. In fact you will find this end note in every chart samples.

Sample SharePoint Charts

Before we jump-in to the implementation details, below are some of the screenshots of what we are trying to implement. I am sure this samples will give you enough motivation to read further and implement your own chart, believe me all of those graphs are created using underlying SharePoint data.

Sample 1

Sample 2

Sample 3

Prepare Data for Chart

We will utilize the SharePoint grouping capabilities to calculate the data for chart. My strategy is to group the data by various aspects (for Example City, Customer, and Year). And then add the list view web part onto the dashboard page.

Our magical script is not intelligent enough to do the calculation, it just knows the place to read the information. Here is how I have prepared the data (I have included the list template along with the data).

• Upload SalesData.stp onto list template gallery of your site collection. [Site Actions à Site Settings à List Templates under Galleries].
• Create a new list based on Sales Data template; this will get you everything (data/views etc.) required for this sample.
• Add list view web parts onto the dashboard page; we will use this later to read information.

Include jQuery Library [jQuerification]

I am sure by this time you must be pretty excited about looking at the implementation, alright enough of text and pictures onto this article it’s time to get our hands dirty with some coding.

As always the very first step in creating any magic is to add reference to jQuery files. Recently I shifted my jQuery implementation pattern a bit and instead of keeping a local copy of jQuery script onto SharePoint document library, I prefer to use the Google Hosted CDN. Thanks to Dave Ward for putting 3 reasons to let Google Host jQuery for you, this also saves me from keeping multiple local versions of jQuery.

Following line of code on element will load the jQuery library from Google CDN: – [copy the URL ]

Script 1

Load Google Charts API [gChartification]

Enabling Google Charts API is equally simple. It’s very much similar to what we do to load jQuery, add another script tab and make it point to https://www.google.com/jsapi

Script 2

Load appropriate chart package

You will need to load appropriate gchart package depending on what type of chart you are building. For most of the commonly used chart you can use “corechart” package. To include the chart package onto your code, write following line as first line of your script.

Script 3

While “corechart” contains most of the commonly used charts, there are some other packages that can be used when you are creating a different type of chart. To load a different chart you will use the google.load method (same as example above), provide the package name in the packages attribute. It is also possible to load multiple chart packages in the same script.

Chart Type	Package
Gauge Chart	“gauge”
Geo Chart	“geochart”
Table	“table”

Preparing the Code Structure

Once you have the jQuery and Google Chart script loaded along with appropriate chart package, next step is to combine the patterns for both the scripts.

Google charts expects google.setOnLoadCallBack() function and jQuery starts with $(document).ready(). In order to make them work together we have to come up with a structure that satisfied both the library.

Here is what I have come up with:-

Get the Google Chart data from ListView Web Part

Once we have the structure ready for google.setOnLoadCallBack() and $(document).ready() we can start writing the code to extract data and render the chart.

In this step we get the GUID for list view web part to read the information from group headings. I have prepared a short video on the process of reading GUID (Please feel free to comment for screencast).

Next step is to prepare the DataTable object using the data rendered in the ListView Web Part. Copy the “WebPartId” that we captured in the screen cast and assign the same to dataWebPartId
variable in the below script.

The script just does the job of looping through each group header and separating the label with the values. Group headers are located in the TD elements with class ms-gb

Draw Google Charts

Last step in this solution is to prepare the Google chart in the element of your choice (div, span etc.). Just create the appropriate chart object and invoke chart.draw() method along with DataTable we prepared in last step.

Complete Code

Below is the completed code for ProductSales.js file.

Source Code

Here is much awaited section of this blog, all the source code along with list template . Please download the code SudhirKe – SharePoint Google Chart repository.

Follow these steps to use the code from repository:-

1. Upload SalesData.stp onto List Template Gallery.
2. Create a custom list using the Sales Data Template.
3. Add two list view web parts on the home page, make them point to different views.
4. Get web part id for both the list view web parts.
5. Paste them onto ProductSales.js and SalesChannel.js script file.
6. Upload the javascript files onto document library.
7. Add two content editor web part and make them point to the JavaScript files.

If you have done everything correctly you should see the Google Charts loaded onto your SharePoint home page.

Hope this helps, feel free to comment on this post. I am sorry for keeping it so long.

Happy Dashboarding….

jQuery : SharePoint Contact Card Web Part

Overview

I am back with another jQuery MagicJ. Whenever I was browsing through any social networking site I used to love those beautiful Contact List or Friends list. It was somewhere in the back of my mind to build something like this for our friend SharePoint. Today I got the opportunity to build some fancy (or not so fancy) contact card based on jQuery and SharePoint web services.

The best part of SharePoint is that gives you all the basic infrastructure for your day to day data requirements like Contact List, Task List, Calendar list and so on and once we have place to store such data jQuery gives you the power to read it and present it in the desired format.

Here also I tried something like that and came up with this solution for display contact list data in the card format.

Download the Code

Please download the source code and required files from : SudhirKe.jqContactCard.Source.zip in case the google docs link does not work you can download the code from my GitHub repository.

 

Prerequisites…

Default contact list from SharePoint. This solution also requires following files:-

– jQuery 1.4.3 [Note: jQuery1.5 is not compatible with SPServices yet.]

– jQuery UI 1.5.9

– jQuery SPServices

– jQuery UI Theme (I have used ui-lightness)

Apart from this I have developed following files:-

– jContactCard.css

– jContactCard.js

If you want to display the person image you can add a image field and get it link to your contact pictures. Other way is to read it from MySite, I have implemented a very basic solution and displayed the default image from SharePoint “/_layouts/images/no_pic.gif” with each contact.

See it in Action…

Here is the screen shot of the web part. Moving the mouse over a contact card highlights the contact card (thanks to jQuery UI J)

The Solution

I am really sorry for pasting the code as images, but it was getting formatted really badly by WordPress. Anyways I have given the link to download the code.

CSS File

CSS code is pretty simple, it just tells to format the contact card details and images etc.

jQuery Code

It’s very simple like my previous posts. I am using the SPServices solution from CodePlex to read data from SharePoint contact list. Very thanks to Marc D Anderson. Marc you have made huge differences to the life of jQuery and SharePoint and jQuery SharePoint lovers like us.

So the jQuery code is very oblivious, I am calling SharePoint lists web services using SPServices. I have called “processResult” method in the end to parse and format the return values. Below is the code to call the web service:-

Note: The below code can be found in the jContactCard.js file in the code.

My processResult method looks something like below:-

HTML Code

The required HTML script is really simple, the magical part is already taken care by jQuery all your html needs is a div element with “result” as id. Of course you need to add reference to the required JavaScript and CSS files.

Below is the HTML code.

Note: Please make sure to update the references of the JavaScript and CSS files when you upload it onto SharePoint document library.

Deployment

– Upload all the JS and CSS file along with the HTML file onto SharePoint document library.

– Add a content editor web part and add link of the myjQuery.html file in the Content Link property.

– Below is the folder structure.

– JS folder contains required all the JavaScript files.

– CSS folder structure looks something similar to image below.

Hope this helps someone in need. Comments/Suggestions welcomed J

Sorting table using jQuery

Recently I worked for a requirement with my collegue Ankur Chourasia on consolidating the information from the sub sites and displaying it on the main site using Content Query Web Part.  I consider that as the first part of this post.  Please make sure to go through “A Little More about Content Query Web Part“. The consolidation and additional column displaying part is done by Ankur Chourasia and he did it fantastically. I will surely encourage him to add that onto his blog site.
There was another interesting requirement where in the user wanted the table data to be sorted. Just like we do in any other SharePoint lists, again my love jQuery came onto picture and we could achieve the sorting table functionality.

I found it worth putting down on paper and sharing. Comments welcome J

JQuery Library

The basic requirement to jQuerify any solution is the jQuery library. All we need to do is add a script tag that points to jQuery JavaScript file. For our solution we have downloaded the script file from jQuery Download page. We have uploaded the solution onto a document library the alternative way to enable jQuery is refer the file directly from Google Code CDN. The second way is definitely bit slowly since it has to load jQuery file from remote location.

Table Sorter Plug-in

The beauty of jQuery is the extensibility. We get plug-in written for almost every business problem, I was lucky here too many thanks to the simplest table sorter plug in by Christian Bach. I downloaded the JavaScript file and uploaded it onto the shared document. I also downloaded the StyleSheet to format my table from http://tablesorter.com/themes/blue/blue.zip.

Here is the final structure of my files.

Shared Documents

è CSS

o Style.css

o Other gif files

è JS

o jquery.min.js

o jquery.tablesorter.min.js

è tablesort.html (this contains the jquery code)

JQuery Code

The jQuery code is pretty easy for this. Add the reference to jQuery library and Table Sorter javascript file along with stylesheet (style.css). in the jQuery code call tablesorter() method for all the “table” tags. This is it. Following is the code snippet. I have kept this code in tablesort.html file.

HTML Code

The table sorter plug in looks out for all the <table> tag which contains the “class=tablesorter” attribute. Other requirement is that the table columns should be inside the <thead> element and table body should be inside the <tbody> element. For e.g.

ItemStyle.xsl template modification

Here is the modified template in the ItemStyle.xsl file to achieve the required html output. Notice the class attribute of <table> element the <thead> and <tbody> elements.

Enabling sorting on the CQWP tables

– Upload the modified ItemStyle.xsl file onto Style Library.

– Make sure that required JavaScript files and html file are uploaded on the SharePoint document library.

– Navigate to the page where you have added the Content Query Web Part.

– Add a Content Editor Web Part. Edit the web part and set the Content Link property to URL of “TableSort.html” file in the Shared Documents library (e.g yoursitedocumentstableSort.html).

Tip: You can keep this content editor web part as hidden, the jquery code to enable sorting will still work.

– This will make the column heading clickable. Clicking on the column heading will sort the rows of the table.

End Note

I hope this helps some one in need. I sincerely like to thank Ankur Chourasia and Christian Bach

jQuery Magic – Search List Web Part

Contents

1. jQuery Magic – Search List Web Part 1
2. Overview.
3. Search Web Part.
4. See it in action…..
5. HTML Script 3
6. Inline Style Sheet 4
7. jQuery(fication) : Enabling the Magical Library. 4
8. jQuery: $(document).ready() handler 5
9. jQuery: The Search() function. 6
10. jQuery: the processResult() function. 7
11. References. 7
12. Summary. 8

Overview

After being quite for sometimes now, I am back with another jQuery magic. The search list web part, this is really handy when you have some data in SharePoint that hardly gets updated, rather than opening the list we could directly add a search web part on the home page and get the data.

Search Web Part.

The search web part that we are going to see will look something similar to figure1. I have made the script to search in the Calendar list based on the event location.

Figure 1

This web part can be configured to search on any SharePoint list. Following section of this article will cover the scripts in detail.

See it in action…

I thought of showing it in action to you before we dig deeper onto the code. Follow the instruction carefully.

1. Download the required files from jQuery Magic – Search List Web Part

· jquery.highlight-latest.min.js: This is the jQuery highlight plunging. This is used to highlight the searched terms. Sincere thanks to Johann Burkard for his Highlight Plugin

· searchList.js: This contains the logic to interact with the SharePoint services and render the required controls.

2. Update the references.

3. Upload both the files onto a SharePoint document library.

4. Add a content editor web part à and update the Content Link property to point to searchList.js

Figure 2

5. Click ok and you are done. You will see the search list web part in your page.

HTML Script

Following is the HTML script that is required to render the UI of the search web part. This HTML defines following element in the web part

– quickSearchTextBox: Text box to enter the query.

– cmdSearch: Command button to initiate search.

– resultCount: Div element to show the number of records found from query.

– quickSearchResults: Div element to show the result.

I have used the SharePoint style sheet classes to format the UI look similar to SharePoint.

Inline Style Sheet

The inline style sheet classes have been used to format the output and display it in the form of block. Following are the classes in this style sheet.

– .highlight : This class is used to define formatting for highlighting the search terms in the results.

– .ul: this class is used to remove the bullets in the UL element.

– .ul li : This class is used to display the search results in the form of block.

jQuery(fication) : Enabling the Magical Library

To load the jQuery library, I have used the direct link (ajax.googleapis.com). I am not uploading the jQuery library on my SharePoint (I did that in all my previous posts).

In case you want to load jQuery from local SharePoint site you will have to upload jQuery library onto your SharePoint document library and update the SRC parameter in the following code. (Note: You will have to update the {SPURL} for jquery.highlight-latest.min.js file)

jQuery: $(document).ready() handler

$(document).ready() handler is similar to void main() in C J. This script written inside this hander is executed when the entire DOM elements have been loaded.

jQuery script should be written inside ready() handler. Please refer to jQuery Documentation to learn more about writing jQuery script.

I have used ready() handler to associate various event handlers to the controls in my web part. This contains various ways to initiate search operation and other handler to clear search result when “X” is clicked.

Note that to clear the result I have used $(selector).live() handler, this will make sure to attach event handler with “X” button only when it is present in the UI.

jQuery: The Search() function

The search function takes care of talking to the lists.asmx SharePoint web service. This function prepares the soap request with the query and processes the result.

The soap packet contains the CAML query to search the list. It defines following parameter to execute the query:

– listName : Name of the source list.

– Query : Query to execute against the list

– viewFields: Fields that should be returned in the result.

jQuery.ajax() function is used to send the request to the lists web service. The complete attribute specifies the function name that should be executed once this request has been processed. The process result method will receive the resulting xml from the web service call.

jQuery: the processResult() function

The processResult() method is used to generate the resultant HTML script from the web service call result xml file. The role of this method is to parse the xml and get the required HTML.

Please excuse me for the bad formatting (I am really bad in the designing).

Notice the code that we have used to highlight the searched terms in the result set.

References

– http://docs.jquery.com/Main_Page

– http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html

– http://spservices.codeplex.com/

– http://weblogs.asp.net/jan/archive/2009/04/09/calling-the-sharepoint-web-services-with-jquery.aspx

Summary

I have done very basic formatting to the search results. Be as creative as you can in the processResults() method, use the jQuery UI library to format the output.

We can build some really fantastic application with no server side coding and deployment overheads using jQuery.

jQuery : Enhancing List View web part rendering

Contents
jQuery : Enhancing List View web part rendering    1

Overview    1

Requirements    1

Solution    1

jQuery – the lightweight magic    2

Overview

The more I work on jQuery + SharePoint the more I get attracted to it.  There is limitless possibility when we use jQuery in SharePoint.  My latest research includes enhancing the way ListView web part gets rendered.

Once you get hold of the jQuery selector you feel like everything is possible and is very much in your hands. You just have to find a unique way of getting the required DOM element and then it obeys all your orders like a Gin (I am sure I am not exaggerating).

I hope this helps someone in need.

Requirements

The requirement was to display following table in a web part.

Topic	Presenter	Link to Presentation	Link to Video
Some topic	Some presenter	[ICON to download ppt]	[Icon to download video]

I first thought of reading the data using our dear friend SharePoint web services and then rendering it on my own way.  But then I thought I should be able to do it in some OOB way.  But the issue was that I had to show two icons that are linked to content

–       Icon to download presentation.

–       Icon to download the video.

Solution

I uploaded all the presentations onto the document library.  The default document library did not have the columns to display the additional metadata about the presentation.  So I created the columns that described the presentation.

–       Topic (Single line of text)

–       Presenter (Single line of text)

–       Video (Hyperlink that will contain the URL to video)

Figure 1

I uploaded the videos in the same folder and updated the metadata of presentation to contain link to the video file.

The benefit that I get out of this is the “Type” column renders the icon and it is linked to the original document.  And I had added the other metadata using columns, this is 70% complete, I still have the task to display the icon that is linked to video. 

When I add the list view web part I could see following view.

Figure 2

Note: Video column was getting rendered as the plain hyperlink.

jQuery – the lightweight magic

Since I am a big fan of jQuery and I knew there must be a way to select everything on the page.  I did some analysis on how this is rendered.  I found that its all Table and TD tags.  So the list view table is rendered as

<TABLE —- summary=”<<Web Part Title>>”>

Something worth noting is that the table contains a property called summary and the value contains the web part title.  Now the next job is to find how the link is getting rendered further down the line I found something interesting.

<TR><TD Class=”ms-vb2″><A HREF=”URL of Video”>Text to Display</A></TD></TR>

So it was a TD that contained class “ms-vb2” and contained a child node as <a>.

Once I identified the way it renders the link it was just a matter of replacing the text of <a> with <img> of my choice. 

By this time all the jQuery folks have an idea of how to do that.  Still I thought of copying the magical part of the script.

Note: My apologies for copying this as image, but for some reason I was not able to publish this document when it contained jQuery code. (Google and Blogger started boggling me J)

Figure 3

Just replace web part title with the summary of your list view table.  And here is the final output.

Figure 4

Now you see that I have the desired icon to download video and it looks really good.  And all that I needed was 4 lines of jQuery and understand how SharePoint renders the contents. 

Regards, Sudhir Kesharwani  MCTS – MOSS 2007 | MCTS – WSS 3.0 | MCPD-EA | MCSD.NET 

jQuery – Announcement carousel for SharePoint

The Annoucements Carousel
Your web part should look like following image (announcements.jpg). You will see all the announcements scrolling one by one, Announcement items are linked to the actual announcement page. When you hover the mouse pointer over a news item, the scrolling will stop automatically.

Note: All the required files can be downloaded from GitHub – jQuery Shared. Code is pasted in the email body for reference.

Overview

Recently I have been working on jQuery Carousel plug in and SharePoint. Accidently/fortunately I was able to develop an announcement carousel solution. I thought of posting this to the broader audience. I find this really useful as we can show all the announcements in the smaller area.

Prerequisites

Make sure you have an announcements list in your SharePoint site with some sample announcements.

Step 1 – Required JavaScript and CSS file.

Following files are required for this carousel functionality.

–          jQuery library – jQuery 1.4.1 library,  you can download it from the jQuery site.  I love to rename it to jQuery-latest.min.js.  I have used jQuery-1.4.2.min.js

–          jCarousel script –I have updated the original jCarousel script for hoverPause functionality as per the comments given in the plug in page.  Make sure to use the same.

–          News-Ticker-Source.js – this file contains the actual source code to query the announcements links and making it carousel. Make sure to replace {Site Url} with your site url.

–          News-ticker.css – Contains style sheet for the announcements list.

The folder structure that I followed in my site is as following, highlighted the folders in the hierarchy.

–          Shared Documents o   BIN §  JQLIB – this folder contains all the JavaScript files ·         jQuery-latest.js ·         jcarousellite_1.0.1.hoverPause.js ·         news-ticker-source.js §  CSS –  this folder contains folder for the style sheet and required images ·         News-ticker : Folder for the style sheet. o   Images: folder for images §  News1.jpg §  Mic1.jpg o   News-ticker.css : CSS filefor styling.

Note: I have given this folder structure since my code has all the references based on this folder structure, however you can have your own folder structure; make sure to update the references in the HTML script and news-ticker-source.js files.

Step 2 – The JavaScript Code

All the required files are attached with this email. Still thought of putting the code of news-ticker-source.js on to this post.

$(document).ready(function() {                 //Call the method to read data from annoucements list and display it as carousel.                 GetAnnoucementData(); }); /* This function reads the data from annoucement list and passes the control to processResults method This makes and ajax call to lists.asmx web service. Make sure to replace {Site URL} with your SharePoint site url. */ function GetAnnoucementData() { //Prepare the SOAP envelop for calling GetListItems method from lists.asmx web service var soapEnv = “<soapenv:Envelope xmlns:soapenv=’http://schemas.xmlsoap.org/soap/envelope/’&gt; \    <soapenv:Body> \     <GetListItems xmlns=’http://schemas.microsoft.com/sharepoint/soap/’&gt; \      <listName>Announcements</listName> \      <viewFields> \       <ViewFields> \                                  <FieldRef Name=’ows_ID’ /> \                                  <FieldRef Name=’LinkTitleNoMenu’ /> \                                  <FieldRef Name=’Body’ /> \                                  <FieldRef Name=’Expires’ /> \                                  <FieldRef Name=’Author’ /> \       </ViewFields> \      </viewFields> \     </GetListItems> \    </soapenv:Body> \   </soapenv:Envelope>”; /*Post the request envelop to web service thorugh ajax request and pass the results to processResults method*/                                               $.ajax({             url: “{SITE URL}/_vti_bin/lists.asmx”,             type: “POST”,             dataType: “xml”,             data: soapEnv,             complete: processResult,             contentType: “text/xml; charset=\”utf-8\””         });    } /* This method parses the resultant xml and prepares the display. Please replace {Site Url} with your sharepont site url. */ function processResult(xData, status) {                                 //Select the root element.         var newnews =$(“#newsItems”);         var rows;                                                                 //Check if query returns no rows         if (xData.responseXML.getElementsByTagName(“z:row”).length==0)         {                                                 //Prepare the display for 0 rows.                                                 var url = “{SITE URL}/Lists/Announcements/”;                                                 var head = “<li><div class=’thumbnail’> <img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg’></div>”;             var body = “<div class=’info’>No news items<a href=” + url + “> Read all</a> <span class=’cat’> no items found</span></div>”;                                                 var tail = “<div class=’clear’></div></li>”;                                                 var liHtml = head + body + tail;                                                                                                 //Append the HTML element to newNews element             newnews.append(liHtml);         }         else         {                                                 //Read all the rows from responseXml                                                 rows = xData.responseXML.getElementsByTagName(“z:row”);                                                 jQuery(rows).each(function()                                                 {                                                 //Read the information from returned rows             var url = “{SITE URL}/Lists/Announcements/DispForm.aspx?ID=” + $(this).attr(“ows_ID”);                                                 var title = $(this).attr(“Title”);                                                 var news = $(this).attr(“ows_Body”);                                                 var author = $(this).attr(“ows_Author”);                                                 author = author.split(‘#’)[1];                                                 //Prepare the div element                                                 var head = “<li><div class=’thumbnail’><img src='{SITE URL}/Shared%20Documents/BIN/css/news-ticker/images/news1.jpg’></div>”;             var body = “<div class=’info’><a href=” + url + “>” +  $(this).attr(“ows_Title”)+ “</a> <span class=’cat’>by ” + author + “</span></div>”;                                                 var tail = “<div class=’clear’></div></li>”;                                                 var liHtml = head + body + tail;                                                 //Append the resultant element onto newNews element             newnews.append(liHtml);                                                 });         }                                                                 //Append entire newNews element to root Div                                 newnews.appendTo(“.newsticker-jcarousellite”);                                                                 //Prepare the Carousel of all the returned items                                 $(“.newsticker-jcarousellite”).jCarouselLite({                                 vertical: true,                                 hoverPause: true,                                 visible: 4,                                 auto:500,                                 speed:1000                                 });     }

Step 3 – The HTML Script

Add a content editor web part on your home page and add following HTML Script in the source editor. (Make sure to update the references of script and css files, replace {SITE URL} with your site url).

<link rel=”stylesheet” href=”{SITE URL}/Shared%20Documents/BIN/css/news-ticker/news-ticker.css” type=”text/css” media=”screen” /> <script src=”{SITE URL}/Shared%20Documents/BIN/jqlib/jquery-latest.min.js” type=”text/javascript”></script> <script src=”{SITE URL}/Shared%20Documents/BIN/jqlib/jcarousellite_1.0.1.hoverPause.js” type=”text/javascript”></script> <script src =”{SITE URL}/Shared%20Documents/BIN/jqlib/news-ticker-source.js” type=”text/javascript”></script> <div id=”newsticker-demo”>         <div class=”newsticker-jcarousellite”>                                 <ul id=”newsItems”>         </ul>     </div> </div> <div id=’status’></div>

References

–          http://sorgalla.com/jcarousel/

–          http://weblogs.asp.net/jan/archive/2009/05/06/querying-sharepoint-list-items-using-jquery.aspx

Regards, Sudhir Kesharwani MCTS – MOSS 2007 | MCTS – WSS 3.0 | MCPD-EA | MCSD.NET 

Focus more by turning your phone to Gray-scale

Believe it or not, people (especially millennial) are spending far more time on screen as compared to our elders.  Thanks to the technological advancements we have Phones, Computers, TVs and tablets.  We are also most distracted due to all beautiful life like pictures that our phones display and constant notification that our social networking apps provide. 

A study suggests that an average human unlocks their phone 2000 times a day (for no reason).  Screen time statistics on my iPhone says that I am spending average of 3 hours per day.  This might be more if you have installed tons of applications.  Considering that I carry “World’s most UN-happening iPhone ever” by having less application, this number will be a lot more for the young guns. 

I frequently come across articles that suggests that phone addiction is worst, and I see even young kids getting addicted to beautiful screen.  You will see more views to CHU-CHU TV rhymes than any other content on YouTube.

Moreover, the blue light on the screen (TV / Phones / Laptop) also delays your brain’s process of generating Melatonin, a chemical that helps you sleep and shut down your internal systems by 30 min.  So finally, when you turn off your screen it will take at least 30 mins for your brains to hibernate.  Ever wondered how we always wake up tired and dizzy when we spent late nights watching back to back episode of serials.

Recently I came across a great workaround for making our phones little boring and saving our eyes from popping colors, this also help us focus on other important things.I have included steps from my iOS device, I am sure there will be plenty of solutions for Android as well.  Follow these steps to turn on display filters onto your iOS device.

Turn on Grayscale filters on your phone

• Open Settings > General

• Open Accessibility.

• Click on Display Accommodations > Color Filters

• Turn on Color Filters and select Grayscale

• This will turn your phone screen to Grayscale,  this is very relaxing to the eyes,  especially when its dark.  This will help you sleep better in the night.

Pro Tip :  Include Accessibility Shortcuts in the Control Center.

With new iOS control center customizations capability, it is much easier to add a shortcut for accessibility and turn on Grayscale filter by simply clicking home button 3 times.  Below are the steps to turn this on.

• Open Settings > Control Center

• Click on Customize Control

• Click on + symbol for Accessibility to include them in the control center shortcut.

• Go back to Home Screen and swipe Up to see Control Center,  Click on new icon for Accessibility Shortcuts

• This will ask you to pick which settings you would like to turn on when Home button is clicked three times, select Color Filters and this will automatically pickup “Gray Scale” since that’s what you had configured earlier.

Note: Unfortunately, I don’t have screen shot for this since Ihave already configured this on all my devices.

Initially it will feel a bit weird since we are used to the color screen, I suggest trying this for couple of days and your eyes will be acclaimed to this.   You can always turn on/off these settings whenever you are working on something that needs color.  For the most part this will also reduce number of times you unlock your phone and browse through social networking apps.

Let me know your feedback…

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:

• Getting started with REST in SharePoint 2013 – Part…

View original post 254 more words

2013 in review

The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.

Here’s an excerpt:

A New York City subway train holds 1,200 people. This blog was viewed about 4,900 times in 2013. If it were a NYC subway train, it would take about 4 trips to carry that many people.

Click here to see the complete report.

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;
});

}

2012 in review

The WordPress.com stats helper monkeys prepared a 2012 annual report for this blog.

Here’s an excerpt:

600 people reached the top of Mt. Everest in 2012. This blog got about 3,800 views in 2012. If every person who reached the top of Mt. Everest viewed this blog, it would have taken 6 years to get that many views.

Click here to see the complete report.

Baked Eggplant

I found it interesting…

Shine and Rise

I think it is safe to assume that many of you who have yet to decide to join in doing the unprocessed food cleanse are worried that you may be limited by the foods you are able to eat. Yes, this cleanse is slightly restrictive in one sense, however, when you realize how many different delicious recipes you can make from the list of foods that are allowed, you will be awestruck and feel that you are in fact, not limiting yourself at all. Here is one of my favorite unprocessed food recipes. It has few ingredients, and is incredibly easy to make, not to mention only 220 calories per serving!

_________________________________________________________________

*Recipe is written per eggplant — 1 eggplant = 2 Servings

Ingredients:

1 large eggplant

1 tsp coarse sea salt

1 clove garlic, finely chopped

1 onion, thinly sliced

2 tbsp extra-virgin olive oil

1 tsp finely chopped…

View original post 166 more words