Tag: jQuery

jQuery Random Quote Viewer

While doing some housekeeping recently on my personal site I was tinkering around with a pre-jQuery ajax enabled web part I had written to display random quotes from a SharePoint list on the site. The code was pretty ugly so I decided to adapt the web service call to use jQuery instead in line with the similar functions displays I’ve been deploying lately.

I thought I might take the time to share it as well since jQuery is still a hot topic.

Here is what the display looks like.jQuery Random Quote Viewer

The SharePoint list is a basic list with a column for the Quote and a column for the Author.

The code is currently hosted in a Content Editor Web Part (CEWP) and is pretty simple stuff. If you are going to use this, just be sure to put in the name or GUID of the list and the URL to the site’s list web service. Here is what it looks like:



$(document).ready(function() {
var URL = ""; // URL ex. http://mycompany/sites/sub-site/_vti_bin/lists.asmx
var listName = ""; // List Name or GUID

var soapEnv = "


" + listName + "





";

$.ajax({
url: URL,
beforeSend: function(xhr) {
xhr.setRequestHeader("SOAPAction",
"http://schemas.microsoft.com/sharepoint/soap/GetListItems");
},
type: "POST",
dataType: "xml",
data: soapEnv,
complete: DisplayQuote,
error: function(xhr) { $("#errorContainer").html('Error: ' + xhr.status + ' ' + xhr.statusText); },
contentType: "text/xml; charset="utf-8""
});
});

function DisplayQuote(xData, status)
{
var Output;
var WikiString = "http://en.wikipedia.org/wiki/Special:Search?fulltext=Search&search;="
var xmlDoc = xData.responseXML;
var ListItems = xmlDoc.getElementsByTagName("z:row") || xmlDoc.getElementsByTagNameNS("*","row");
var SelectedItem = Math.floor(Math.random()* ListItems.length);
var Quote = ListItems[SelectedItem].getAttribute("ows_Quote");
var Author = ListItems[SelectedItem].getAttribute("ows_Author0");
Output = "" + Quote + " - " + "" + Author + "";
$("#quoteContainer").html(Output);
}

While this is simple code, it can be applied to so many different things.  You can use it to generate a slide show, show random images, etc. 

The source files are available here:

 

Related Links

Using jQuery to Customize the User Profile Display

The User Profile engine in MOSS Enterprise is pretty powerful.  Out of the box it has some great capabilities and is very easy to setup.  There is support for wide range of field level attributes along with global and personal privacy policies.  The main profile block rendered on the page is very dynamic.

The one big short coming of this approach is a lack of formatting control in the output.  You have the option of a custom display but then you have to try and reproduce all of the logic for each field.

jQuery offers up a nice alternative.  Instead of changing the underlying logic, you can simply adjust what is rendered to the page.

 

Some Background

The organization I’m currently working with uses Skype for collaboration and as their primary IM platform.  Early this year, long before I made the jump to jQuery, I wrote a custom web part that was added to my organizations My Profile page (person.aspx).  Its sole purpose was to show the user’s Skype information, status and some simple Skype commands.  The web part called the UserProfileService in order to grab the SkypeID listed in the profile and then rendered the output.  The web service call was somewhat redundant since the information was already on the page.  The web part worked well, but in the end the Skype info was shown in multiple places, which is not desirable.  It would be best to be able to integrate it into the main profile.  In the time since I have gotten a few other requests to modify the output of certain fields.  I recently took the opportunity to revisit this topic and used the Skype field as the test bed.

 

Step 1 – Create or Identify the field

The Skype ID (SkypeID) field is a simple string field that the user is able to edit.  It is pretty similar to the phone number fields.

 

Step 2 – Write the Script

I’ve referenced the GoogleAPIs library.  I run all of our jQuery scripts off a localized copy to reduce dependencies.  This also depends on a Skype script as well as seen below.

The main selector can probably be improved, but it seems the system consistently sticks with the identification referenced.

Our environment runs with SSL so the status field could not be supported in this implementation.  For implementations where SSL is not used you can grab user’s status by linking an image to this path:  http://mystatus.skype.com/smallicon/skypename







$(document).ready(function() {

var cntID = $("#ctl00_PlaceHolderMain_ctl00_PlaceHolderMain_ProfileViewerValueSkypeID").text()

var mOutput = "   Add   ";

$("#ctl00_PlaceHolderMain_ctl00_PlaceHolderMain_ProfileViewerValueSkypeID").append(mOutput);

mOutput = "Chat";

$("#ctl00_PlaceHolderMain_ctl00_PlaceHolderMain_ProfileViewerValueSkypeID").append(mOutput);

})


Step 3 – Prepare the Web Part

I’ve placed the script in a Content Editor Web Part on another site and then added it to the catalog on the Personalization site collection.  Be sure to set the title, and I recommend setting the Chrome type to “None.”

Step 4 – Add the Web Part the Person.aspx Page

The Web part can now be added to the page.  Its placement really doesn’t matter since it will not render anything to this section.  Once on the page it will show the updated output if the value is present.  If the referenced field is not shown, doesn’t have a value, then it will not modify anything.

Here is a sample.  The “[Add]   [Chat]” links were added which give visitors the option to add the user to their Skype contact list or to initiate a chat with them.

Summary

While this example is pretty simple, it should do a good job of illustrating some of the capabilities developers and customizers now have. In addition, I now have one less web part and assembly to manage on the server.

This same process can be applied to each field to change the connection to the people search, integrate with other systems, or to simply reformat the text returned.

Using jQuery to Update an Item Without A Form

I have been investigating jQuery for about six months now. There are some great examples of it out on the Internet through sources like Paul Grenier’s “jQuery for Everyone” series on End User SharePoint as well as Jan Tielen’s blog. Most of the examples I have seen relate to using it to change style and formatting of standard content. It is definitely good at that with its rich selector formatting.

In a recent project I hit an interesting snag that was ultimately solved by using jQuery. I had an interesting project requirement for a SharePoint workflow solution where the users wanted to be able to cancel a request by simply clicking a button from a list of open requests.

Initially I didn’t expect this to be much of an issue since I had done some DataForms in the past. I ended up finding two limitations to this process though; overriding default values is not easy because the fields are databound, and any changes to any rows are saved on submit of the form. This means that if you do override the field you are looking to change, every row shown in the form would change not just the individual row for the button clicked.

My next thought brought me to building a custom web part to do this. In fact this is something I have done many times in the past for somewhat similar requests. This was not a good option though since the rest of the display could need to change frequently and really should be more dynamic and configurable. In the end the cost to maintain this would be too high.

I decided jQuery was the best solution for this particular project. It gave me the ability to keep the display as a DataView which is easily configurable, and call a script on the page that can perform updates via a jQuery to SharePoint UpdateListItems web service call.

Button placed in the XSLT of a DataView

Script placed in a Content Editor Web Part

In the end, the code was very simple yet effective. As I get a handle on all of the capabilities, I see it becoming more and more central to my development toolkit.

TriSPUG July Presentation – Using jQuery to Build a Document Review Application

I just sent in the details for my proposed presentation for the Triangle SharePoint User Group’s July 7th meeting. The meeting will take place at TekSystems Raleigh and run from 6pm – 8pm.

The presentation is titled Using jQuery to Build a Document Review Application – Intro to jQuery for SharePoint Developers.

I will provide an overview of how jQuery can be used to deploy assembly free code to interact with SharePoint through its web services to create feature rich applications. A brief overview of the currently available CAML tools will also be provided.

I would encourage anyone in the central North Carolina area to attend, and as always feedback is greatly appreciated.

%d bloggers like this: