Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

Archive for November, 2010

Multi-Select and Drag-Drop for SharePoint

Posted by zieglers on November 25, 2010

Update-1: (Dec 1st,2010) This project has been published on CodePlex: http://spdragdrop.codeplex.com/

Update-2: (Dec 3rd,2010) ‘Moving Folders’ support implemented, and published.

Update-3: (Dec 13th,2010) ‘Delete Documents’ support coming soon…

Here is a cool jQuery functionality which i have been working on for a while to adapt to SharePoint document libraries. It’s multi-select drag and drop for SharePoint documents. As of now, I managed to hook up this with move operation but in theory any method can be called upon drop action of selected documents.

Here is a teaser screen to show how it looks like..

* Draw a box on documents you want to select. You’ll see that icons of selected documents will be highlighted showing that they are selected. You can also use Ctrl key to select/deselect other documents just like in most operating systems.

* Drag selected documents and drop them onto a folder icon. All selected documents will be moved to that folder.

* As a result of drag&drap, all selected document are moved.

This functionality is using jQuery UI, FronPage RPC (FRPC), and AJAX.

jQuery UI–> multi-select, drag&drop

FRPC –> move document

AJAX –> calling RPC methods.

Soon, i’ll publish this solution on codeplex as well. I’ll be glad if you share any feedback such as other useful scenarios, areas of improvement… etc.

Stay tuned!

zieglers

UPDATE – November 30, 2010

Move Multiple Documents

Move to Folder

In case you want to move multiple documents, you can select them by drawing a rectangle box as seen below.
Selected documents will be highlighted as you draw the box.

When you drag selected documents over a folder, destination folder will be highlighted with dashed lines informing user that it’s an acceptable dropoff location.

Move to Document Library

Alternatively, you can move selected documents to any document library listed in quick launch menu. Once you drag selected documents over a library, similar to folders, library links will be highlighted as well as shown below.
 

 

Move to Parent Folder / Sub Folders

You can also move documents to any sub folder in a document library. In order to do so, simply drag selected documents to any sub folder breadcrumb link as seen below.

Technology Used
jQuery, jQuery UI, FrontPage RPC

Advertisements

Posted in IT Stuff, SharePoint | Tagged: , , , , , , , , , , | 2 Comments »

Selectable rows in SharePoint using jQuery UI

Posted by zieglers on November 22, 2010

Here is a quick tip. If you’d like to make rows in document libraries selectable, jQuery UI Selectable is the perfect fit for this.

*Select multiple rows

* Urls of selected documents will be shown.

All you have to do is refer to jQuery UI js, and select your DOM elements to make them selectable and apply your logic.

In this demo, i’ll simply display urls for selected documents. Go ahead and add a CEWP in your document library page. Then select listviewtable as follows. Your function should look like this:

