CRM 4.0 inline spell checker

I was looking integrate an inline spellchecker with Input and Textarea fields in crm. The idea was to enable spelling checks on any nvarchar field that users can activate by pressing shortcut combination keys e.g. Alt + Z. During my quest I stumbled on jianwang blog and saw the following post which uses the local machine (user) Microsoft word spell checker. I really liked the idea but hated the clumsy UI. So eventually I decided to try integrating my custom tool tip post with a simple retrieval of the Spelling Errors suggestion list. And, as always, what started as a simple programming task turned out to be a pain in the butt since I had to mimic the spell checker UI functionality.


I think the result came out pretty cool and since there are plenty of free spell checker out there why not add another one.
The usage is very simple! You create an instance of the InlineSpellChecker class decide on a shortcut combination key (default keyCode is 90 [z]) add the field or fields you what to enable spell checking on and you’re done.


The spell checker object is not called until the user presses Alt + z which mean the code does not affect load time. The first time might take a second or 2 but after that it works pretty quickly. I didn’t test it with large data so that might have an impact as well.


The UI have 4 buttons, the first 2 allow you to navigate between the list of spelling errors and the last 2 enables you to replace the error(s) with one of the selected suggestions. The field focus is never lost so you can open the spell checker and continue writing while it is open. The user can press Alt + z while writing to refresh the spelling errors suggestion list to accommodate the new written words.


When you select a suggestion it is painted in red. If you replace 1 occurrence then the suggestion is painter in orange. If all occurrences have been replaced the suggestion is painted in green. The current spelling error is also highlighted so the user can keep track. The image bellow displays a graphical representation of the above.


My only disclaimer is that you give me your feedback should you choose to use it in your customer’s application.

 
var Spellcheker;

function OnCrmPageLoad()
{ 
 Spellcheker = new InlineSpellcheker();
 Spellcheker.KeyCode = 90;
 Spellcheker.AddField("gi_name"); 
}


