How to implement a simple character counter

[JerryWang]

In the blog we talk about the social media integration into CRM Interaction center agent inbox, which allows end users to directly reply facebook posts & tweets in CRM system. In order to achieve this we implement a very simple character counter which has similar functionality as that in twitter website:

The counter described in this blog is delivered by SAP in CRM 7.0 EHP3. You can find it in UI component SMCOV, view ReplyMessageView.htm. Its function is slightly different from twitter: it does not display the left number of characters which is allowed to input, but the number of characters which are ALREADY typed by end user.

The following functionalities are supported by this simple counter:

1. Whenever you add, delete or change your input in text area, the number of characters you have typed will be automatically updated below the text area

2. The cut & paste event are also captured by the counter

Any other advanced functionalities like url automatically highlighted as hyperlink is not supported by this simple counter.

Here below is the implementation of this counter:

1. In your UI component view, draw the visual area of the counter which will show the text "The number of characters entered:XXX" via html p tag:

<p id="COUNTER_TXT"  style="margin-left: 8px; margin-top: 1px; margin-bottom: 4px; margin-right: 8px; color:rgb(102,102,102)"></p>

2. in line 32, the function handleClick acts as the event handler which will be called automatically whenever the content in the text area is changed.

In line 34 the final text in the visual area of the counter is populated.

For translation purpose, the text is not hard-coded but stored and got in Online Text Repository:

lv_title_prefix = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_SOC_SMC/COUNTER_TXT' ). "#EC NOTEXT. 



lv_title_prefix = lv_title_prefix && ':'.

In line 35 the current number of characters is updated in the visual area of the counter. The variable counter is a DOM variable which represents the html tag p with ID COUNTER_TXT, which is retrieved later.

The function fillTitle is designed to ensure the counter still displays the correct number of typed characters in text area when the UI is rendered for the first time ( at that time no event for the text area will be fired ).

Here the biggest challenge is how to get the ID of the text area, so that we can use document.getElementByID to get its DOM node and then get the actual content which has been typed in the text area.

As this text area is not manually created via native HTML code, it is impossible to get its ID directly in the view.

However, we could investigate on the naming convention of this ID via development tool ( just click F12 on web page) of IE.

Click Find->Select element by click, then click on the text area, and development tool will automatically locate the native html textarea element, and then we can observe that the naming convention for it is <component_id>_socialpost_struct.content.

The current component id is available in the attribute component id of view controller, so finally we can populate the ID of text area via the following code:

3. The left code is very easy to understand: retrieve the DOM node for input textarea ( line 47) and visual area of counter( line 48), and register the event handler for three events on text area element.