Hi all!

If you are using Firefox, know about Firefox Greasemonkey add-on, love javascript and jQuery, and (sometimes) you love SharePoint then this post is directly for you. If you are not using Firefox, you just can see what can be done with Greasemonkey and SharePoint, and may be you immediately start using Firefox . Let’s start.

During SharePoint development I have to click a lot in SharePoint UI. And most actions or clicks used more frequently as others. For example Site Actions –> Site Settings –> Site Features, Site Actions –> Site Permissions, Site Actions –> More Options, All Site Content, Edit Page and so on… One day I decided that this is too many clicks for me per day. To reduce number of clicks I’ve wrote Greasemonkey script to automate and increase speed of some routine actions in SharePoint. Script you can download in the download section of the post.

Currently here is main highlights of script features:

   1. Site Actions drop down replaced with “actions” link:

when mouse hover the “actions” dialog window appear (jQuery UI Dialog, it is draggable), which contains list of most used links:

More...

Hi all! May be you are already familiar with sharepoint 2010 script on demand feature. Recently I was playing with it and want to show some examples and explanations how it works.

There is a server control, that is responsible for rendering scripts on demand - ScriptLink .This control has 4 significant properties: LoadAfterUI, Name, OnDemand and Localizable.

• LoadAfterUI (if true) means that your script link (or script) will be rendered at the vary end of the <form> tag (when all other html elements already loaded). if this property equals to false, script will be inserted right after <form> tag. Internally, methods RegisterStartupScript and RegisterClientScriptBlock used. The only difference between these two methods is where each one emits the script block. RegisterClientScriptBlock() emits the script block at the beginning of the Web Form (right after the <form runat="server"> tag), while RegisterStartupScript() emits the script block at the end of the Web Form (right before the </form> tag).
• Name - name of script file (or path to that file – read below). This property uses by javascript as key that uniquely identify loaded script.
• Localizable – if true, sharepoint try to find your script under “_layouts/1033/”
• OnDemand – the most interesting property, indicates if we need this script load immediately, or if it should be downloaded on demand

Ok, some examples. Imagine we have script file myscript.js directly inside the layouts folder and we want to load it (OnDemand = false) . Its easy:

<SharePoint:ScriptLink runat="server" ID="sl" Localizable="False" LoadAfterUI="False" Name="myscript" OnDemand="False"></SharePoint:ScriptLink>

This action produces this output:

<script src="/_layouts/myscript.js?rev=7KqI9%2FoL9hClomz1RdzTqg%3D%3D" type="text/javascript"></script>

More...

Hi all. About a year ago when I only start learning jQuery I wrote a couple of fancy plugins, just to learn more about jQuery plugin creation,  css and javascript. I’m going to describe two of them: one I called “element rotator” and the other “text shuffler”.

1. Element rotator.

  Small demo: click to this square and holding left mouse button try to rotate it around the axis.  

More...

Hello all!

If you are working with SharePoint you are using lookups a lot. SharePoint renders lookup field in list forms as html <select> element. And you may know, that if items count in lookup list become more than 20, something interesting happens with lookup render mechanism. In IE (and in IE only), html <select> become an <input> with image (complex select-like control). Consider following images:

IE	FireFox

As you can see, lookup renders differently for different browsers. IE renders lookup as <input> and image, binds a couple of events to this controls to simulate auto complete behavior. This is pretty cool solution, but has its drawbacks: it works in IE only, you can’t style it, autocomplete appears when items more than 20 and you can’t control it.   I've written small jQuery plugin to fix this.

There are two methods in my plugin: fixLookup and lookupAutoComplete.

More...

Today I'm going to explain how to use Firefox GreaseMonkey add-on, jQuery and jQuery plugins with GreaseMonkey.  Since version 0.8 GreaseMonkey have such a nice meta-parameter as @require. Using this parameter you can easily include any type of objects in your scripts, for example, other scripts. I develop some jQuery plugins and want to test it in internet pages using GreaseMonkey. @require attribute helps me. Here is an example how to include your scripts into GreaseMonkey:

// ==UserScript==
// @name           Google rotator
// @namespace      http://userscripts.ru/js/faviconize-google/
// @description    Use this script to rotate google logo.
// @include        http://www.google.*
// @include  http://*google.*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
// @require http://127.0.0.1:8000/jQueryDivRotator/scripts/custom/jquery.divrotator.js
// ==/UserScript==

My jQuery plugin can rotate any element around the axis using mouse, I’ll write blog post about it later. To make it work I need a jQuery library and my plugin code. All this files includes in GreaseMonkey using two @require attributes. One great aspect – all file that included in @require attribute downloaded only once, when you install script. You can navigate to physical path of script and make sure in this. User scripts usually situated at C:\Documents and Settings\<user name>\Application Data\mozilla\Firefox\Profiles\<guid in format XXXXXX>.<profile name>\gm_scripts\<name of script> (for Win systems). Or you can run search by your system drive using mask <name of script>.user.js. As you can see in my example I use localhost path to locate my script. I write code in Aptana Studio and use Aptana’s built-in web server (you can use any other web-server for this purposes). GreaseMonkey easy download scripts and place their in folder mentioned above. Now you can modify file straight in this folder and this changes affect in your GreaseMonkey script immediately. That’s great I think. jQuery 1.4.* had some troubles with GreaseMonkey, but in 1.5 all works fine for me.

This is my GreaseMonkey script, that use jQuery and my jQuery plugin:

$("#hplogo").MakeItRotated();

Rather simple, isn’t it? And the result