Thursday, 10 May 2012

Using Jquery Tool Tip in Sharepoint 2010

Powerful, Collaboration, Reporting, document handling and BI are all words that come to ones mind when they think of SharePoint. Another word that seems to come up in discussion about SharePoint is dull, this is a common misconception. SharePoint  2010 is very versatile can easily be integrated with  jQuery and Java Script libraries. In is tutorial we will be looking at how to use dynamic jQuery tool tips for SharePoint.

Files Needed :

  1. Download jQuery.1.7.2.min.js
  2. Download jQuery.simpletip-1.3.1.min.js
  3. Download jQuery.SPService.0.5.7.min.js
Step 1

Add a Content Editor Web Part on your Home Page

Step 2

Click on the empty area below the CEWP and then go to HTML Source Editor and Edit the Source.

Add the following in the HTML Source Editor

  1. <script language="”javascript”" src="/SharedAssets/jquery.simpletip.1.3.1.js"></script>
  2. <script language="”javascript”" src="/SharedAssets/jquery.1.7.1.min.js"></script>
  3. <script language="”javascript”" src="/SharedAssets/jquery.SPServices-0.7.1a.min.js"></script>

For this example we will be listing partiular permissions inside the tool tip, so we will have to call the "GetPermissionsCollection" method from the permissions.asmx web service.

Add the following code to the HTML Source Editor.

  1. <script type=”text/javascript”> 
  2. $(document).ready(function() {

  3.          $().SPServices({
  4.          url: “/_vti_bin/permissions.asmx”,
  5.          operation: “GetPermissionCollection”,
  6.          async: false,
  7.          objectName: “Tasks”,
  8.          objectType: “List”,

  9.          completefunc: function (xData, Status) {
  10.            // Format your output here
  11.            } // end – completefunc
  13.      }); // end – SPServices

  14.  }); // end – document ready
  15. </script>

Afther the web service is successfully invoked, the result will be returned in xData. Then, in completefunc method, you can modify, format, display your result as you wish.

Step 3

We need to format the data in the completefunc and select the field from the permissions list which we want to display in out tool tip

Add following code to your completefunc pot.

  1.              // Loop thru each permission
  2.             // Display users and groups
  3.             //$(xData.responseXML).find(“Permission”).each(function() {
  4.             $(xData.responseXML).find(“Permission”).each(function() {
  5.                  var xmlGroupName = $(this).attr(“GroupName”);
  6.                  var strGroupName = String(xmlGroupName);
  7.                  var xmlUserLogin = $(this).attr(“UserLogin”);
  8.                  var strUserLogin = String(xmlUserLogin );
  9.                  if (strGroupName != ‘undefined’)
  10.                      $(“#callResponse”).append(“<li>” + strGroupName + “</li>”);
  11.                  else
  12.                      $(“#callResponse”).append(“<li>” + strUserLogin  + “</li>”);
  13.             });

In above code you’ll see that group and user names are appended to a div element, whose id is callResponse. So, let’s add that div too in our CEWP. You can put anywhere outside of <script> tags.

<div id = "callResponse"/>

Step 4

We will be activating the tool tip for the "Tasks" Link in quick launch. So add the following code inside of the </script>.

  1. // Tooltip
  2.     $(‘a[href*="Tasks"]‘).simpletip({
  3.        content: $(“#callResponse”),
  4.        offset: [50, 0]
  5.     }); // end – Tooltip

Next add the style of the tool tip. You can add this before or after the divider.

  1. <STYLE>
  2. .tooltip{
  3.   position: absolute;
  4.   width: 250px;
  5.   padding: 8px 10px;
  6.   background-color: #F2F2F2;
  7.   border: 2px solid #848484;
  8.   cursor: pointer;
  9.   text-decoration:none;
  10. }
  11. </STYLE

No comments:

Post a Comment