Integrating IC Web Client with Winter-Tree Spell Checker Applet

+Disclaimer: This sole purpose of this blog is to provide technical suggestion and know-how. The author is not associated with Winter-Tree software company. +

As we know, spell checking is a feature highly desirable by users but not provided by SAP out of the box. The feature is especially important in the CRM IC Web Client Email editor where users want to spell check the email content before it get send out to their customer.

One of the 3rd party spell check product that is commonly used by CRM IC Web customer is the Sentry Spelling Checker* Engine API. SAP provides integration instruction to the product via OSS note 1094006. In summary, it is a Servlet based solution; SAP provides a Servlet, which brokers the original text and the spell check engine. SAP also provides the spell check window that let the user manage the spell check process. The Servlet needs to be “hosted” with a server application (Tomcat, as recommended in the note) with the all the API files being stored in the server. The spell check window also needs to be added to the BSP application manually.<br /><br />Another alternative is to use the Winter-Tree spell check Applet. The applet version has the following key features:</p><ul><li>The applet is embedded as part of the BSP page during runtime. It does not require a server application to host it. All spell check components can be attached as MIME objects in the BSP application itself.</li><li>The spell check window is included as part of the applet. Hence, we do not need to add the spell check window from the OSS note into the BSP.</li></ul><br />Although couple of manual steps still required to implement the solution. The features above greatly simplifies the process and reduces the layer of technology and future maintenance required.<br /><br />Below are the steps to implement the solution on the Email screen of the CRM IC Web client screen. Just bare in mind the the instruction is specific for the WebUI screen (CRM 6.0 and 7.0). For other version of CRM, modification may be required.<p> </p><ol><li>Assuming you have already enhanced the Email WebUI component, CRMCMP_CCS_EML, your BSP Application should be ZCRMCMP_CCS_EML. Goto SE80 to change the BSP application. Import all the Winter-Tree Applet related files into the MIME folders.</li></ol><p>     !https://weblogs.sdn.sap.com/weblogs/images/252113247/ImportMIMEObjects.png|height=241|alt=image|width=328|src=https://weblogs.sdn.sap.com/weblogs/images/252113247/ImportMIMEObjects.png|border=0!</p><div> </div><p>     !https://weblogs.sdn.sap.com/weblogs/images/252113247/Importedobjects.png|height=430|alt=image|width=265|src=https://weblogs.sdn.sap.com/weblogs/images/252113247/Importedobjects.png|border=0!</p><div> </div><div>     2. Adding the Spell Check button in the MailBody.htm. You can follow the complete instruction from OSS note 1094006 except to replace the Java routine name to “onCheckSpelling_ic” parameter.</div><div> </div><div><thtmlb:button id      = “SpellCheckButton” </div><div>     text    = “Spell Check” </div><div>     tooltip = “<%= otr(CRM_IC_APPL/spellcheck) %>” </div><div>     enabled = “<%= gv_spellcheck_enabled %>”</div><div>     design  = “EMPHASIZED”</div><div>onClientClick = “onCheckSpelling_ic()” /></div><div> </div><div>The button will look like this,</div><div>!https://weblogs.sdn.sap.com/weblogs/images/252113247/SpellCheckButton.png|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/252113247/SpellCheckButton.png!</div><div> </div><div> </div><div>3. Add the following Java script at the top of the MailBody.htm.</div><div> </div><div><SCRIPT LANGUAGE=”JavaScript1.1″ src=”/sap/bc/bsp/sap/zcrmcmp_ccs_eml/SpellCheckApplet.js”></SCRIPT></div><div> </div><div><script language=”JavaScript”></div><div>    function onCheckSpelling_ic() {</div><div>      htmlbevent.cancelSubmit = true;</div><div>      var myPageId = document.all.MAILEDIT_PREFIX_ID.value;</div><div>      var btfFrame =</div><div>        document.frames.item(“BTFEditor_IFrame_” + myPageId + “btf1”);</div><div>      var text = btfFrame.document.body.innerText;</div><div>      var html = btfFrame.document.body.innerHTML;</div><div>      var SpellCheckedText;</div><div><br /></div><div>     SpellCheckedText = onCheckSpelling(html);</div><div>     btfFrame.document.body.innerHTML = SpellCheckedText[0];</div><div><br /></div><div>    }</div><div><br /></div><div></script></div><div> </div><div>4. Add the following Applet after the Java script as per the instruction from the Winter-Tree product documentation. The CODEBASE parameter has to be replaced with the exact path where the dictionary files are store. In our case “/sap/bc/bsp/sap/zcrmcmp_ccs_eml”</div><div> </div><div><APPLET CODE=”SpellCheckApplet.class”</div><div>   NAME=”SpellCheckApplet”</div><div>   ARCHIVE=”SpellCheckApplet.jar”</div><div>   CODEBASE=”/sap/bc/bsp/sap/zcrmcmp_ccs_eml*”  

   WIDTH=”1″ HEIGHT=”1″>

5. A few modification need to be done at the Winter-Tree’s SpellCheckApplet.js Java script file specifically for the Email screen.

– Line 55,

Replace

appletLoc.SpellCheckApplet.setText(fieldsToCheck[curFieldToCheck].value);

with

appletLoc.SpellCheckApplet.setText(fieldsToCheck[curFieldToCheck]);

– After line 87,

Add the following line

 return fieldsToCheck; 

– Line 103

Replace

fieldsToCheck[curFieldToCheck].value = appletLoc.SpellCheckApplet.getText();

with

fieldsToCheck[curFieldToCheck] = appletLoc.SpellCheckApplet.getText(); 

And that’s it. Once all the steps are completed, the spell check window will look like this:

 !https://weblogs.sdn.sap.com/weblogs/images/252113247/SpellCheck.png|height=418|alt=|width=660|src=https://weblogs.sdn.sap.com/weblogs/images/252113247/SpellCheck.png!</body>