Dec 13, 2016

Character Limit using JQuery in SharePoint

2 comments  
In this post, we will learn how to implement Character Count (here in this example, maximum allowed 2000 characters) using JQuery in SharePoint.

Prerequisite:
1. Create a SharePoint List with a column named "Comments" - data type Multi line text with plain text as the option selected
2. SharePoint Designer 2013 for editing the SharePoint list with span and to identify the ID of the field created

Solution:
1. Open the SP site in SharePoint designer, navigate to the list -> Create a custom new form -> Edit it.
To know how to create a custom new form in SharePoint Designer, read this article.
2. Below is the HTML code for my "Comments field in SharePoint Designer: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<tr>
    <td width="190px" valign="top" class="ms-formlabel">
        <H3 class="ms-standardheader">
   <nobr>Enter your comment:</nobr>
  </H3>
    </td>
    <td valign="top" class="ms-formbody" style="background-color:#ffffff; width:400px;">
        <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="Comments" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Comments')}" />
        <SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="Comments" ControlMode="New" />
        <span title="2000" id="commentsCount">2000</span><span> Characters Left</span>
    </td>
</tr>
Make a note that I have added a Span tag below the SharePoint control to display the Characters. Also, we have declared it as 2000 characters for this example.
Now, add a script tag or a separate file (then refer it inline) -> add the below code in it save it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
$(document).ready(function() {
 //Character count for comments text
 $("textarea[name*='ff6']").keyup(function () {
  characterCount('ff6', '#commentsCount');
 });
});

//Character count for multiline text 
function characterCount(controlID,spanId)
{
  var controlVal = $("textarea[name*='" + controlID + "']");
  var cmax = $(spanId).attr("title");
  if(controlVal.val().length >= cmax) {
      controlVal.val(controlVal.val().substr(0, cmax));
   }
  $(spanId).text(cmax - controlVal.val().length);            
}
In this above JS, "ff6" is the ID of the SharePoint control.
Save the form and JS, try typing inside the control you can see the characters been automatically counted and decreases as you type. Cool Isn't it? 😉
Please share this post by clicking the below social buttons if this helps you😎
Happy coding! 

Oct 17, 2016

Accessing Radio Buttons using JQuery in SharePoint Online

19 comments  
I couldn't find anything obvious for accessing SharePoint Radio Buttons so chucked this together, hopefully useful for someone else :)
Note: The below code/solution is applicable to accessing radio button in a custom SharePoint List forms. To know how to create a custom form in SharePoint Online, read this article 
Accessing Radio Button control in SharePoint is little tricky than accessing the radio buttons in HTML. The reason being, radio buttons are rendered as a table instead of a single control as shown below (radio button and it's preview in developer tools - Chrome):

 So, each radio button is rendered inside SPAN tag in a table. To access the normal SharePoint controls, we will use either ID or title property but for Radio Buttons it is little complicated.
1. The actual radio button control is in "input" tag 
2. The values (Example here: Yes, No) are inside "label" tag 
3. But each control (Yes & No) are represented by ID which is generated by SharePoint 
4. If you keenly look at the ID, there is "ff41" which is the ID of the control generated randomly by SharePoint.

 Now, open the designer, add an ID to the TD of the Radio button so that we can query it easily using JSOM as shown below:

1
2
3
4
//Radio button change event
$("td[id='tdApproved'] input:radio[name*='ff4']").change(function(){
     // do something
});


1
2
3
//Clear the values of radio button - reset the values of radio button
$("td[id='tdApproved'] input[name*='ff4']")[0].checked = false;
$("td[id='tdApproved'] input[name*='ff4']")[1].checked = false;


1
2
3
4
//Checking the value of radio button
if($("td[id='tdApproved'] input:radio[name*='ff4']:checked +  label").text() != 'Yes'){
    // do something
} 


1
2
//Focus Radio button 1st element in control
$("td[id='tdApproved'] input:radio[name*='ff4']:eq(0)").focus();


1
2
3
4
5
6
7
8
9
//Align all Radio Buttons in the page horizontally
function HorizontalAlignChoices() {
    var objSpans = $(".ms-RadioText");
    objSpans.each(function () {
        if ($(this).is("span")) {
            $(this).closest("tr").css({ "float": "left" });
        }
    });
}

*** "tdApproved" is the ID of the SharePoint Radio Button Control, "ff4" is the unique ID of the SharePoint Control in your List form. Change this ID according to your form to get the exact result.
Please share your valuable comments which will make me write more and also share this post using the below social buttons to others. 
Happy Share(ing)Point!   

Update: 21/06/2017
Read this article, to know how to access Checkbox in SharePoint using JQuery ðŸ˜Ž