function InlineSpellcheker()
{
 /* Private Fields */
 var Instance = this;
 var mswordApp;
 var activeDoc;
 
 /* Public Fields */
 Instance.KeyCode = 90; //Z
 Instance.Fields  = [];
 Instance.SBox = new SuggestionBox();
 
 /* Public Methods */
 /* Add Fields with spell checking */
 Instance.AddFields = function()
 {
  for( var i = 0 ; i < arguments.length; i++ )
  {
   var field   = document.getElementById( arguments[ i ] ); 
   if( isNullOrEmpty( field )) return;
   
   Instance.Fields[ field.id ] = field;
   field.title  = "Press Alt + ";
   field.title += String.fromCharCode(Instance.KeyCode);
   field.title += " to use SpellChecker";
   
   field.attachEvent( "onkeydown" , onSpellCheckingTest );
   field.attachEvent( "onfocusout" , onLostFocusCleanUp ); 
  }
 }
 /* Add a Field with spell checking*/
 Instance.AddField = function( fieldId ){
  Instance.AddFields( fieldId );
 }
 /* Kill word application */
 Instance.Quite = function()
 {
  if( !isNullOrEmpty( mswordApp ) )
  {
   mswordApp.ActiveDocument.Close( 0 );
   mswordApp.Quit( 0 );
  }
  activeDoc = null;
  mswordApp = null;
 }
 
 /* Event Callbacks */
 function onLostFocusCleanUp()
 {
  var field = Instance.Fields[ event.srcElement.id ];
  if( isNullOrEmpty( field ) ) return;
  
  field.SpellingErrors = null;
  field.Box = null;
  Instance.SBox.Clean(); 
 }
 
 function onSpellCheckingTest()
 {
  
  var scKeyStroke = event.altKey && event.keyCode == Instance.KeyCode;
  if( scKeyStroke == true )
  { 
   var field = Instance.Fields[ event.srcElement.id ];
   if( isNullOrEmpty( field ) || isNullOrEmpty( field.DataValue ) )
    return Instance.SBox.Hide();
   
   Instance.SBox.Load( field );
   
   var result = InitializeWordObject();
   if( result != "" ) return alert( "ok" + result );
   
   field.SpellingErrors = new SpellingErrors();
   
   var textParts = field.DataValue.split( /\W/ );
   var foundSuggestions = false;
   
   for( var i = 0 ; i < textParts.length ; i++ )
   {
    var word  = textParts[ i ].replace(/\W*/gi,"");
    if( field.SpellingErrors.GetByValue( word ) != null )
     continue;
    
    try
    { 
     activeDoc.Content = textParts[i];
     activeDoc.LanguageDetected = false;
     var range = activeDoc.Range(0,activeDoc.Range().End);
      range.DetectLanguage();
       
     if( range.SpellingErrors.Count > 0 )
     {
      var result = range.GetSpellingSuggestions();
      if( result.Count > 0 )
      { 
       var suggestion = new Suggestion(word);
       for( var k = 1 ; k < result.Count ; k++ )
         suggestion.AddOption( result.Item( k ).name );   
       field.SpellingErrors.Add( suggestion );
       foundSuggestions = true;
      }
     }
    }
    catch( e )
    {
     Instance.Quite();
     return alert( e.message );
    } 
   }
   
   if( !foundSuggestions ) Instance.SBox.Hide();
   else Instance.SBox.UpdateUI( 0 );
   
   return false;
  }
 }
  
 /* Private Members */
 function InitializeWordObject()
 {
  try
  {
   if( !isNullOrEmpty( mswordApp ) ) return "";
   attachEvent( "onunload" , Instance.Quite );
   mswordApp = new ActiveXObject( "Word.Application" );
   mswordApp.Visible = false;
   mswordApp.Application.Visible = false;
   activeDoc = mswordApp.Documents.Add();
   return "";
  }
  catch( wordErr )
  {
   Instance.Quite();
   return wordErr.message;
  }
 }
 
 /* Classes */
 function Suggestion( word )
 {
  /* Public Fields */
  this.Word = word;
  this.Replacement = "";
  this.Options = [];
  this.IsReplacedOnce = false;
  this.IsReplacedAll  = false;
  
  /* Public Methods */
  this.AddOption = function( name ){
   this.Options[ this.Options.length ] = name;  
  }
 }
 
 /* Collection of Spelling Errors Suggestions */
 function SpellingErrors()
 {
  /* Public Fields */
  this.Keys = [];
  this.Vals = [];
  
  /* Public Methods */
  this.Add = function( suggestion )
  {
   if( this.Vals[ suggestion.Word ] == null )
   {
    this.Keys[ this.Keys.length ] = suggestion;
    this.Vals[ suggestion.Word  ] = suggestion;
   }
  }
  /* Retrieve suggestion by word */
  this.GetByValue = function( word ){
   return this.Vals[ word ];
  }
  /* Retrieve suggestion by position */
  this.GetByIndex = function( index )
  {
   if( this.Keys[ index ] != null )
    return this.Vals[ this.Keys[ index ].Word ];
   return null;
  }
 }
 
 /* Suggestion Box Popup */ 
 function SuggestionBox()
 {
  /* Private Fields */
  var Box = this;
  var SBoxPopup;
  
  /* Public Fields  */
  Box.Field = null;
  
  Box.Load = function( field )
  {
   Box.Field = field;
   
   var loadingHTML  = "<table height='100%' width='100%' style='cursor:wait'>";
    loadingHTML += "<tr><td valign='middle' align='center'>";
    loadingHTML += "<img alt='' src='/_imgs/AdvFind/progress.gif'/>";
    loadingHTML += "<div/><b>Loading...</b>";
    loadingHTML += "</td></tr>";
    loadingHTML += "</table>";
    
   SBoxPopup.document.all.divList.innerHTML = loadingHTML;
   
   var Width  = 241;     
   var Height = 140;     
   var Position = GetControlPostion(field);
   var Left   = Position.X + 1;
   var Top    = Position.Y + 1;
       SBoxPopup.show( Left , Top , Width , Height , null ); 
  }
  
  /* Public Methods */
  
  /* Hide the popup is it exists */
  Box.Hide = function() {     
   if( SBoxPopup ) SBoxPopup.hide();
  }
  /* Clean popup control expando objects and html*/
  Box.Clean = function()
  {
   with( SBoxPopup.document.all )
   {
    btnReplace.SelectedOption    = null;
    btnReplaceAll.SelectedOption = null;
    spnReplace.innerHTML = "";
   } 
  }
  /* Update the current selection */
  Box.UpdateSelection = function( index , newWord )
  {
   var suggestion = Box.Field.SpellingErrors.GetByIndex(index);
   if( !isNullOrEmpty( suggestion ) )
   {
    suggestion.Replacement = newWord;
    with( SBoxPopup.document.all )
    {
     spnReplace.innerHTML = "<B style='color:red'>" + newWord + "</B>";
     btnReplace.SelectedOption = suggestion;
     btnReplaceAll.SelectedOption = suggestion;
    }
   }
  }
  /* Update the Popup UI with current word selection */
  Box.UpdateUI = function( index )
  {
   var spellingErrors = Box.Field.SpellingErrors;
   if( !isNullOrEmpty( spellingErrors ) && spellingErrors.Keys.length > 0)
   {
    var create = SBoxPopup.document.createElement;
    with( SBoxPopup.document.all )
    {
      divList.innerHTML = "";
     var suggestion = spellingErrors.GetByIndex( index );
      spnWord.innerText    = suggestion.Word;
      spnReplace.innerHTML = getReplacementHTML( suggestion );

     for( var i = 0 ; i < suggestion.Options.length ; i++ )
     {
      var n = create( "SPAN" );
       n.innerHTML = "&nbsp;" + ( i + 1 ) + ".&nbsp;";
      
      var a = create( "<A style='width:85%;padding:1px'>" );
       a.href = "#";
       a.onclick     = function(){ Box.UpdateSelection( index , this.innerText ); };
       a.onmouseover = function(){ this.style.backgroundColor = 'gold' ; };
       a.onmouseout  = function(){ this.style.backgroundColor = 'white'; };
       a.Box = Box;
       a.innerText = suggestion.Options[ i ];
       
      var br = create("<BR style='line-height:2px'>");
       
       divList.appendChild( n );
       divList.appendChild( a );
       divList.appendChild( br );
     }
     
     var spLen = Box.Field.SpellingErrors.Keys.length;
     var iPrev = index - 1 < 0 ? 0 : index - 1;
     var iNext = index + 1 > spLen - 1 ? spLen - 1 : index + 1;
     
     btnPrev.Box    = Box;
     btnNext.Box    = Box;
     btnReplace.Box   = Box;
     btnReplaceAll.Box = Box;
     
     btnReplace.SelectedOption = null;
     btnReplaceAll.SelectedOption = null;
     
     btnPrev.onclick       = function(){ this.Box.UpdateUI( iPrev ); }
     btnNext.onclick    = function(){ this.Box.UpdateUI( iNext ); }
     btnReplace.onclick   = function(){ this.Box.Replace( this ); }
     btnReplaceAll.onclick = function(){ this.Box.ReplaceAll( this );}
    
     var range = Box.Field.createTextRange();
     var found = range.findText(suggestion.Word,1,2);
     if( found )
     {
      range.expand(suggestion.Word);
      range.select();
     }
    }
   }
  }
  /* Replace a single occurance of the current error */
  Box.Replace = function( btn )
  {
   var suggestion = btn.SelectedOption;
   if( suggestion )
   {
    var re = new RegExp( "\\b" + btn.SelectedOption.Word + "\\b" , "i" );
    var result = replace( btn , re );
     suggestion.IsReplacedOnce = result != Box.Field.DataValue;
     suggestion.IsReplacedAll  = result == Box.Field.DataValue;
     Box.Field.DataValue = result;
     setReplacementHTML( suggestion );
   }
   else
   {
    setNullSuggestionHTML();
   }
  }
  /* Replace all occurances of the current error */
  Box.ReplaceAll = function( btn )
  {
   var suggestion = btn.SelectedOption;
   if( suggestion )
   {
    var re = new RegExp( "\\b" + btn.SelectedOption.Word + "\\b" , "ig" );
    var result = replace( btn , re );
     suggestion.IsReplacedAll = true; 
     Box.Field.DataValue = result;
     setReplacementHTML( suggestion );
   }
   else
   {
    setNullSuggestionHTML();
   }
  }
  
  /* Private */
  
  function replace( btn , re )
  {
   var suggestion = btn.SelectedOption;
   if( !isNullOrEmpty( Box.Field.DataValue ) && 
    !isNullOrEmpty( suggestion ) )
   {
    return Box.Field.DataValue.replace( re , suggestion.Replacement );
   }
  }
  
  function GetControlPostion( control )
  {     
    var Position = new Object();     
    var controlHeight = control.offsetHeight;     
    var iY = 0, iX = 0;     
    while( control != null )     
    {           
    iY += control.offsetTop;
    iX += control.offsetLeft;
    control = control.offsetParent;
    }     
    Position.X = iX + screenLeft;     
    Position.Y = iY + screenTop + controlHeight;     
    return Position;
  }
  
  function Initialize()
  {
   SBoxPopup = window.createPopup();     
          
   var baseStyleUrl = "/" + ORG_UNIQUE_NAME + "/_common/styles";
   with( SBoxPopup.document )
   { 
    createStyleSheet( baseStyleUrl + "/global.css.aspx?lcid=" + USER_LANGUAGE_CODE );  
    createStyleSheet( baseStyleUrl + "/fonts.aspx?lcid=" + USER_LANGUAGE_CODE );
    createStyleSheet( baseStyleUrl + "/controls.css.aspx?lcid=" + USER_LANGUAGE_CODE );
    body.innerHTML = getSBoxHTML();  
   }
  }
  
  function getSBoxHTML()
  {
   var html = "";
    html += "<DIV style='width:100%;height:100%;border:1px solid gray;background-color: #d8e8ff;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#eff3ff,EndColorStr=#84aed6);padding-left:2px;font:12 px tahoma'>";
    
    html += "<TABLE cellpadding='1' cellspacing='1' style='width:100%'>";
    html += "<TR>";
    html += "<TD width='40%' height='20' valign='middle'>";
    html += "<NOBR>";
    html += "<IMG src='/_imgs/ico_mailmerge.gif' align='top'/>&nbsp;";
    html += "<B><SPAN style='margin-top:5px' id='spnWord'></SPAN></B>";
    html += "</NOBR>";
    html += "</TD>";
    
    html += "<TD>";
    html += "<NOBR>";
    html += "<IMG src='/_imgs/SetRegarding.gif' align='top'/>&nbsp;";
    html += "<B><SPAN id='spnReplace'></SPAN></B>";
    html += "</NOBR>";
    html += "</TD>";
    
    html += "<TR>";
    html += "<TD>";
    html += "<BUTTON id='btnPrev' class='ms-crm-Button' style='height:25'>Previous</BUTTON>";
    html += "</TD>";
    html += "<TD rowspan='4' width='65%' height='20'>";
    html += "<DIV id='divList' style='overflow-y:scroll;width:95%;height:110;border:1px solid black;background-color:white'>";
    html += "</DIV>";
    html += "</TD>";
    html += "</TR>";
    
    html += "<TR>";
    html += "<TD>";
    html += "<BUTTON id='btnNext' class='ms-crm-Button' style='height:25'>Next</BUTTON>";
    html += "</TD>";
    html += "</TR>";
    
    html += "<TR>";
    html += "<TD>";
    html += "<BUTTON id='btnReplace' class='ms-crm-Button' style='height:25'>Replace</BUTTON>";
    html += "</TD>";
    html += "</TR>";
    
    html += "<TR>";
    html += "<TD>";
    html += "<BUTTON id='btnReplaceAll' class='ms-crm-Button' style='height:25'>Replace All</BUTTON>";
    html += "</TD>";
    html += "</TR>";
    
    html += "</DIV>"; 
   return html;
  }
  
  function getReplacementColor( suggestion ){
   if( suggestion.IsReplacedAll ) return "green";
   else if( suggestion.IsReplacedOnce ) return "orange";
   else return "red";
  } 
  
  function getReplacementHTML( suggestion ){
   var color = getReplacementColor( suggestion );
   return "<B style='color:" + color + "'>" + suggestion.Replacement + "</B>";
  }
  
  function setReplacementHTML( suggestion ){
   SBoxPopup.document.all.spnReplace.innerHTML = getReplacementHTML( suggestion );
  }
 
  function setNullSuggestionHTML(){
   SBoxPopup.document.all.spnReplace.innerHTML = "<B>Select a suggestion</b>"; 
  }
  
  Initialize();
 }

 //Utility
 function isNullOrEmpty( o ){
  return o == null || typeof( o ) == "undefined" || o == "";
 }
}

OnCrmPageLoad();