Using Html Form web part to Filter(with Examples) SharePoint 2010

HTML Form Web Part can be used to connect and pass data to another Web Part using various HTML elements like input buttons( Radio, check boxes,text boxes etc via its source editor). Along with all the great JavaScript coding that you can add your source editor, now you can also use a  the  Javascript\Ecmascipt client object model introduced in SharePoint 2010 for creating some interactive solutions.

Lets see an example to filter a webpart(Shared Document in my case) by Modified By the current user (i.e. You -  the current Logged-in user) using the Html Form web part and ECMAScript\JavaScript client object model.

Here is the result screen -

Highlights -

The name for the current user in You(yourName) is displayed using the Javascript\Ecmascript client object model.

The Radio buttons are created in HTML Form Web Part  and are given the label (You (yourName) ) dynamically in Javascript\Ecmascript method.

The “Go” button is a default setup from the Html Form web part. You do not remove that. Go button is responsible for sending the

values to the connected webpart for the value of control that you have selected (in our case yourLoginName will be set as the value of the first radio button control)

Lastly, keep in mind that The Html Form web part cannot contain body or form tags.

Now to get the above results copy and paste the below script in HTML Form web part’s source editor.

<script type=”text/ecmascript”>

var context = null;
var web = null;

var currentUser = null;

ExecuteOrDelayUntilScriptLoaded(GetUserLoginName, “sp.js”);

function GetUserLoginName()
{
context = new SP.ClientContext.get_current();

web = context.get_web();

this._currentUser = web.get_currentUser();

context.load(this._currentUser);

context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod),

Function.createDelegate(this, this.onFailureMethod));
}

function onSuccessMethod(sender, args)
{

var currentUser = this._currentUser.get_loginName();
currentUser.replace(/\\/g,”\\\\”);

document.getElementById(1).value = currentUser;

document.getElementById(‘lblYou’).firstChild.nodeValue= “You(“  + currentUser + “)”;

}

function onFaiureMethod(sender, args)
{

alert(‘request failed’ + args.get_message() + ‘\n’ + args.get_stackTrace());
}

</script>

<div onkeydown=”javascript:if (event.keyCode == 13) _SFSUBMIT_”>

Modified By :

<input type=”radio” name=”ModifiedBy” id=”1″ value=”You”>
<label id=”lblYou”>yourName</label>

<input type=”radio” name=”ModifiedBy”  id=”2″ value=”YourTeam”/>Your Team

<input type=”radio” name=”ModifiedBy”  id=”3″ value=”Manager”/>Manager

<input type=”button” value=”Go” onclick=”javascript:_SFSUBMIT_”/>

</div>

Next we will make a connection to the Shared documents webpart see Part 2 >>