{"id":5332,"date":"2016-02-15T06:21:20","date_gmt":"2016-02-15T06:21:20","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5332"},"modified":"2016-05-11T19:20:56","modified_gmt":"2016-05-11T19:20:56","slug":"spell-checker-in-custom-visualforce-page","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/spell-checker-in-custom-visualforce-page\/","title":{"rendered":"Spell checker in custom Visualforce page"},"content":{"rendered":"

Standard email functionality in Salesforce supports\u00a0spell checker<\/strong> 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.<\/p>\n

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.<\/p>\n

I did a small hack in my Livecoding session<\/a> to reuse standard Salesforce spell checker in Visualforce page.<\/p>\n

Below code is self explanatory, where I have used standard Salesforce JavaScript file to perform all heavy lifting.<\/p>\n

\r\n<apex:page standardController="Case">\r\n    <apex:form id="frmId">\r\n    \t<apex:pageBlock title="Case Details" mode="edit" id="pgBlock">\r\n        \t<apex:pageblockbuttons >\r\n            \t<apex:commandButton action="{!Save}" value="Save"\/>\r\n                <apex:commandButton action="{!Cancel}" value="Cancel"\/>\r\n                <input type="button" value="Check Spelling" class="btn" onclick="doSpellingCheck()"\/>\r\n            <\/apex:pageblockbuttons>\r\n            \r\n            <apex:pageBlockSection title="Case Fields" columns="2">\r\n            \t<apex:inputField value="{!case.AccountId}"\/>\r\n                <apex:inputField value="{!case.contactId}"\/>\r\n                <apex:inputField value="{!case.status}" required="true"\/>\r\n            <\/apex:pageBlockSection>\r\n            \r\n            <apex:pageBlockSection title="Spell checking" columns="1" id="section2"> \r\n                <apex:inputTextarea id="caseDesc" value="{!case.Description}" cols="150" rows="10" \/>\r\n            <\/apex:pageBlockSection>\r\n            \r\n        <\/apex:pageBlock>\r\n    <\/apex:form>\r\n    \r\n    <script type="text\/javascript" src="https:\/\/zaa-dev-ed.my.salesforce.com\/static\/111213\/js\/spch.js"> <\/script>\r\n    \r\n    <script type="text\/javascript">\r\n     \r\n    \tfunction doSpellingCheck(){\r\n            \tdoSpell({ctrl: '{!$Component.frmId.pgBlock.section2.caseDesc}', \r\n                         lang:'en_US',\r\n                         title:'Check Spelling',\r\n                         intLang:'en_US',\r\n                         organizationId:'00D40000000Iekr',\r\n                         userId:'00540000000nz6A'}, \r\n                        '\/servlet\/SProxyWrapper', document.location.protocol + '\/\/' + 'spell-chi.salesforce.com\/spellcheck', \r\n                        'There is nothing to check', \r\n                        'We are sorry,our spellchecker currently does not support the browser you are using. Please upgrade your browser.', \r\n                        'The Spell Checker is not available in this language.');\r\n            }\r\n    <\/script>\r\n<\/apex:page>\r\n<\/pre>\n
Output :<\/p>\n
\"Spell<\/a>
Spell checker in custom Visualforce page<\/figcaption><\/figure>\n
Update 05\/11\/2016<\/strong>– From Summer 16<\/a>, Salesforce is not supporting Spell checker so this solution may not work.<\/p>\n","protected":false},"excerpt":{"rendered":"
Using Salesforce Spell checker in custom Visualforce pages<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[336],"class_list":["post-5332","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":28,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-interview-questions\/","url_meta":{"origin":5332,"position":0},"title":"Salesforce Interview Questions – Part 1","author":"Jitendra","date":"May 6, 2010","format":false,"excerpt":"Set of most often asked questions on the salesforce.com developement","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":5332,"position":1},"title":"Salesforce interview question related to Lightning framework – Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4107,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based\/","url_meta":{"origin":5332,"position":2},"title":"Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based","author":"Jitendra","date":"December 19, 2014","format":false,"excerpt":"You may find many ways to upload attachments in Salesforce using\u00a0visualforce\u00a0however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"HTML5 Drag And Drop File","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2649,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-dom-elementid-of-the-visualforce-components\/","url_meta":{"origin":5332,"position":3},"title":"Get DOM ElementID of the Visualforce components","author":"Jitendra","date":"January 19, 2012","format":false,"excerpt":"How to get the DOM ElementID of the Visualforce components in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3706,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/visualforce\/introduction-to-visualforce-remote-objects\/","url_meta":{"origin":5332,"position":4},"title":"Visualforce Remote Objects","author":"Jitendra","date":"February 16, 2014","format":false,"excerpt":"One of the exciting feature of Spring14 release is introduction of \"Visualforce Remote Objects\". You can say its actually replacement of JavaScript Remoting. Why do we need \"Visualforce Remote Objects\" when we already have \"JavaScript Remoting\" ? Well, here are few advantages of \"Visualforce Remote Objects\" : No need to\u2026","rel":"","context":"In "Visualforce"","block_context":{"text":"Visualforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/visualforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6232,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/winter-18-automatic-styling-of-visualforce-pages-in-lightning-experience\/","url_meta":{"origin":5332,"position":5},"title":"Winter 18 – Automatic Styling of Visualforce Pages in Lightning Experience","author":"Jitendra","date":"September 6, 2017","format":false,"excerpt":"How to use lightningStylesheets attribute to render Visualforce in Lightning Experience Stylesheet","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Winter 18 - Automatic Styling of Visualforce Pages in Lightning Experience","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Winter-18.gif?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Winter-18.gif?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/09\/Winter-18.gif?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5332","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5332"}],"version-history":[{"count":6,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5332\/revisions"}],"predecessor-version":[{"id":5499,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5332\/revisions\/5499"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}