Sudhir Kesharwani: May 2010

Some of the great words from the real motivator Manish Gupta from Chrysalis....just wanted to spread the word to larger audience. Some people think smart work is a substitute for hard work...

Regards,
Sudhir Kesharwani
sudhir.kesharwani@gmail.com

---------- Forwarded message ----------
From: MG's Desk! <desk.mg@chrysalis.net.in>
Date: Sat, May 15, 2010 at 5:56 PM
Subject: Hard Work Redefined

Dear Chrysalian,

Working Hard is considered as one of the most important pathways to achieving success. Since centuries sages, masters, wise men, elders, consultants have been advocating, endorsing and supporting the above statement. I too am in alignment with these folks. (Should I miss out on an opportunity of being linked to the wise ones? )

New age generation wants to stick on to Smart Work but I believe even Smart Work involves some "Work".( and many a time ends up with lots of Hard Work) There is no substitute for Hard work.

I want you to read the above statement one more time and focus on the fact of Hard work leading to success, which implies that if our understanding of Hard work is not what it should be then chances are high that we may not be anywhere near our desired goal. Lets understand Hard work from a different perspective. Lets understand the difference between hard Work and working hard for success.

When in office an executive works as per his schedule and finishes what he had planned to do , this is called hard work, but when the same executive over and above his daily tough schedule goes for an evening course for technical up gradation – this is called working hard for success . At home when a home maker after a tough morning grind of the daily chores takes out time to learn sitar which she so dearly wanted since childhood- that's called working hard for success. A father on coming home tired and exhausted after a long days haul plays with his children with the same vibrancy and freshness which he had at the start of a new day, then it is called working hard for success. A cycle rickshaw puller works real hard for more than 12 hours a day, but he'll be working hard for success when you spot him talking to a co-operative bank for the loan of his second rickshaw. An Entrepreneur when working hard to set his business in motion also thinks and acts on succession planning then it is said he's working hard for success. ( I wonder how Dhirubhai Ambani missed out on that one)

The concept of working hard for success is the same whether you are a student, a businessman, a sports person or a spouse. Other than our regular work (where we have really worked hard) what are we doing extra to maximise our output is called working hard for success.

Its almost midnight and I feel I have been working hard for success for the day..

Love you lots and wish you a "Hard Working" Life …

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
https://docs.google.com/leaf?id=0B1XvO-SvpjhGYWEyYzNhYTYtZTQ5MS00MGRkLTk2ZmYtYTkwZmNlZDAxNmE2&hl=en.
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/'> \

<soapenv:Body> \

<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \

<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).

</ul>

</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

Sudhir Kesharwani

Saturday, May 15, 2010

Fwd: Hard Work Redefined

Friday, May 14, 2010

jQuery - Announcement carousel for SharePoint

MCPD - EA

MCTS