Word counter in multiline Enhanced Rich Text field
A couple weeks ago we received a request to automatically aggregate weekly report documents into one report through SharePoint. Essentially, replace a manual process of copying and pasting Word documents into an automated SharePoint solution. Part of this request was to limit the overall length of the document so that each report is about two 8½ x 11 pages in length. Internet Explorer and SharePoint being intrinsically NOT a word processor, we decided to use a word count as a visual indicator of length. With Alexander’s Dynamic Forms for SharePoint and a little code this didn’t appear too difficult until we realized our multiline Enhanced Rich Text fields couldn’t use solutions developed for multiline plain text fields (SeeAlexander’s solution here).
Not finding a readily available solution with my limited coding skills, I reached out to a work colleague who came up with a workable solution. Below is my attempt at explaining how to replicate this solution on your DFFS forms.
This solution also needed to work in IE 8 per our intranet browser settings. We created a simpler solution that was working in IE 11 and Chrome, but failed in IE 8. This solution is working in a SharePoint 2013 site displaying in SharePoint 2010 during our migration. Confirmation of this working in a 2013 site would be appreciated.
Step 1. Find Field ID
You will first need to find the field ID of your enhanced rich text field. Use the Developer Toolbar to find the field ID for each enhanced rich text field. It should look something like this: ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte
Step 2. The Code:
Custom JS
In the Custom JS section of the DFFS form, enter the following code for each enhanced rich text field (See attachment for markup and comments):
$('#ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte').bind('keyup blur',function(e){
var thisLength = $(this).text().length;
if(true && thisLength>0){
thisLength = $(this).text().split(/[' '|\n]/).length;
}
if(true && 200>0){
if(thisLength>(200-5)){
$("#myCustomCounter_ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte").css({'background-color':'#FF0000','font-weight':'bold','color':'white','line-height':'25px','margin-top':'-20px'});
}else if(thisLength>(200-10)){
$("#myCustomCounter_ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte").css({'background-color':'#FF6600','font-weight':'bold','color':'white'});
}else{
$("#myCustomCounter_ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte").css({'background-color':'transparent','font-weight':'normal','color':'black'});
}
}
if(200>0){
if(true){
while(thisLength>200){
currVal = $(this).text();
$(this).val(currVal.substring(0,currVal.lastIndexOf(' ')));
thisLength--;
}
}else{
if(thisLength>200){
currVal = $(this).text();
$(this).val(currVal.substring(0,200));
}
}
thisLength = (200-thisLength<0)?0:200-thisLength;
}
$("#myCustomCounter_ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte").html("Remaining words: "+thisLength); });
Why a 200 word count? Our form has 5 multiline fields which roughly translates to 170 words per field to reach our 2 page “limit” goal. We decided not to use a hard limit on the word count, meaning the user can enter more than 200 words and we’re counting on the visual indicators to help guide their behavior. Additional levels and colorization can be added to code as necessary.
Standard
Warning
Limit
See attachments for stylization examples.
Step 3. Create Word Count Headers in Tabs
Now that the code is added we need to create a div in the form to show the Word Count. For each Enhanced Rich Text Field, insert a header below the field. For example:
<div id="myCustomCounter_ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte"></div>
The string “ctl00_m_g_164b102d_447f_4802_9953_f6aacc6e614c_ctl00_ctl05_ctl02_ctl00_ctl00_ctl04_ctl00_ctl00_TextField_inplacerte” is the field ID we captured in Step 1. You will need to customize each header with its related field ID. You may also notice we’ve added a class name to each header. We are not using the class names at this time.
Done!
Save your changes and test your solution by typing into your multiline text field(s). If the word counter is not appearing, you may have not entered the Field ID correctly. Check all areas the field ID is referenced (5x in the JS code and once in each header).
