Spell checker in custom Visualforce page

Standard email functionality in Salesforce supports spell checker out of the box. These days, all modern browsers already has spell checker and customer may agree to use it. However there are some customer, who wants standard look and feel of application include spell checking.

We might be in need to create a custom Visualforce page with spell checker functionality same as of out of the box. Salesforce does not support it in custom pages and there are no pure JavaScript based libraries available to support spell and grammar checking. JavaScript libraries, I have seen, needs to access server side endpoint implemented either in PHP or any language. We can try to use those libraries, however we need to use AJAX request to get spelling and grammar suggestions.

I did a small hack in my Livecoding session to reuse standard Salesforce spell checker in Visualforce page.

Below code is self explanatory, where I have used standard Salesforce JavaScript file to perform all heavy lifting.

<apex:page standardController="Case">
    <apex:form id="frmId">
    	<apex:pageBlock title="Case Details" mode="edit" id="pgBlock">
        	<apex:pageblockbuttons >
            	<apex:commandButton action="{!Save}" value="Save"/>
                <apex:commandButton action="{!Cancel}" value="Cancel"/>
                <input type="button" value="Check Spelling" class="btn" onclick="doSpellingCheck()"/>
            <apex:pageBlockSection title="Case Fields" columns="2">
            	<apex:inputField value="{!case.AccountId}"/>
                <apex:inputField value="{!case.contactId}"/>
                <apex:inputField value="{!case.status}" required="true"/>
            <apex:pageBlockSection title="Spell checking" columns="1" id="section2"> 
                <apex:inputTextarea id="caseDesc" value="{!case.Description}" cols="150" rows="10" />
    <script type="text/javascript" src="https://zaa-dev-ed.my.salesforce.com/static/111213/js/spch.js"> </script>
    <script type="text/javascript">
    	function doSpellingCheck(){
            	doSpell({ctrl: '{!$Component.frmId.pgBlock.section2.caseDesc}', 
                         title:'Check Spelling',
                        '/servlet/SProxyWrapper', document.location.protocol + '//' + 'spell-chi.salesforce.com/spellcheck', 
                        'There is nothing to check', 
                        'We are sorry,our spellchecker currently does not support the browser you are using. Please upgrade your browser.', 
                        'The Spell Checker is not available in this language.');

Output :

Spell checker in custom Visualforce page
Spell checker in custom Visualforce page

Update 05/11/2016– From Summer 16, Salesforce is not supporting Spell checker so this solution may not work.




Related Posts


7 responses to “Spell checker in custom Visualforce page”

  1. Priyanka Singh Avatar
    Priyanka Singh

    Hello sir,i am getting error while executing the page..please help.

    1. Jitendra Zaa Avatar

      Hi Priyanka, can u check if component name is correct in javascript method ?

  2. Garima Avatar

    Hi Jitender,

    I’m getting error ‘An internal server error has occurred’ as mention below comments.

    1. Jitendra Zaa Avatar

      Hi Garima,
      Can you check if Org Id and User Id on line 32 and 33 are correct as per your org ? Also, on line 28, component name is correct ?

  3. Ranu Agarwal Avatar
    Ranu Agarwal

    I am also getting ‘An internal server error has occurred’ error, Please can you help me?

    1. Jitendra Zaa Avatar

      From Summer 16, Salesforce is not supporting Spell checker so this solution may not work.

  4. Hubert Jason Avatar

    Great! Knowledgeable article.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading