Archive for the ‘jQuery’ Category

How to create a link to Nintex Start Workflow Page in the document set home page

January 19, 2013 3 comments

In this blog post, I’d like to show you how to create a link to start Nintex Workflow Page in the document set home page.

1. Firstly, you need to upload the latest version of jQuery to the style library of your team site.

2. Then, upload a text file to the style library for writing your own html and JavaScript

3. In the document set home page, insert a new content editor web part and link the text file you just upload.

4. Update the text file with the following content, you can download this file here.

<script type="text/javascript" src="/Style%20Library/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/_layouts/sp.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function buildWorkflowLink(webRelativeUrl,listId,itemId) 
	var workflowLink =webRelativeUrl+"_layouts/NintexWorkflow/StartWorkflow.aspx?list="+listId+"&ID="+itemId+"&WorkflowName=Start Approval";
	return workflowLink;
function getParameterByName(name)
	name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
	var regexS = "[\\?&]" + name + "=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(;
	if(results == null){
		return "";
		return decodeURIComponent(results[1].replace(/\+/g, " "));

function setTheWorkflowLink(listName) 
	var SPContext = new SP.ClientContext.get_current(); 
	web = SPContext.get_web(); 
	list = web.get_lists().getByTitle(listName); 
	SPContext.load(list, 'Title', 'Id');	
	SPContext.executeQueryAsync(setTheWorkflowLink_Success, setTheWorkflowLink_Fail); 
function setTheWorkflowLink_Success(sender, args) 
	var listId = list.get_id(); 
	var listTitle = list.get_title(); 
	var webRelativeUrl = web.get_serverRelativeUrl();
	var startWorkflowLink=buildWorkflowLink(webRelativeUrl,listId,listItemId)
function setTheWorkflowLink_Fail(sender, args) 
	alert("There is a problem setting up the submit exam approval link");
<a href="" target="_blank" id="submitLink"><span style="font-size:14pt">Start the approval process.</span></a> 

5. Save your changes and go to the document set Item, you will see the link is on the home page now.


1. You can create a link to start the workflow using the following build dynamic string configuration:

With this link you will still need to click the start button, this is standard SharePoint behaviour and cannot be altered.


How to use html and JavaScript in Content Editor web part in SharePoint2010

How to use jQuery selectors in

April 12, 2012 2 comments

In this post,I’d like to show you how to use jQuery selector in

//Attribute Ends With Selector [name$="value"]
var approveRadioButton = $('input[id$="RadioButtonApprove"]');
var reasonsDropdownlist = $('select[id$="ReasonsDropDownList"]');


jQuery VSDoc

Categories: javascript, jQuery Tags:

Create simple jQuery plugin

March 4, 2012 Leave a comment

In the last post, I have shown you how to add the function to jQuery. In this post, I will show you how to create plugin to achieve this.

1. You need to wrap your code in the following construct, this is because you should not use $ directly as $ is global variable, it could have clash with some other library which also use $.Basically, you can pass in jQuery object into the function, so that $ is made available inside the function. (JavaScript use function to create scope, so you can make sure $ is referred to jQuery inside the function )

//Your code goes here.

2. Put your code into the construct above.

(function ($) {
    $.getParameterByName = function (name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var regexS = "[\\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(;
        if (results == null)
            return "";
            return decodeURIComponent(results[1].replace(/\+/g, " "));

3. Now you can reference the code into you project and you can call the method in you JavaScript


Provides scope for variables

Variables are scoped at the function level in javascript. This is different to what you might be used to in a language like C# or Java where the variables are scoped to the block. What this means is if you declare a variable inside a loop or an if statement, it will be available to the entire function.

If you ever find yourself needing to explicitly scope a variable inside a function you can use an anonymous function to do this. You can actually create an anonymous function and then execute it straight away and all the variables inside will be scoped to the anonymous function:

    (function() {
        var myProperty = "hello world";
alert(typeof(myProperty)); // undefined

How does an anonymous function in JavaScript work?

Building Your First jQuery Plugin

A Plugin Development Pattern

Categories: javascript, jQuery

How to reference jQuery and custom javascripts in SharePoint2010

June 20, 2011 1 comment

In normal development, in order to add jQuery to your solution you need to add the following script to your Master page.

<script language=”javascript” type=”text/javascript” src=”Scripts/jquery-1.4.1.min.js”></script>

There are not many differences in referencing jQuery in SharePoint2010; in fact you got quite a few ways to achieve this. The first thing you need to do is to deploy jQuery using SharePoint module template in Visual studio. Then you can choose one of the following ways of referencing jQuery.

1. Using a Delegate Control

2. in the master Page

<SharePoint:ScriptLink language=”javascript” name=”~sitecollection/Style Library/JavaScript/YBBESTCustom.js” Defer=”true” runat=”server”/>

<script  src=”/Style%20Library/JavaScript/YBBESTCustom.js”  type=”text/javascript”></script>

*****************Update on 12th Jan 2012***************

<script src=”/Style%20Library/JavaScript/YBBESTCustom.js” type=”text/javascript”></script> will only work for root site for the web application. aka , it will not work for site like http://yourwebapp/sites/yoursite.You should use the scriptlink or using the script manager.


3. Ad hoc (e.g. in a site page or web part)

4. Using a Custom Action (Can be used as Sandbox solution, you can find example here.)

What MVP think about referencing Javascript in SharePoint2010

From Wictor Wilén

I’d say keep the JS files in the /_layouts/ folder. JS files do not need that much versioning and they are probably requested often if you references them in the master page, which will stress the Db unnecessary much if placed in SharePoint/content db.

It’s also easier to set up IIS compression etc on those folders.

Also consider using the <SharePoint:ScriptLink/> control.

This comment is from this MSDN forum post.




How to bootstrap JQuery on every SharePoint page, even in the Sandbox

Referencing Javascript Files with SharePoint 2010 Custom Actions using SciptSrc

Reference Custom CSS and JavaScript files in SharePoint 2010


Categories: jQuery, SharePoint 2010

jQuery Pad

October 14, 2009 Leave a comment

If you are using jQury or plan to learn jQuery , you should check this tool jQuery Pad.It is really cool.

kick it on

Categories: jQuery

Working with jqGrid and WCF service

July 20, 2009 2 comments

Today , I am going to show how to work with jqGrid with WCF in application. jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web.You can download a copy of the code from here

1. To start with , we need to download the latest version of jQuery and jqGrid plug-in. At the time of writing ,the latest version of jqGrid is jqGrid 3.5 beta. The major differences for this version is that starting with this version, jqGrid does not use a loader (which loads the needed files one by one), but all the needed code is contained in one file. The desired modules can be built using the jqGrid download manager . In order to use this, first a language file should be loaded and then the jqGrid file.

2. Next, you need to add JavaScript into your project and references using script tag. In order to use jqGrid 3.5, first a UI theme CSS file should be loaded. The detailed instruction is in the downloaded jqGrid zip file.Then,we need to create an AJAX-Enabled WCF Service in our web project. We need to create an method in the WCF service and add the following attributes to the method.

[WebInvoke(Method = "POST",
BodyStyle = WebMessageBodyStyle.WrappedRequest,
ResponseFormat = WebMessageFormat.Json
public string GetProducts()
IList personList = ProductRepository.GetProducts();
int total = 1, page = 10;
ProductJqGridView productJqGridView = new ProductJqGridView(total, page, personList);
return productJqGridView.ToJson();

GetProducts method will return a list of products.After that I am instantiate ProductJqGridView object and call ToJson method to serialize the object into the correct JOSN format so that the jqGrid can consume it.

3. Before we looked the JavaScript ,we need to see what required in the markup. We need a table to display the data ,a div for the page navigation and button to load the data.Please see the source code for details.

4. Last, we are going to look at how to write JavaScript to bind the JSON data to the jqGrid.We use function as our datatype.The function we are using is getProducts which doing an AJAX call to the server and a JSON string is returned.In the successFunction we insert all the data into the jqGrid by calling thegrid.addJSONData.

function successFunction(jsondata) {
var thegrid = jQuery("#productGridView")[0];

function getProducts() {
url: “linkification-ext” href=”http://DataLoader.svc/GetProducts” title=”Linkification: http://DataLoader.svc/GetProducts“>DataLoader.svc/GetProducts“,
data: “{}”, // For empty input data use “{}”,
dataType: “json”,
type: “POST”,
contentType: “application/json; charset=utf-8”,
success: successFunction
function dataBindToGrid() {
datatype: getProducts,
colNames: [‘ProductID’, ‘Name’, ‘ProductNumber’, ‘Color’, ‘Size’, ‘Style’],
colModel: [{ name: ‘ProductID’, index: ‘ProductID’, width: 200, align: ‘left’ },
{ name: ‘Name’, index: ‘Name’, width: 200, align: ‘left’ },
{ name: ‘ProductNumber’, index: ‘ProductNumber’, width: 200, align: ‘left’ },
{ name: ‘Color’, index: ‘Color’, width: 200, align: ‘left’ },
{ name: ‘Size’, index: ‘Size’, width: 200, align: ‘left’ },
{ name: ‘Style’, index: ‘Style’, width: 200, align: ‘left’ }
rowNum: 10,
rowList: [5, 10, 20, 50, 100],
sortname: ‘ProductID’,
pager: jQuery(‘#pageNavigation’),
sortorder: “desc”,
viewrecords: true
jQuery(document).ready(function() {
jQuery(“input#LoadData”).live(“click”, dataBindToGrid);

A word of caution…

This is only a simple example using jqGrid, many of its functionalities have not been implemented. Since this is only a “Hello World” like example, I will show some of its advanced functionalities in some other article.
The hardest part for using AJAX and jqGrid is not the concept but the level of JavaScript skills. To be able to write maintainable AJAX code, you need to learn JavaScript. I have created an article on my blog to help you learn JavaScript. Here is the link. I hope my examples can help people get started using jqGrid using WCF in an ASP.NET web application. Your feedback is much more appreciated.

kick it on

Categories: .net, AJAX, javascript, jQuery, WCF