Thursday 17 January 2013

Creating a Spell Checker with the native Sharepoint 2010 web services

I was checking the other day different ways to create a spell checker for a nice web part I was doing in Sharepoint 2010. I have been trying jQuery spell checkers, but to be honest, they all look quite clunky, in fact most of them work outside Sharepoint but as soon as you try to use them in your webpart, become unstable. If fact, a couple of them work “sometimes” what is the last thing you want when you have to deliver a project to a client.

I heard about Sharepoint Spell Checker, so I start doing some research, I have found a couple of posts on Internet, but they didn’t work either, the closest one comes from “Cherry Bytes” (thanks for sharing the info) and it was for MOSS 2007, so I tried to make it work.

It is pretty simple anyway. The final solution will be a nice pop up box suggesting the spelling (see below):

image

Follow my five steps and in less than 2 minutes, you will have it done!

Step 1
Add the following line on the top of the page:

<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 


Step 2
Add this line after all the “Registers”… almost top of the page:

<script type="text/javascript" language="javascript" src="/_layouts/1033/form.js"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/core.js"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/bform.js"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/SpellCheckEntirePage.js"></script>


Step 3
Add the JavaScript call to display the form and check the fields:

<script language="javascript" type="text/javascript">
function doSpellCheck() {
    SpellCheckEntirePage('<%= SPContext.Current.Web.Url %>/_vti_bin/SpellCheck.asmx', '<%= SPContext.Current.Web.Url %>/_layouts/SpellChecker.aspx');
}</script> 


Step 4
Add a button to do the spell checking:

<input type="button" value="Spelling" class="bg-color-orange metro-font" onclick="javascript:doSpellCheck();"/>                            


Step 5
Add two textboxes. The first one will be checked by our spell checker, but the second one will be avoided because of the “excludeFromSpellCheck” set it to true:

<asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox> 
<asp:TextBox ID="TextBox1" runat="server" CssClass="ms-long" excludeFromSpellCheck="true"></asp:TextBox> 


Done!


Conclusion:
Probably this is not the most elegant solution in terms of coding, but if we are using Sharepoint as a platform, it is quite good to use native web services instead of third party solutions…and it looks neat!

1 comment:

Anonymous said...

Beautiful work.
Thanks a lot, saved my time