Create simple Google search WebPart using ECMAScript for sharePoint 2010

SharePoint 2010 have lot of news service but there is one i realy like the “Client Object Model” used to make Call to SharePoint Content  and in particular the ECMAScript supported by SP.JS file.
This Client Object Model is very usefull when you want to make use SharePoint content without using Visual Studio.
The best of all this Microsoft use almost the same name definition for the class, if you normaly work with SharePoint Server SDK API you will see the develomp dont change to much….

 

Ok Let Start creating our Google search Web Part with Modal Dialog.

1. Edit the Page on your sharepoint 2010 Page and add new Web Part option “HTML Form Web Part”
2. Edit Source Editor and add the following code

 

Here is the Code:

<script type="text/javascript">
function opendialog()
{
var options=SP.UI.$create_DialogOptions();
options.url="http://www.google.com/search?h1=pt-PT&Source=hp&q=" + document.getElementById('PesquisaGoogle').value;
options.width= 600;
options.height= 500;
options.dialogReturnValueCallback= Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}

function isCharKey(e)
{
if(e.keyCode==13)
opendialog();
}

function CloseCallback(result, target)
{
if (result == SP.UI.DialogResult.OK)
{
alert('O dialog funciona');
}
}
</script>
Google Search
<input type="text" id="PesquisaGoogle" name="firstname" onkeypress="isCharKey(event)" />
<input type="button" value="Go" onclick="opendialog()" />

And here is the final Result, voila very easy.

Modal Dialog is a very usefull tool for sharepoint for acessibility reasons, will help you turn SharePoint more easy to final users.

Hope you like this litle article :).

Technorati Tags: sharepoint 2010,Web Part,Google,ECMAScript