<script>
$(function() {

//make listviewtable selectable
    $(“.ms-listviewtable“).selectable({

      filter: “tr“,  

      stop: function() {
         // display urls of selected documents
         var result = $( “#select-result” ).empty();
         $( “.ui-selected”, this ).each(function() {

             var index = $( ‘a’, this ).attr( ‘href’ );
             result.append( “<br/>” + ( index ) );

         }); // end – each

      } //end – stop

    }); // end – selectable

}

</script>

<span id=”select-result”></span>

So, above code is making all rows in listview table selectable and once you select one or multiple rows, urls are displayed. That part is done in stop function of selectable above.

Now, you selected multiple rows and you have IDs, URLs, …etc. for them, you can simply use that information as an input to your own logic.

zieglers

Posted in IT Stuff, SharePoint | Tagged: , , , , , | Leave a Comment »

Dynamic jQuery Tooltips for SharePoint

Posted by zieglers on November 10, 2010

In this post, I’ll try to show how you can implement tooltips with dynamic content for any link in SharePoint pages.

 

Ingredients

  • jquery.1.4.3.min.js
  • jquery.simpletip-1.3.1.min.js
  • jquery.SPServices-0.5.7.min.js
  • 1 teaspoon custom tooltip style
  • 1 CEWP

 

Preparation

 

Add jQuery references

 

Firstly, add a CEWP to your site home page. Then edit your CEWP in Source Editor and add the following references with low heat.

<script type=”text/javascript” language=”javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script&gt;

<script language=”javascript” type=”text/javascript” src=”Shared%20Documents/jquery.SPServices-0.5.7.min.js”></script>

<script type=”text/javascript” language=”javascript” src=”Shared%20Documents/jquery.simpletip-1.3.1.min.js”></script>

Add jQuery libraries

While references are getting warmer, add below files in your Shared Documents pot.

 jquery.1.4.3.min.js

http://code.google.com/apis/libraries/devguide.html#jquery

jquery.simpletip-1.3.1.min.js

http://craigsworks.com/projects/simpletip/

jquery.SPServices-0.5.7.min.js

http://spservices.codeplex.com/

Get code structure ready

Secondly, add your javascript code skeleton to your CEWP.

<script type=”text/javascript”> 

$(document).ready(function() {

   // Code goes here

   }); // end – document ready

</script>

Ok, so far our preparation is done. Now we can start cooking our meal.


Call SharePoint Web Services using jQuery

Since I chose ‘list permissions’ as for our dynamic content flavor for our tooltip, first we need to call GetPermissionCollection method of permissions.asmx web service. For a given list, this call will return us all the taste we are used to getting from a list permissions page such as the one below.

 

Call permissions web service

Add following code to your document.ready pot.

// Call permissions web service

  $().SPServices({

    url: “/_vti_bin/permissions.asmx”,

    operation: “GetPermissionCollection”,

    async: false,

    objectName: “Tasks”,

    objectType: “List”,

    completefunc: function (xData, Status) {

           // Format your output here

       } // end – completefunc

  }); // end – SPServices

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

In this case, I choose to feed my tooltip with the result of my web service call. This will allow me to show list permissions, once user hovers mouse over a list in quick launch menu.

Select fields you want to display

But before I do so, I need to select which part of result I need to show in my tooltip. Here, I choose to show only users and groups which have permissions on that list.

Add following code to your completefunc pot.

            // Loop thru each permission

            // Display users and groups

            //$(xData.responseXML).find(“Permission”).each(function() {

            $(xData.responseXML).find(“Permission”).each(function() {

                 var xmlGroupName = $(this).attr(“GroupName”);

                 var strGroupName = String(xmlGroupName);

                 var xmlUserLogin = $(this).attr(“UserLogin”);

                 var strUserLogin = String(xmlUserLogin );

                 if (strGroupName != ‘undefined’)

                     $(“#callResponse”).append(“<li>” + strGroupName + “</li>”);

                 else

                     $(“#callResponse”).append(“<li>” + strUserLogin  + “</li>”);

            });

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.

Add Tooltip to SharePoint links

 

We are done with heavy lifting, now it is show-off time. Our meal has been cooked to perfection and ready to be served now. One last thing to do: get tooltip plate ready.

I chose Tasks link in quick launch menu as my victim. I’ll add my tooltip to Tasks link so that when users mouse over that link, they’ll see my delicious list permissions content in a beautifully served tooltip plate.

Add following code after the end of SPServices line.

    // Tooltip

    $(‘a[href*=”Tasks”]’).simpletip({

       content: $(“#callResponse”),

       offset: [50, 0]

    }); // end – Tooltip


Add Tooltip Style

Finally, before we get our plate in hand and walk out of kitchen door, a final touch-up is required to wow our guests. That one is our humble inline style below. Of course if you wish, you can put that style in your some css files later on.

<STYLE>

.tooltip{

  position: absolute;

  width: 250px;

  padding: 8px 10px;

  background-color: #F2F2F2;

  border: 2px solid #848484;

  cursor: pointer;

  text-decoration:none;

}

</STYLE>

Conclusion

Now you walk out of SharePoint development kitchen door and put your masterpiece in front of your guests and enjoy watching them when they are eating.

Bon Appetit!!!

zieglers

Posted in IT Stuff, SharePoint | Tagged: , , , , , , , | 1 Comment »